platform-b​​rowser.umd.js：937 EXCEPTION：错误：未捕获（在承诺中）：错误：找不到要加载的主要插座＆＃39; *＆＃39;

Question

我正在尝试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);

Answer 1

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

<base href="/">

假设您使用的是最新的Angular 2（RC5），那么如果您相应地定义app.module，则不需要同时包含ROUTER_DIRECTIVES或导入路由器。模块基本上是一种帮助您以系统方式引导应用程序并组织声明，提供程序的方法。这里我展示一个模块的例子：

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。