[angular] cmd

# base
one workspace can contain multi projects

# common
ng // list available commands
ng version
ng new --help
ng new <workspace-name>
ng new <workspace-name> --defaults
ng new <workspace-name> --directory ./ 
ng new <workspace-name> --skip-install
ng new <workspace-name> --skip-git
ng new <workspace-name> --routing
ng g --help // g: generate
ng g m --help // m: module
ng g m <module-name>
ng g s <service-name> // s: service
ng g c <component-name> // c: component
ng g c <component-name> --inline-style --flat -m <module-name>
ng build --help
ng build
ng build --prod
ng build --outputPath=<path> --configuration=<configuration-name> --base-href=<xxx> // <xxx> ex. /demo-angular/
ng serve --help
ng serve
ng serve --host=<ip> --port=<port>
ng run --help // runs an architect target with an optional custom builder configuration defined in your project
ng run <target> [options]
ng run <target> -c <configuration>

# [note] angular.json
projects
  <project-name>
    projectType // ex. application, library
    architect
      <target> // ex. build, serve, extract-i18n, test
        builder
        options
        configurations
        defaultConfiguration
defaultProject

# [note] angular universal (server-side-render, ssr)
ng new myssr && cd myssr
ng add @nguniversal/express-engine
- way1
npm run dev:ssr // <=> ng run myssr:serve-ssr
- way2
npm run build:ssr // <=> ng build && ng run myssr:server
  ng build // create dist/myssr/browser (√ Browser application bundle generation complete.)
  ng run myssr:server // create dist/myssr/server (√ Server application bundle generation complete.)
npm run serve:ssr // <=> node dist/myssr/server/main.js
=> ref: https://angular.tw/guide/universal

# [note] angular universal web server
aspnetcore-engine
express-engine
hapi-engine
socket-engine
=> ref: https://angular.tw/guide/universal#universal-web-servers
=> ref: https://github.com/angular/universal/tree/master/modules

# [note] angular pwa
ng new mypwa && cd mypwa
ng add @angular/pwa
npm run build
// TODO:
=> ref: https://angular.tw/guide/service-worker-getting-started

angular_universal_with_ngOnInit_demo1.ts

@Component({
  selector: 'app-page1',
  template: '<p>page1 works! {{ name }}</p>',
})
export class Page1Component implements OnInit {

  name = 'peter';

  ngOnInit(): void {
    setTimeout(() => {
        // debugger;
        this.name = 'peter kang';
      }, 5000);
  }

}

# [note]
1. angular universal web server waits for 5 seconds (because Page1Component ngOnInit)
2. using postman, see: page1 works! peter kang
3. using browser, see: page1 works! peter kang
                    => page1 works! peter // fast
                    => page1 works! peter kang // wait for 5 seconds (because Page1Component ngOnInit)
4. observe that ngOnInit will do twice

angular_universal_with_ngOnInit_demo2.ts

@Component({
  selector: 'app-page1',
  template: '<p>page1 works! {{ name }}</p>',
})
export class Page1Component implements OnInit {

  name = 'peter';
  platformId: object;

  constructor(
    @Inject(PLATFORM_ID) platformId: object
  ) {
    this.platformId = platformId;
  }

  ngOnInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      // do something ...
    }
    if (isPlatformServer(this.platformId)) {
      setTimeout(() => {
        // debugger;
        this.name = 'peter kang';
      }, 5000);
    }
  }

}

# [note]
1. angular universal web server waits for 5 seconds (because Page1Component ngOnInit)
2. using postman, see: page1 works! peter kang
3. using browser, see: page1 works! peter kang
                    => page1 works! peter // fast
4. observe that ngOnInit still do twice
5. in ngOnInit, but by isPlatformBrowser() / isPlatformServer(), differentiate browser and server actions