platform-browser.umd.js:937 例外：错误：未捕获（承诺中）：错误：找不到要加载的主要出口“*”答案

【问题标题】：platform-browser.umd.js:937 EXCEPTION: Error: Uncaught (in promise): Error: Cannot find primary outlet to load '*'platform-browser.umd.js:937 例外：错误：未捕获（承诺中）：错误：找不到要加载的主要出口“*”
【发布时间】：2016-08-20 15:11:41
【问题描述】：

我正在尝试angular2，但我遇到了错误platform-browser.umd.js:937 EXCEPTION: Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'ArticlesListComponent

当我搜索时，我看到很多答案要添加directives: [ROUTER_DIRECTIVES]。但即使在那之后我也遇到了同样的错误。这些是我的文件

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: 'app/views/main.html',
  directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }

app.articles.ts

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

@Component({
  selector: 'articles-list',
  templateUrl: 'app/views/articlelist.html',
  directives: [ROUTER_DIRECTIVES]
})
export class ArticlesListComponent {

}

app.routing.ts

import { Routes, RouterModule } from '@angular/router';
import { ArticlesListComponent } from './app.articles';

const appRoutes: Routes = [
  {
    path: 'articles',
    component: ArticlesListComponent,
    data: {
      title: 'Articles List'
    }
  }
];

export const appRoutingProviders: any[] = [

];

export const routing = RouterModule.forRoot(appRoutes);

【问题讨论】：

标签： angular angular2-directives

【解决方案1】：

首先检查您是否在 index.html 中定义了基本 href。如果不添加，请添加 head 标签的开头。

<base href="/">

假设您使用的是最新的 Angular 2 (RC5)，那么如果您相应地定义了 app.module，则您不需要包含 ROUTER_DIRECTIVES 也不需要将 Router 导入到您的组件中。模块基本上是一种帮助您引导应用程序并以系统方式组织声明和提供程序的方法。这里我展示了一个模块的例子：

import { NgModule }      from
'@angular/core';
import { BrowserModule } from. 
'@angular/platform-browser';
import { AppComponent }  from './ app.component';
//import routing path
//import ArticlesListComponent

@NgModule({
imports: [ BrowserModule, RouterModule] //,routing],
declarations: [ AppComponent,  ArticlesListComponent,
bootstrap:    [ AppComponent ]
})
export class AppModule { }

尝试阅读 angular2: 模块指南。此外，我建议您遵循目录结构和文件命名的良好做法。您可能会发现这也很有用Angular RC5 Modules。

【讨论】：