微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决角度-无法读取未定义的属性“标识符”

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

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

我一直在引导应用程序,直到我不得不更新package.json并使用最新版本的angular(10.0.11)作为建议版本,如升级文档中所述完全不构建。

我设法使应用程序能够构建并运行,但是遇到以下错误

我花了几天的时间来尝试了解错误的出处,因为我似乎已正确配置了所有内容(据我所知)。

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

package.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'])
    }
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。