错误：无法找到主要插座加载'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'

回答

相关问题