Some useful resources in developing websites with Angular

I would like to share some useful tips in developing web applications with Angular.

Part 1 : UI Frameworks
Part 2: Extensions
Part 3. Coding

Part 1 : UI Frameworks

To kick off an Angular project, you can use some Angular UI Libraries, like: Angular Material, PrimeNG, NG-Zorro and other UI frameworks.

Here is a list of UI frameworks that Angular recommend:

Source: Angular Development Resources

Part 2: Extensions

For those who develop Angular web applications in Visual Studio Code, there are some very useful extensions you can not miss.

Angular Follow Selector

Angular Language Service

Debugger for Chrome

To debug correctly in Angular >= 6, you can follow this configuration in launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ng serve",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "npm: start",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      }
    },
    {
      "name": "ng test",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      }
    },
    {
      "name": "ng e2e",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": [
        "${workspaceFolder}/e2e/protractor.conf.js"
      ]
    }
  ]
}

For more details, check Angular CLI Debug