未處理的承諾拒絕：無法找到主要插座來加載組件Angular2

我想實現使用angular2-seed項目作爲基礎和引用angular2-login-seed的登錄功能。但我得到以下錯誤。我看了一遍其他問題，詢問有關同樣的錯誤，但無法弄清楚我的代碼有什麼問題。請幫忙。未處理的承諾拒絕：無法找到主要插座來加載組件Angular2

Unhandled Promise rejection: Cannot find primary outlet to load 'HomeComponent' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot find primary outlet to load 'HomeComponent'

我的應用程序組件代碼：

@Component({ 
    moduleId: module.id, 
    selector: 'sd-app', 
    viewProviders: [NameListService, HTTP_PROVIDERS], 
    templateUrl: 'app.component.html', 
    directives: [ROUTER_DIRECTIVES, NavbarComponent, ToolbarComponent] 
}) 
export class AppComponent { 
    constructor() { 
    console.log('Environment config', Config); 
    } 
}

app.component.html代碼：

<sd-navbar><router-outlet></router-outlet></sd-navbar>

應用路由配置：

const routes: RouterConfig = [ 
    { 
    path: 'login', 
    component: LoginComponent, 
    canActivate: [UnauthenticatedGuard] 
    }, 
    ...HomeRoutes, 
]; 

export const APP_ROUTER_PROVIDERS = [ 
    provideRouter(routes),UnauthenticatedGuard, HomeComponentGuard 
];

HomeRoutes代碼：

export const HomeRoutes = [ 
{ 
    path: '', 
    component: HomeComponent, 
    canActivate: [HomeComponentGuard], 
    children: [ 
    { path: '', component: HomeComponent }, 
    { path: 'home', component: HomeComponent }, 
    { path: 'about', component: AboutComponent } 
    ] 
}, 
];

Home.Component代碼：

import { Component } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 
import { NameListService } from '../shared/index'; 

@Component({ 
    moduleId: module.id, 
    selector: 'wrapper', 
    templateUrl: 'home.component.html', 
    styleUrls: ['home.component.css'], 
    directives: [ROUTER_DIRECTIVES] 
}) 
export class HomeComponent { 
    newName: string; 
    constructor(public nameListService: NameListService) { 
     console.log("nameList: " + JSON.stringify(nameListService.get())); 
    } 

    addName(): boolean { 
    this.nameListService.add(this.newName); 
    this.newName = ''; 
    return false; 
    } 

}

來源

2016-07-07 chamalabey

您可以嘗試添加像'{path：''，component：HomeComponent，pathMatch：'full'}，'0123'的路徑匹配：'full''， –

已嘗試使用完整路徑匹配，仍會引發相同的錯誤。 – chamalabey

Plunker https://angular.io/resources/live-examples/quickstart/ts/plnkr.html將有助於診斷。 –

雖然這不是想象中的那麼您預期的答案，我們都有（Cannot find primary outlet to load 'LocalizationListComponent'）的問題是，這是故意行爲。

父母必須有<router-outlet></router-outlet>。以下是對github https://github.com/angular/angular/issues/10686的回覆。

我花了整整兩天的時間試圖找出這件事。我想刪除children或loadChildren和處理同級別的一切是一種方法。

這是路由器的一個非常混亂和未公開的功能。

來源

2016-08-14 18:27:29

加載你的模板不會對組件裝飾用

templateUrl: 'app.html'

。相反，導入模板，並引用它如下

import template from './app.html'; 

@Component({ 
    selector: 'app', 
    template 
})

來源

2016-07-29 09:46:00 0x008

未處理的承諾拒絕：無法找到主要插座來加載組件Angular2

回答

相關問題