Angular 2.1.0项目运行正常但控制台报找不到主路由出口错误

嘿，这个问题我之前也踩过坑，核心原因是你把根组件AppComponent当成了路由组件来配置，这就造成了逻辑冲突：Angular试图通过路由加载AppComponent，但此时AppComponent的模板还没渲染完成，自然找不到<router-outlet>来放置它，所以抛出了这个错误。

下面是具体的修复步骤，你可以照着一步步来：

1. 拆分组件职责 #

AppComponent应该作为你的应用根容器，它的核心作用是提供<router-outlet>来承载其他路由组件，而不是自己被路由加载。所以你需要新建一个专门的内容组件（比如HomeIndexComponent），把原来AppComponent里的业务逻辑和模板移过去。

比如新建home-index.component.ts：

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

@Component({
  moduleId: module.id,
  templateUrl: './demo/demo-list.html' // 直接复用你原来的demo-list.html模板
})
export class HomeIndexComponent {
  name = 'First Angular 2 Application';
}

2. 修正路由配置 #

更新app.routes.ts，把路由指向新创建的HomeIndexComponent，同时移除AppComponent的路由配置，再加一个默认路由重定向让应用打开就加载首页：

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeIndexComponent } from './home-index.component';
// import { AboutComponent } from './demo/about.component';

const appRoutes: Routes = [
  { 
    path: 'Home', 
    children: [
      { path: 'Index', component: HomeIndexComponent },
      // { path: 'About', component: AboutComponent }
    ] 
  },
  { path: '', redirectTo: '/Home/Index', pathMatch: 'full' }, // 默认跳转到首页
  { path: '**', component: HomeIndexComponent } // 匹配所有未定义路由，显示首页或404
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

3. 保留根组件的容器角色 #

你的app.component.ts和app.component.html可以保持不变，因为AppComponent现在是根容器，它的模板里的<router-outlet>会负责加载路由匹配到的HomeIndexComponent：

app.component.ts：

import { Component, OnInit, ViewContainerRef } from '@angular/core';
import './js/ng/rxjs-operators';

@Component({
  moduleId: module.id,
  selector: 'demo-tag',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private viewContainerRef: ViewContainerRef) {
    this.viewContainerRef = viewContainerRef;
  }
}

app.component.html：

<router-outlet></router-outlet>

4. 注册新组件到AppModule #

最后别忘了在AppModule里声明新创建的HomeIndexComponent，并确保导入了路由配置：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeIndexComponent } from './home-index.component';
import { routing } from './app.routes';

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

这样修改后，路由就能正常工作了：打开应用时会默认重定向到/Home/Index，Angular会把HomeIndexComponent加载到AppComponent的<router-outlet>里，不会再出现找不到outlet的错误。

内容的提问来源于stack exchange，提问作者Dhiren