# T-Mobile NG + Nx upgrade Tracking

## Notes for people upgrading their MRs

Be sure your node version is 12 or greater. Check with node -v in the command line. Node 12 or 14 are the most stable currently

Make sure you have a clean git history and then run

npx nx workspace-schematic ng10migrate

This should automatically migrate `TestBed.get(..)` to `TestBed.inject(..)` + adjust `jest.config.js` configurations. Make sure to first inspect the changes and see whether they make sense.

All Angular Material packages need to use deep imports. Example:

// old
import { MatDialogModule, MatDividerModule, MatFormFieldModule } from '@angular/material';

// new
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatFormFieldModule } from '@angular/material/form-field';

All Lazy-loaded modules in routes need to be written in the new dynamic import manner:

// old
const routes: Routes = [
  {
    path: 'lazy',
    loadChildren: './lazy/loaded.module#LazyModule',
  },
  { path: '', pathMatch: 'full', redirectTo: 'lazy' },
];

// new
const routes: Routes = [
  {
    path: 'lazy',
    loadChildren: () => import('./lazy/loaded.module').then(m => m.LazyLoadedModule)
  }
];
// or with async/await
const routes: Routes = [
  {
    path: 'lazy',
    loadChildren: async () => await import('./customers/customers.module').LazyLoadedModule
  }
];

Entry Components are no longer required to be declared in module definitions. It is now deprecated. If you see an error related to the max number of directives being reached, this is likely the cause.
- https://github.com/angular/angular/issues/31221
- https://angular.io/guide/deprecations#entrycomponents-and-analyze_for_entry_components-no-longer-required

Stricter Type-checks in TypeScript

// If objects are assigned without properties declared in their type typescript will throw error.
const obj: MyType = AnObjectWithDifferentInterface; // throws error

// Must cast as correct type
const obj: MyType = AnObjectWithDifferentInterface as MyType;
// or
const obj: MyType = <MyType>AnObjWithDifferentInterface;

Angular is using more generics and type variables

// You will see more type variables needed for certain classes/functions such as ModuleWithProviders
ModuleWithProviders {} /* becomes */ ModuleWithProviders<ModuleType> {}

Jest Updates Have Made Some Classes and/or methods obsolete. See documentation for Jest if something is missing or no longer the same: https://jestjs.io/docs/en/getting-started

---

## Todo after merge in master

- [ ] follow up MR to adjust the nx boundary rules. The rule is in the `tslint-temporary-disabled-boundary-rule.json`

- [ ] MR for Jack Hsu's performance optimization changes on the compile time

## Todo

## In Progress

### Juri

- [ ] Update to Nx `10.3.0`. Needs a fix on swagger files that cannot be found: MR:
- [ ] 10.2.1 https://gitlab.com/tmobile/digital/tos/tos-apps/-/merge_requests/3044
- [ ] 10.3.0-beta.1 https://gitlab.com/tmobile/digital/tos/tos-apps/-/merge_requests/3111
- [ ] fix `test:aem` pipeline issue
- [ ] seems like the step fails continously in the child pipeline, but works in the parent pipeline

### Thomas

- [ ] Fix for the bazel codegeneration => https://t-mo.slack.com/archives/CPX33J2SW/p1601332676019100

- [x] Fix Unav header/footer in legacy apps (Venkat is looking into it)

## Fixed

- [x] Optimize the Pipeline by filtering for "buildable" libs only: https://t-mo.slack.com/archives/CPX33J2SW/p1601407555039900
- [x] Update to latest Nx Cloud
- [x] Fix the GitLab CI Pipeline to calculate the affected dependencies dynamically (rather than statically which is not scalable & doesn't work in the upgrade branch) =>
- dynamic GitLab pipeline implementation: https://gitlab.com/tmobile/digital/tos/tos-apps/-/merge_requests/2291
Has issues in that the child pipelines are not reliable
- Distributed pipeline implementation: https://gitlab.com/tmobile/digital/tos/tos-apps/-/merge_requests/2972
This is a test PR to see how the setup performs. The original MR [is here](https://gitlab.com/tmobile/digital/tos/tos-apps/-/merge_requests/2298)
- [x] Adjust wrong `jest.config.js` files due to incomplete migration
- migration script ready => needs to be launched
- [x] Fix linting issues
- working on migration script
- [x] StoreRouter config switched the router serializer to minimal and updated ngrx to 10. Router Outlet errors when navigating to lazy load modules. To recreate, run 'npm start shop.dev'. When the application loads, click one of the phone products. You should see two errors, the first being a router oulet not activated error. The second is this: 'Cannot assign to read only property 'tView' of object '[object Object]'.
- https://github.com/ngrx/platform/issues/2109 for reference
- Default router switched to minimal when launching shop & navigating to a phone detail page:
`logger.ts:36 Error: Uncaught (in promise): TypeError: Cannot add property __NG_ELEMENT_ID__, object is not extensible
TypeError: Cannot add property __NG_ELEMENT_ID__, object is not extensible
at bloomAdd (di.ts:112)
at diPublicInInjector (di.ts:237)
at createRootComponentView (component.ts:199)
at ComponentFactory$1.create (component_ref.ts:177)
at ViewContainerRef.createComponent (view_engine_compatibility.ts:236)
at RouterOutlet.activateWith (router_outlet.ts:163)
at ActivateRoutes.activateRoutes (activate_routes.ts:187)
at activate_routes.ts:133
at Array.forEach (<anonymous>)
at ActivateRoutes.activateChildRoutes (activate_routes.ts:132)
at resolvePromise (zone.js:832)
at resolvePromise (zone.js:784)
at zone.js:894
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (ng_zone.ts:311)
at ZoneDelegate.invokeTask (zone.js:420)
at Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:601)
at ZoneTask.invokeTask [as invoke] (zone.js:507)
at invokeTask (zone.js:1671)`

- [x] SSR tasks (to verify)
- [x] Verify removal `@nguniversal/module-map-ngfactory-loader` since it is obsolete
- [x] Verify removal of `provideModuleMap(main.LAZY_MODULE_MAP)`; should not be needed any more ([source](https://github.com/angular/universal/issues/1504#issuecomment-585749947))
- [x] Fix SSR 503 Error - `{
statusCode: 503,
error: "Service Unavailable",
message: "inject() must be called from an injection context"
}`
- Problem seems to be related to how the injection context is being created. The actual server is compiled independently from where the `ngHapiEngine` is being used. Probably need to find a way to provide `renderModule, renderModuleFactory` into it :thinking_face:
- [x] Fix SSR 503 Error - `{"statusCode":503,"error":"Service Unavailable","message":"You must pass in a NgModule or NgModuleFactory to be bootstrapped"}` => Need to use the `AppServerModule` rather than `AppServerModuleNgFactory`
- [x] Fix `nx run-many --target=ssr --projects=flex-client --configuration=production`
- [x] Fix `nx run dam-odf-feature:test`
- [x] Fix `nx run dam-odf-ui:test`
- [x] Fix destructured material modules in line selector module
- [x] Fix path references to assets/fonts in tmo-styles
- [x] Adjusted wrong merges on tsconfig.json files