无法读取未定义的属性“注释”答案

【问题标题】：Cannot read property 'annotations' of undefined无法读取未定义的属性“注释”
【发布时间】：2016-10-05 21:15:54
【问题描述】：

我在我的 AppComponent 中使用 angular2 RC.1 我有两条路由，一条用于登录（默认），第二条用于主页（我的页面有 routerLink）

@Component({
    selector: 'my-app',
    templateUrl: '../app/appComponent.html',
    providers: [ROUTER_PROVIDERS],
    directives: [ROUTER_DIRECTIVES, Toasty, SlimLoadingBar]

})
@Routes([
    {path: '/', component: loginComponent}
     ,{path: '/home', component: homeComponent}
])

当登录正确时，我从 loginComponent.ts 导航到主页

this._router.navigate(['/home']);

在加载项目时出现此错误

: TypeError: Cannot read property 'annotations' of undefined
    platform-browser.umd.js:962EXCEPTION: TypeError: Cannot read property 'annotations' of undefinedBrowserDomAdapter.logError @ platform-browser.umd.js:962BrowserDomAdapter.logGroup @ platform-browser.umd.js:972ExceptionHandler.call @ core.umd.js:3696(anonymous function) @ core.umd.js:8987ZoneDelegate.invoke @ zone.js:323NgZoneImpl.inner.inner.fork.onInvoke @ core.umd.js:6075ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ core.umd.js:6106NgZone.run @ core.umd.js:6330ApplicationRef_.run @ core.umd.js:8976coreLoadAndBootstrap @ core.umd.js:8786bootstrap @ platform-browser-dynamic.umd.js:469(anonymous function) @ sectionsTemplate.component.ts:17(anonymous function) @ sectionsTemplate.component.ts:209(anonymous function) @ sectionsTemplate.component.ts:209__exec @ system.src.js:1510entry.execute @ system.src.js:3926linkDynamicModule @ system.src.js:3252getModule @ system.src.js:3220(anonymous function) @ system.src.js:3256require @ system.src.js:3893(anonymous function) @ home.component.ts:17(anonymous function) @ home.component.ts:49(anonymous function) @ home.component.ts:49__exec @ system.src.js:1510entry.execute @ system.src.js:3926linkDynamicModule @ system.src.js:3252getModule @ system.src.js:3220(anonymous function) @ system.src.js:3256require @ system.src.js:3893(anonymous function) @ app.component.ts:9(anonymous function) @ app.component.ts:36(anonymous function) @ app.component.ts:36__exec @ system.src.js:1510entry.execute @ system.src.js:3926linkDynamicModule @ system.src.js:3252getModule @ system.src.js:3220(anonymous function) @ system.src.js:3256require @ system.src.js:3893(anonymous function) @ main.ts:2(anonymous function) @ main.ts:15(anonymous function) @ main.ts:15__exec @ system.src.js:1510entry.execute @ system.src.js:3926linkDynamicModule @ system.src.js:3252link @ system.src.js:3095execute @ system.src.js:3432doDynamicExecute @ system.src.js:798link @ system.src.js:1000doLink @ system.src.js:652updateLinkSetOnLoad @ system.src.js:700(anonymous function) @ system.src.js:512ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
    platform-browser.umd.js:962STACKTRACE:BrowserDomAdapter.logError @ platform-browser.umd.js:962ExceptionHandler.call @ core.umd.js:3698(anonymous function) @ core.umd.js:8987ZoneDelegate.invoke @ zone.js:323NgZoneImpl.inner.inner.fork.onInvoke @ core.umd.js:6075ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ core.umd.js:6106NgZone.run @ core.umd.js:6330ApplicationRef_.run @ core.umd.js:8976coreLoadAndBootstrap @ core.umd.js:8786bootstrap @ platform-browser-dynamic.umd.js:469(anonymous function) @ sectionsTemplate.component.ts:17(anonymous function) @ sectionsTemplate.component.ts:209(anonymous function) @ sectionsTemplate.component.ts:209__exec @ system.src.js:1510entry.execute @ system.src.js:3926linkDynamicModule @ system.src.js:3252getModule @ system.src.js:3220(anonymous function) @ system.src.js:3256require @ system.src.js:3893(anonymous function) @ home.component.ts:17(anonymous function) @ home.component.ts:49(anonymous function) @ home.component.ts:49__exec @ system.src.js:1510entry.execute @ system.src.js:3926linkDynamicModule @ system.src.js:3252getModule @ system.src.js:3220(anonymous function) @ system.src.js:3256require @ system.src.js:3893(anonymous function) @ app.component.ts:9(anonymous function) @ app.component.ts:36(anonymous function) @ app.component.ts:36__exec @ system.src.js:1510entry.execute @ system.src.js:3926linkDynamicModule @ system.src.js:3252getModule @ system.src.js:3220(anonymous function) @ system.src.js:3256require @ system.src.js:3893(anonymous function) @ main.ts:2(anonymous function) @ main.ts:15(anonymous function) @ main.ts:15__exec @ system.src.js:1510entry.execute @ system.src.js:3926linkDynamicModule @ system.src.js:3252link @ system.src.js:3095execute @ system.src.js:3432doDynamicExecute @ system.src.js:798link @ system.src.js:1000doLink @ system.src.js:652updateLinkSetOnLoad @ system.src.js:700(anonymous function) @ system.src.js:512ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
    platform-browser.umd.js:962TypeError: Cannot read property 'annotations' of undefined
        at ReflectionCapabilities.annotations (core.umd.js:4124)
        at Reflector.annotations (core.umd.js:3956)
        at DirectiveResolver.resolve (compiler.umd.js:10564)
        at CompileMetadataResolver.getDirectiveMetadata (compiler.umd.js:10875)
        at RuntimeCompiler.resolveComponent (compiler.umd.js:12977)
        at eval (core.umd.js:8789)
        at eval (core.umd.js:8978)
        at ZoneDelegate.invoke (zone.js:323)
        at Object.NgZoneImpl.inner.inner.fork.onInvoke (core.umd.js:6075)
        at ZoneDelegate.invoke (zone.js:322)BrowserDomAdapter.logError @ platform-browser.umd.js:962ExceptionHandler.call @ core.umd.js:3699(anonymous function) @ core.umd.js:8987ZoneDelegate.invoke @ zone.js:323NgZoneImpl.inner.inner.fork.onInvoke @ core.umd.js:6075ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ core.umd.js:6106NgZone.run @ core.umd.js:6330ApplicationRef_.run @ core.umd.js:8976coreLoadAndBootstrap @ core.umd.js:8786bootstrap @ platform-browser-dynamic.umd.js:469(anonymous function) @ sectionsTemplate.component.ts:17(anonymous function) @ sectionsTemplate.component.ts:209(anonymous function) @ sectionsTemplate.component.ts:209__exec @ system.src.js:1510entry.execute @ system.src.js:3926linkDynamicModule @ system.src.js:3252getModule @ system.src.js:3220(anonymous function) @ system.src.js:3256require @ system.src.js:3893(anonymous function) @ home.component.ts:17(anonymous function) @ home.component.ts:49(anonymous function) @ home.component.ts:49__exec @ system.src.js:1510entry.execute @ system.src.js:3926linkDynamicModule @ system.src.js:3252getModule @ system.src.js:3220(anonymous function) @ system.src.js:3256require @ system.src.js:3893(anonymous function) @ app.component.ts:9(anonymous function) @ app.component.ts:36(anonymous function) @ app.component.ts:36__exec @ system.src.js:1510entry.execute @ system.src.js:3926linkDynamicModule @ system.src.js:3252getModule @ system.src.js:3220(anonymous function) @ system.src.js:3256require @ system.src.js:3893(anonymous function) @ main.ts:2(anonymous function) @ main.ts:15(anonymous function) @ main.ts:15__exec @ system.src.js:1510entry.execute @ system.src.js:3926linkDynamicModule @ system.src.js:3252link @ system.src.js:3095execute @ system.src.js:3432doDynamicExecute @ system.src.js:798link @ system.src.js:1000doLink @ system.src.js:652updateLinkSetOnLoad @ system.src.js:700(anonymous function) @ system.src.js:512ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
    (index):18 Error: TypeError: Cannot read property 'annotations' of undefined(…)

当我在评论中添加 homeCoponent 时，我得到了我的观点，我得到了错误：Cannot find default outlet 但我得到了我的登录视图

//{path: '/home', component: homeComponent}

+ 在 homeComponent 我有

@Routes([
    {path: '/op1', component: ComponentOne},
    {path: '/op2', component: addUserComponentTwo}
    )]

我在 homeCompnent 和 appComponet 中都添加了<router-outlet></router-outlet>

【问题讨论】：

我不知道我更新的答案中的部分是否已经解决了你的问题，但你还是应该解决这个问题。
你的AppComponent的模板怎么样？
`
我的第一个 Angular 2 应用程序
如果您删除<router-outlet> 和@Routes()，是否会显示AppComponent？
是的，它显示正确

标签： routes angular

【解决方案1】：

更新

更改路线的顺序，以便更具体的路线先出现：

@Routes([
    {path: '/home', component: homeComponent}
    {path: '/', component: loginComponent},
])

这是 RC.1 路由器中的一个已知问题，应予以修复。

原创

my-app 与 <body> 中的元素都不匹配

<body>
  <my-app></my-app>
</body>

或bootstrap(AppComponent) 中的组件不存在或未正确导入。

【讨论】：

尽管我收到了命令，但我总是会遇到一些错误，我想添加一些东西（我的 Typescript 文件是我从另一个项目中过去的，这可能会导致你说没有正确导入的错误）
据我所知，错误“无法读取未定义的属性'注释'”是由我在原始答案中写的内容引起的。

我的第一个 Angular 2 应用程序