錯誤：無法找到主要插座加載'ProfileDetailsComponent'

我想在我的應用程序中使用路由，使用路由器版本3.0.0-beta.1，應用程序正在運行，但當我點擊主題中的'下一步'按鈕.component.html我期待得到'profileDetails.component.html'的內容。我創建了一個plunkr例如。這裏：http://plnkr.co/edit/jR3jnC6CzmRVCoVFrn1W?p=preview雖然由於我使用的角度2材料按鈕等，但它不能在plunkr上工作，但我可以告訴我哪裏會出錯？這裏是我的main.ts：錯誤：無法找到主要插座加載'ProfileDetailsComponent'

import {bootstrap} from '@angular/platform-browser-dynamic'; 
import {enableProdMode} from '@angular/core'; 
import {AppComponent} from './app/app.component'; 
import {HTTP_PROVIDERS} from '@angular/http'; 
import { appRouterProviders } from './app/app.routes'; 

//import {disableDeprecatedForms, provideForms} from '@angular/forms'; 

bootstrap(AppComponent, [ 
    // disableDeprecatedForms(), 
    // provideForms(), 
    HTTP_PROVIDERS, 
    appRouterProviders 
]);

這裏的app.routes.ts：

import { provideRouter, RouterConfig } from '@angular/router'; 
import {SubjectsComponent} from './subjects.component'; 
import {ProfileDetailsComponent} from './profileDetails.component'; 
import {AgreementComponent} from './agreement.component'; 

export const routes: RouterConfig = [ 
    { path: 'card', component: BasicCardComponent }, 
    { path: 'subjects', component: SubjectsComponent }, 
    { path: 'profile', component: ProfileDetailsComponent }, 
    { path: 'agreement', component: AgreementComponent } 
]; 

export const appRouterProviders = [ 
    provideRouter(routes) 
];

這裏是我的app.component.ts：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <a [routerLink]="['/card']"></a> 
    <router-outlet></router-outlet> 
    ` , 
// templateUrl: 'app/app.component.html', 
    styleUrls: ['app/app.component.css'], 
    directives: [BasicCardComponent, MdButton,MdCard,MdToolbar,MdIcon,MdInput,MD_INPUT_DIRECTIVES,MdCheckbox,ROUTER_DIRECTIVES], 
    providers:[MdIconRegistry] 
})

流量是有點像這個應用程序.component.ts-> basicCard.component.ts-> basicCard.component.html-> subjects.component.ts-> subjects.component.html-> profileDetails.component.ts-> profileDetails.component.html

來源

2016-07-16 Himanshi Gupta

[Angular2路由器錯誤：找不到主出口加載 '主頁'（http://stackoverflow.com/questions/37950413/angular2-router-error-cannot-find-primary -outlet-to-load-homepage/37951430＃37951430） –

[Angular2路由器錯誤的可能重複：無法找到主要插座加載'HomePage']（https://stackoverflow.com/questions/37950413/angular2-router-error -cannot-find-primary-outlet-load-homepage） – ishandutta2007

在您的app.component中，您缺少路由器插座指令。

@Component({ 
    selector: 'my-app', 

          // you can do somthing like this 
    template: `<card></card> 
      <router-outlet></router-outlet> `, 
    styles: .... 
    directives: [ROUTER_DIRECTIVES] 
}) 
export class AppComponent { 

}

plunker

來源

2016-07-16 09:30:28

但是我在basic.com.component.html中的app.component.ts＆中添加了模板：，我已經提供了plunkr鏈接問題... –

問題是有一個ngIf路由器插座。 –

@HimanshiGupta，你仍然需要在頂層組件提供一個路由器插座。這是Angular抱怨沒有找到的「主要渠道」。 – jessepinho

錯誤：無法找到主要插座加載'ProfileDetailsComponent'

回答

相關問題