Angular CLI source code analysis

Prepare:

Install/；
Install VS Code/；
Create folder angular-cli-source-learn;
Install the Angular CLInpm install @angular/cli/package/@angular/cli；

General global installation during developmentnpm install -g @angular/cli, for the convenience of studying the source code, use local installation./installation

environment:

22.13.1；
Angular CLI 19.1.5。

Remark:

Recommend this document and course"Angular CLI Source Code Analysis"Learn together.

1. ng --help source code analysis

Program entry

angular-cli-learn\node_modules\@angular\cli\bin\

Important documents

node_modules@angular\cli\bin\
node_modules@angular\cli\bin\
node_modules@angular\cli\lib\
node_modules@angular\cli\lib\cli\
node_modules@angular\cli\src\command-builder\
node_modules@angular\cli\src\command-builder\utilities\
node_modules@angular\cli\src\commands\build\

.vscode/

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: /fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [

    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}\\node_modules\\@angular\\cli\\bin\\",
      "args": ["--help"]
    }
  ]
}

Comma operator

/zh-CN/docs/Web/JavaScript/Reference/Operators/Comma_operator

Optional chain operator

/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Yargs

/package/yargs

const yargs = require('yargs')

 // const argv = ()
 // ();
 // (argv);

 yargs
   .command({
     command: 'add',
     describe: 'Add notes',
     handler: function () {
       ('Adding notes...');
     }
   })
   .command({
     command: 'edit <file>',
     describe: 'Editor Notes',
     handler: function (argv) {
       ('Editing notes... ' + );
     }
   })
   .scriptName('note')
   .epilogue('Welcome to use the Notes command line tool.')
   .parse()

node .\ create student --name=zhouhuajian --age=18

ng --help --json-help

2. ng new source code analysis

Important documents

node_modules@angular\cli\src\command-builder\utilities\
node_modules@angular\cli\src\command-builder\
node_modules@angular\cli\src\command-builder\
node_modules@angular-devkit\schematics\src\workflow\
node_modules@schematics\angular\ng-new\
node_modules@schematics\angular\workspace\
node_modules@schematics\angular\application\
node_modules@angular-devkit\schematics\tasks\package-manager\
angular-app2\node_modules@angular-devkit\schematics\tasks\repo-init\

Create a workspace/project

ng new angular-app

ng new [name] Creates a new Angular workspace.

.vscode/

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: /fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}\\node_modules\\@angular\\cli\\bin\\",
      // "args": ["--help"]
      "args": ["new", "angular-app2"]
    }
  ]
}

Conditional breakpoint

node_modules@angular\cli\src\command-builder\utilities\

== 'new [name]'

Angular Schematics

/package/@angular-devkit/schematics

/package/@angular-devkit/schematics-cli

/tools/cli/schematics

/tools/cli/schematics-authoring

npm install -g @angular-devkit/schematics-cli

Local installation for easy researchnpm install @angular-devkit/schematics-cli

schematics blank --name hello-world
 cd hello-world
 schematics blank --name hello-angular
 # Modify the project name schematics-demo
 cd ../schematics-demo
 schematics blank --name hello-both

// schematics-demo\src\hello-world\
export function helloWorld(_options: any): Rule { 
  return (tree: Tree, _context: SchematicContext) => {
    ('hello-world', '123')
    return tree;
  };
}
// schematics-demo\src\hello-angular\
export function helloAngular(_options: any): Rule {
  return mergeWith(url('./files'));
}
// schematics-demo\src\hello-both\
export function helloBoth(_options: any): Rule {
  // return chain([schematic('hello-world', {}), schematic('hello-angular', {})])

  // /
  // /
  return chain([
    mergeWith(apply(empty(), [schematic('hello-world', {}), schematic('hello-angular', {})]))
  ])
}

npm run build
 schematics .:hello-world
 schematics .:hello-angular
 # Delete two generated files
 schematics .:hello-both
 cd ..
 schematics ./schematics-demo:hello-both

3. ng generate source code analysis

Important documents

node_modules@angular\cli\lib\
angular-app\node_modules@angular\cli\lib\cli\
angular-app\node_modules@angular\cli\src\commands\generate\
angular-app\node_modules@schematics\angular\component\
angular-app\node_modules@schematics\angular\component\files_name@dasherize@if-flat__name@dasherize_.type@dasherize.

.vscode/

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: /fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [

    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}\\node_modules\\@angular\\cli\\bin\\",
      "args": ["generate", "component", "home"],
      "cwd": "${workspaceFolder}\\angular-app"
    }
  ]
}

Schematic

schematics-demo\src\hello-somebody

// Create hello-somebody
 cd .\schematics-demo
 schematics blank --name hello-somebody
 // Run hello-somebody
 cd ..
 schematics ./schematics-demo:hello-somebody --name XiaoMing --flat --debug false

 //
 {
   "properties": {
     "name": {
       "type": "string"
     },
     "flat": {
       "type": "boolean"
     }
   }
 }

 // files/__name@dasherize@if-flat__/__name__.
 <%= name %>
 <% if (name=='XiaoMing') {%>Hello<%}%>

//
 import { Rule, apply, applyTemplates, mergeWith, url, strings, move } from '@angular-devkit/schematics';

 export function helloSomebody(_options: any): Rule {
   // /__name@dasherize@if-flat__/__name__.
   // Virtual tree
   // name: XiaoMing
   // /__name__/__name__.
   (_options);
  
   // /xiao-ming/
   // C:\Users\zhouhuajian\Desktop\angular-cli-source-learn/hello/somebody/
   let source = apply(url('./files'), [
     applyTemplates({
       ..._options,
       ...strings,
       'if-flat': (dirname: string) => (_options.flat ? '' : dirname)
     }),
     move("hello/somebody")
   ])
   return mergeWith(source)
 }

4. ng build source code analysis

Important documents

angular-app\node_modules@angular\cli\src\command-builder\
angular-app\node_modules@angular\cli\src\command-builder\
angular-app\node_modules@angular\build\src\builders\application\
angular-app\node_modules@angular\build\src\builders\application\
angular-app\node_modules@angular\build\src\builders\application\
angular-app\node_modules@angular\build\src\tools\esbuild\

.vscode/

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: /fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [

    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}\\node_modules\\@angular\\cli\\bin\\",
      "args": ["build"],
      "cwd": "${workspaceFolder}\\angular-app"
    }
  ]
}

Architect

/reference/configs/workspace-config#configuring-cli-builders

esbuild packager

angular-app\esbuild-demo\

const esbuild = require('esbuild')

({
  entryPoints: {
    main: "./src/"
  },
  outdir: "./dist",
  bundle: true,
  minifyIdentifiers: true,
  minifySyntax: true,
  minifyWhitespace: true,
  entryNames: '[name]-[hash]',
  write: false
}).then(buildResult => {
  (buildResult);
  ([0].text);
})

angular-app\esbuild-demo\src\

// 
require('./utils').sayHello()
(123);

// 
 = () => ("hello");

5. ng serve source code analysis

Important documents

angular-app\node_modules@angular\cli\src\command-builder\
angular-app\node_modules@angular\cli\src\command-builder\
angular-app\node_modules@angular-devkit\build-angular\src\builders\dev-server\
angular-app\node_modules@angular-devkit\build-angular\src\builders\dev-server\
angular-app\node_modules@angular\build\src\builders\dev-server\
angular-app\node_modules@angular\build\src\tools\vite\plugins\
angular-app\node_modules@angular\build\src\tools\vite\middlewares\
angular-app\node_modules@angular\build\src\tools\vite\middlewares\

.vscode/

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: /fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [

    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}\\node_modules\\@angular\\cli\\bin\\",
      "args": ["serve"],
      "cwd": "${workspaceFolder}\\angular-app"
    }
  ]
}

Vite build tools

angular-app\vite-demo\

import { createServer } from "vite";
const indexHtml = `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  This is a home page in memory.
</body>
</html>`
const server = await createServer({
  server: {
    host: 'localhost',
    port: 3000
  },
  root: './src',
  plugins: [{
    name: 'plugin-demo',
    configureServer: async (server) => {
      // request response
      ((req, res, next) => {
        if ( == '/') {
           = '/'
        }
        next()
      })
      ((req, res, next) => {
        () // http://localhost:3000/
        // if ( == '/' ||  == '/') {
        if ( == '/') {
           = 200
          (indexHtml)
        } else {
           = 404
          ()
        }
        // ()
        // ("Hello")
        // (" World")
        // ("!")
      })

      return async () => {
        ((req, res, next) => {

        })
        ();

      }
    }
  }]
})
await () // http://localhost:3000/
()
({
  print: true
})

angular-app\vite-demo\src\

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    This is a home page.
  </body>
</html>