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

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


ESLint or TSLint

ESLint

ESLint Exension

TSLint

TSLint Extension


Angular Essentials (Version 9)


Part 3. Coding

Angular Coding style guide

Comments