“‘router outlet”不是已知元素Angular2_Angular 'router-outlet‘不是已知元素’_Router-outlet不是已知元素，延迟加载 - 腾讯云开发者社区

“‘router outlet”不是已知元素Angular2

router-outlet 是 Angular 路由系统中的一个重要组件，它用于在单页面应用（SPA）中显示当前激活的路由组件。如果你在 Angular 2 中遇到 'router-outlet' is not a known element 的错误，这通常意味着 Angular 的路由器模块没有被正确导入到你的应用模块中。

基础概念

在 Angular 中，路由器负责导航和展示与 URL 对应的组件。router-outlet 是一个指令，它告诉 Angular 在哪里渲染匹配的组件。

类型

根路由器出口：通常在应用的主组件模板中使用。
嵌套路由器出口：在父路由组件的模板中用于显示子路由组件。

应用场景

任何需要根据 URL 导航到不同视图的应用都可以使用 Angular 路由器。

问题原因及解决方法

如果你遇到 'router-outlet' is not a known element 错误，可能是因为以下原因：

未导入 RouterModule：确保在你的应用模块（通常是 app.module.ts）中导入了 RouterModule。

import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  // 定义你的路由
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppModule { }

未导入 RouterOutlet 指令：虽然通常不需要单独导入 RouterOutlet，但如果你的模块结构复杂，可能需要确保它被包含在 @NgModule 的 declarations 或 imports 中。
模块导入顺序错误：确保 RouterModule 在其他依赖它的模块之前被导入。
AOT 编译问题：如果你在使用 AOT（Ahead-of-Time）编译，可能需要检查是否有任何类型错误或其他编译问题。

示例代码

以下是一个简单的 Angular 2 应用，展示了如何设置路由和使用 router-outlet：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.html
<router-outlet></router-outlet>

// home.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: `<h2>Home</h2>`
})
export class HomeComponent {}

// about.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  template: `<h2>About</h2>`
})
export class AboutComponent {}

确保你的 Angular 应用遵循上述步骤，这样 router-outlet 应该能够正常工作。如果问题仍然存在，请检查控制台输出的错误信息，它可能会提供更多关于问题的线索。

参考链接：