Angular 2兒童路由（v3）'不能讀取'undefined'的屬性'註釋'

Question

我正在嘗試在Angular 2中玩弄並且得到一個測試應用程序運行，但我遇到了一些問題讓路由工作在最新版本的路由器（3.0.0 alpha-7）。

main.ts：

import {bootstrap} from '@angular/platform-browser-dynamic'; 
import {AppComponent} from './app.component'; 
import {APP_ROUTER_PROVIDERS} from './app.routes'; 

bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]); 

app.component.ts：

import {Component} from '@angular/core'; 
import {ROUTER_DIRECTIVES} from '@angular/router'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <router-outlet></router-outlet> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
}) 
export class AppComponent { } 

app.routes.ts：

import {provideRouter, RouterConfig} from '@angular/router'; 
import {SigninRoutes} from './signin/signin.routes'; 

export const AppRoutes: RouterConfig = [ 
    ...SigninRoutes 
] 

export const APP_ROUTER_PROVIDERS = [ 
    provideRouter(AppRoutes) 
]; 

signin.component.ts：

import {Component} from '@angular/core'; 
import {ROUTER_DIRECTIVES} from '@angular/router'; 

@Component({ 
    selector: 'signin', 
    template: ` 
     <a [routerLink]="['/signin']">Sign In</a> 
     <a [routerLink]="['/profile']">Profile</a> 
     <br><br>Sign In Test 
     <router-outlet></router-outlet> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
}) 

export class SigninComponent { 

} 

個

signin.routes.ts：

import {Component} from '@angular/core'; 
import {ROUTER_DIRECTIVES} from '@angular/router'; 

@Component({ 
    selector: 'signin', 
    template: ` 
     <a [routerLink]="['/signin']">Sign In</a> 
     <a [routerLink]="['/profile']">Profile</a> 
     <br><br>Sign In Test 
     <router-outlet></router-outlet> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
}) 

export class SigninComponent { 

} 

profile.component.ts：

import {Component} from '@angular/core'; 

@Component ({ 
    selector: 'profile', 
    template: ` 
     Profile Test 
    ` 

}) 

export class ProfileComponent { 

} 

出於某種原因，我可以啓動應用還好，但試圖單擊錯誤配置文件routerLink結果：

「EXCEPTION：錯誤：未捕獲的（在承諾）：類型錯誤：無法讀取的未定義的屬性‘註解’」

如果有人可以幫助我的Wi這是非常感謝的。

Answer 1

聽起來像：

• https://github.com/angular/angular/issues/9414

類似的問題：

• https://github.com/angular/angular/issues/9427
• https://github.com/AngularClass/webpack-toolkit/issues/1

檢查常見的錯誤：

• 確保你沒有/在你的路線path
• 確保每個途徑都有一個component，redirectTo，children
• 確保在路線中使用的元件正確地導入到定義路由的文件中

Answer 2

我有這個錯誤使用webpack並嘗試異步加載路由lik è這樣：

{ 
path: 'password', loadChildren:() => new Promise(resolve => { 
    (require as any).ensure([], require => { 
    resolve(require('./password/password.module').PasswordModule); 
    }); 
}) 
}, 

沒有錯，上面的代碼，但再看看模塊我以爲我是裝：

@NgModule({ 
imports: [ 
CommonModule, 
... 
], 
declarations: [ 
    ... 
], 
providers: [ 
... 
] 
}) 
export class LockedModule {} // wrong name !!!! 

通知模塊，LockedModule的名字，它應該是PasswordModule。我偶然發現了這一點，並花了我一段時間才發現。我並不是經常滾動底部並驗證導出名稱，調試窗口也沒有告訴我這是原因。