javascript - Angular - 无法读取未定义的属性“标识符”

Question

我正在关注 ngUpgrade 文档（https://angular.io/guide/upgrade）

通常情况下，角度文档似乎已经过时和/或不是那么好。

我一直在引导应用程序，除此之外，我还必须更新 package.json 并使用最新版本的 angular (10.0.11) 作为升级文档中的建议版本等建造。

我已经设法让应用程序构建和运行，但遇到以下错误：

我花了几天时间试图了解错误来自哪里，因为我似乎已经正确配置了所有内容（据我所知）。

任何帮助，将不胜感激。要遵循的配置文件

包.json

{
  "name": "angular-phonecat",
  "private": true,
  "version": "0.0.0",
  "description": "A tutorial application for AngularJS",
  "repository": "https://github.com/angular/angular-phonecat",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "^10.0.11",
    "@angular/compiler": "^10.0.11",
    "@angular/core": "^10.0.11",
    "@angular/platform-browser": "~10.0.9",
    "@angular/platform-browser-dynamic": "~10.0.9",
    "@angular/upgrade": "^10.0.11",
    "angular": "1.8.x",
    "angular-animate": "1.8.x",
    "angular-resource": "1.8.x",
    "angular-route": "1.8.x",
    "bootstrap": "3.3.x",
    "jquery": "3.3.x",
    "rxjs": "~6.5.5",
    "systemjs": "^6.5.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@types/angular": "^1.7.2",
    "@types/angular-animate": "^1.5.10",
    "@types/angular-aria": "^1.7.1",
    "@types/angular-cookies": "^1.8.0",
    "@types/angular-mocks": "^1.7.0",
    "@types/angular-resource": "^1.5.15",
    "@types/angular-route": "^1.7.1",
    "@types/angular-sanitize": "^1.7.0",
    "@types/jasmine": "^3.5.12",
    "angular-mocks": "1.8.x",
    "cpx": "^1.5.0",
    "http-server": "^0.11.1",
    "jasmine-core": "^3.5.0",
    "karma": "^3.1.4",
    "karma-chrome-launcher": "^2.2.0",
    "karma-firefox-launcher": "^1.3.0",
    "karma-jasmine": "^1.1.2",
    "protractor": "^5.4.4",
    "tslib": "^2.0.1",
    "typescript": "^4.0.2"
  },
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "postinstall": "npm run copy-libs",
    "update-deps": "npm update",
    "postupdate-deps": "npm run copy-libs",
    "copy-libs": "cpx \"node_modules/{angular,angular-*,bootstrap/dist,jquery/dist}/**/*\" app/lib -C",
    "prestart": "npm install",
    "start-old": "http-server ./app -a localhost -p 8000 -c-1",
    "start": "http-server ./ -a localhost -p 8000 -c-1",
    "pretest": "npm install",
    "test": "karma start karma.conf.js",
    "test-single-run": "npm test -- --single-run",
    "preupdate-webdriver": "npm install",
    "update-webdriver": "webdriver-manager update",
    "preprotractor": "npm run update-webdriver",
    "protractor": "protractor e2e-tests/protractor.conf.js"
  }
}

tsconfig.json

{
    "references": [],
    "compileOnSave": false,
    "compilerOptions": {
        "outDir": "./dist",
        "baseUrl": "./",
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "importHelpers": true,
        "target": "es2015",
        "module": "system",
        "lib": [
        "es2018",
        "dom"
        ]
    }
}

systemjs-importmap

{
        "imports": {
          "ng-loader": "../src/systemjs-angular-loader.js",
          "@angular/core": "/node_modules/@angular/core/bundles/core.umd.js",
          "@angular/common": "/node_modules/@angular/common/bundles/common.umd.js",
          "@angular/compiler": "/node_modules/@angular/compiler/bundles/compiler.umd.js",
          "@angular/platform-browser": "/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js",
          "@angular/platform-browser-dynamic": "/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js",
          "@angular/http": "/node_modules/@angular/http/bundles/http.umd.js",
          "@angular/router": "/node_modules/@angular/router/bundles/router.umd.js",
          "@angular/forms": "/node_modules/@angular/forms/bundles/forms.umd.js",
          "@angular/upgrade/static": "/node_modules/@angular/upgrade/bundles/upgrade-static.umd.js",
          "rxjs":                      "/node_modules/rxjs",
          "angular-in-memory-web-api": "/node_modules/angular-in-memory-web-api/bundles/in-memory-web-api.umd.js"
        }
      }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module.js';

platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';

@NgModule({
    imports: [
        BrowserModule,
        UpgradeModule
    ],
})
export class AppModule {

    constructor(private upgrade : UpgradeModule){

    }

    ngDoBootstrap(){
        this.upgrade.bootstrap(document.documentElement, ['PhonecatApp'])
    }
}

标签： javascriptangulartypescriptng-upgrade