Ошибки шаблона после миграции Angular 6 -> 9

Question

Я только что выполнил переход с Angular 6 на Angular 9, одна из наиболее важных зависимостей не может быть использована на Angular 6.

Я следую инструкциям с ng update:

• ng update
• ng update rxjs
• ng update @angular/cli
• ng update @angular/core

Проблема в том, что у меня сейчас много шаблонных ошибок, все относятся к одним и тем же проблемам.

• No directive found with exportAs 'ngModel'
• No directive found with exportAs 'ngForm'

Я нашел ничто в Интернете не относится к этой ошибке в v9 (только в v2).

Вот некоторые части, связанные с ошибкой:

• Для ошибки о ngModel

<input type="text" class="form-control style-input-size" name="UserUpdatedUsername" [(ngModel)]="UserUpdated.username" #myKronozUserUpdatedUsername="ngModel" mdbActive required>

• При ошибке около ngForm

<form #editUserForm="ngForm" (ngSubmit)="editUserForm.valid && saveUpdateUser()" novalidate class="style-form-edit-user">

FormsModule хорошо импортирован в app.module.ts (это единственный модуль внутри приложения) , app.module.ts:

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [FormsModule]
})
export class AppModule {
}

package. json:

  "dependencies": {
    "@agm/core": "^1.1.0",
    "@angular/animations": "^9.0.5",
    "@angular/common": "^9.0.5",
    "@angular/core": "^9.0.5",
    "@angular/forms": "^9.0.5",
    "@angular/platform-browser": "^9.0.5",
    "@angular/platform-browser-dynamic": "^9.0.5",
    "@angular/platform-server": "^9.0.5",
    "@angular/router": "^9.0.5",
    "@ngx-translate/core": "^10.0.2",
    "@ngx-translate/http-loader": "^3.0.1",
    "angular-csv-files": "^1.0.0",
    "chart.js": "2.5.x",
    "classlist.js": "1.1.x",
    "core-js": "2.4.x",
    "crypto-js": "^3.1.9-1",
    "easy-pie-chart": "2.1.x",
    "font-awesome": "4.7.x",
    "hammerjs": "2.0.x",
    "jarallax": "^1.10.3",
    "moment-timezone": "^0.5.21",
    "ng-html-util": "1.0.x",
    "ng-recaptcha": "^4.3.0",
    "ng-uikit-pro-standard": "/!\ sensible value /!\",
    "ng2-file-upload": "^1.3.0",
    "ngx-facebook": "^2.4.0",
    "ngx-pagination": "^3.2.1",
    "node-sass": "^4.13.1",
    "rxjs": "^6.5.4",
    "rxjs-compat": "^6.3.3",
    "screenfull": "3.3.x",
    "smoothscroll-polyfill": "0.3.x",
    "tslib": "^1.10.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular/cli": "^9.0.5",
    "@angular/compiler-cli": "^9.0.5",
    "@angular/language-service": "^9.0.5",
    "@angular/compiler": "^9.0.5",
    "@types/jasmine": "2.5.38",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~3.7.5",
    "webpack": "^4.3.0",
    "@angular-devkit/build-angular": "~0.900.5"
  }

Я что-то пропустил для миграции? Спасибо.

Answer 1

Вы получаете ошибки, потому что переменные только шаблона были удалены в Angular 9. Это было сделано, потому что они были напечатаны как any и допускали мутации. В общем, это был анти-паттерн. В дальнейшем ваши элементы будут строго набраны.

В Angular версиях <= 8 приведенный ниже код действителен. <code>#TranslateBtn вы можете ссылаться на свойство translate, поскольку оно было набрано как any.

<button
  #translateBtn
  (click)="translateBtn.translate = !translateBtn.translate"
>
  Translate
</button>

В Angular 9 #translateBtn будет иметь тип HTMLButtonElement, который не имеет translate свойство. Вместо этого вы бы заменили эту функцию на событие, вызывающее функцию вашего компонента.

HTML:

<button (click)="ontTranslate()">
  Translate
</button>

TS:

export class PeopleListComponent {
  translateToWookiee = false;

  onTranslate(): void {
    this.translateToWookiee = !this.translateToWookiee;
  }
}

Мой ответ пришел из этого блога статья от Брайана Лав, эксперта Google Developer по Angular и веб-технологиям.

Answer 2

Предложить следовать официальному руководству: https://update.angular.io/.

Предложить сначала обновить до версии 8. Затем до версии 9.

Следуя этой схеме, следует автоматически обрабатывать все несовместимости с помощью Angular инструментов для создания схем.