Upgrade from angular 8 to Angular 9 - errors

Question

I follow official documentation for updating angular app, and after I update everything, when I run ng serve i get followings errors

ERROR in app/src/app/users/add/add.component.html:14:48 - error NG2345: Argument of type 'AbstractControl' is not assignable to parameter of type 'FormControl'.
  Type 'AbstractControl' is missing the following properties from type 'FormControl': registerOnChange, registerOnDisabledChange, _applyFormState

  <ng-container *ngFor="let error of errors(addNewUserForm.get('username'))">



   Error occurs in the template of component UserProfileComponent.
app/src/app/registration/dialog/dialog.component.html:1:1 - error NG8001: 'mat-horizontal-stepper' is not a known element:
1. If 'mat-horizontal-stepper' is an Angular component, then verify that it is part of this module.
2. If 'mat-horizontal-stepper' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

  <mat-horizontal-stepper linear #stepperRegistration>

same errors for mat-dialog-actions, mat-step, mat-dialog-content etc

and...

Error occurs in the template of component DialogComponent.
app/src/app/registration/dialog/dialog.component.html:46:13 - error NG8002: Can't bind to 'errorStateMatcher' since it isn't a known property of 'input'.

[errorStateMatcher]="matcher"

here is my package.json

"dependencies": {
    "@angular/animations": "^9.0.0-rc.10",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "^9.0.0-rc.10",
    "@angular/compiler": "^9.0.0-rc.10",
    "@angular/core": "^9.0.0-rc.10",
    "@angular/flex-layout": "^8.0.0-beta.27",
    "@angular/forms": "^9.0.0-rc.10",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "^9.0.0-rc.10",
    "@angular/platform-browser-dynamic": "^9.0.0-rc.10",
    "@angular/router": "^9.0.0-rc.10",
    "@angular/service-worker": "^9.0.0-rc.10",
    "@ngrx/effects": "^8.6.0",
    "@ngrx/schematics": "^8.6.0",
    "@ngrx/store": "^8.6.0",
    "@ngrx/store-devtools": "^8.6.0",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.4.1",
    "keycloak-angular": "^7.1.0",
    "keycloak-js": "^6.0.1",
    "popper.js": "^1.16.0",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.0-rc.10",
    "@angular-devkit/schematics": "^8.3.23",
    "@angular/cli": "^9.0.0-rc.10",
    "@angular/compiler-cli": "^9.0.0-rc.10",
    "@angular/language-service": "^9.0.0-rc.10",
    "@compodoc/compodoc": "^1.1.11",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.5.1",
    "protractor": "~5.4.0",
    "rxjs-tslint-rules": "^4.28.0",
    "ts-node": "~7.0.0",
    "tslint": "^5.20.1",
    "tslint-angular": "^3.0.2",
    "tslint-sonarts": "^1.9.0",
    "typescript": "~3.7.5",
    "webpack-bundle-analyzer": "^3.6.0"
  }

Answer 1

I could solve similar errors by updating the routes of lazy loaded modules from

loadChildren: './some/route/some-route.module#SomeRouteModule',

to

loadChildren: () => import('./some/route.module').then(m => m.SomeRouteModule),