ng-experiments

Experiments with Angular boilerplate code setup for v14 and v15 mainly for research @Injectable() issues.

Setup of boilerplate code:

Info:

https://angular.io/tutorial/tour-of-heroes/toh-pt0

Example:

https://angular.io/generated/live-examples/toh-pt0/stackblitz.html

In short:

• npm install @angular/cli@16 --global
• ng new ng16 or ng new ng16 --standalone
• If Routing was NOT configured during ng new then ng generate module app-routing --flat --module=app
• ng generate component components/details (since ng16 component is created a standalone)
• ng generate service services/hero
• ng add @angular-eslint/schematics@16
• ng add @angular/material.
• When migrating from v14 to v15 at least, Angular MDC migration is needed => https://rc.material.angular.io/guide/mdc-migration
  • ng update @angular/material
  • ng generate @angular/material:mdc-migration
    • For not yet Material using project commends gives zero output
    • But for v14=>v15 it's a change towards USAGE of legacy components and v15=>v16 those legacy replaced by actual new componets.
    • LOT of changes in both cases for existed complex project.
• [Standalone migration] (https://angular.io/guide/standalone-migration) - if legacy code created BEFORE ng16
  • Run ng g @angular/core:standalone and select "Convert all components, directives and pipes to standalone"
  • Run ng g @angular/core:standalone and select "Remove unnecessary NgModule classes"
  • Run ng g @angular/core:standalone and select "Bootstrap the project using standalone APIs"

Rather don't use latest or next as version value, because you can end up in versions mismatch later during npm i or npm ci. But If you really want to rely on the VERY latest aka nightly builds version then use next:

• npm install @angular/cli@next --global
• ng add @angular/material@next (but it can fail, because Angular Material versioning is alwaysing behind Angular)
• ng add @angular-eslint/schematics@next (same situation with versioning)