Angular 7：Angular 路由错误 **'router-outlet'** 不是已知元素：

Question

我尝试将所有导入包含到必要的文件中，但在编译时出现以下错误。我该如何解决？

我已经生成了四个不同的commonents Menu、home、contact 和about。此外还有Header 组件，稍后将帮助包含memu 栏以在不同组件之间切换。还有页脚组件。应用程序- routing.ts 和 routes.ts 文件也附在这个文件中，这有助于路由目的。

'router-outlet' 不是已知元素： 1.如果'router-outlet'是一个Angular组件，那么验证它是这个模块的一部分。 2. 如果“router-outlet”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到

'@NgModule.schemas' of this component to suppress this message. ("<app-header></app-header>
    [ERROR ->]<router-outlet></router-outlet>
    <app-footer></app-footer>"): ng:///AppModule/AppComponent.html@1:0
        at syntaxError (compiler.js:1021)
        at TemplateParser.push../node_modules/@angular/compiler/fesm5      /compiler.js.TemplateParser.parse (compiler.js:14830)
        at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:24018)
        at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:24005)
        at compiler.js:23948
        at Set.forEach (<anonymous>)
        at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23948)
        at compiler.js:23858
        at Object.then (compiler.js:1012)
        at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23857)


      

routes.ts 文件

 

 

      import { Routes } from '@angular/router';
        
        import { MenuComponent } from '../menu/menu.component';
        import { DishdetailComponent } from '../dishdetail/dishdetail.component';
        import { HomeComponent } from '../home/home.component';
        import { AboutComponent } from '../about/about.component';
        import { ContactComponent } from '../contact/contact.component';
        
        export const routes: Routes = [
          { path: 'home',  component: HomeComponent },
          { path: 'menu',     component: MenuComponent },
          { path: '', redirectTo: '/home', pathMatch: 'full' }
                      ];

app-routing.module.ts 文件

   

 
            import { NgModule } from '@angular/core';
            import { CommonModule } from '@angular/common';
            import { RouterModule, Routes } from '@angular/router';
            
            import { routes } from './routes';
            
            @NgModule({
              imports: [
                CommonModule,
                RouterModule.forRoot(routes)
              ],
              exports: [ RouterModule ],
              declarations: []
            })
            export class AppRoutingModule { }




 

app.module.ts 文件

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { MatToolbarModule } from '@angular/material/toolbar';
    import  {MatListModule} from '@angular/material/list';
    import  {MatGridListModule} from '@angular/material/grid-list';
    import  {MatCardModule} from "@angular/material/card";
    import  {MatButtonModule} from "@angular/material/Button";
    import { FlexLayoutModule }  from '@angular/flex-layout';

    import 'hammerjs';

    import { AppComponent } from './app.component';
    import { MenuComponent } from './menu/menu.component';
    import { FooterComponent} from './footer/footer.component';
    import { HeaderComponent} from './header/header.component';
    import { DishdetailComponent } from './dishdetail/dishdetail.component';
    import { HomeComponent } from  './home/home.component'
    import { AboutComponent } from './about/about.component';
    import { ContactComponent } from './contact/contact.component';

    import {DishService} from './services/dish.service';

    import {RouterModule} from '@angular/router';
    import { AppRoutingModule } from './app-routing/app-routing.module';
         @NgModule({
                  declarations: [
                  AppComponent,
                  MenuComponent,
                  DishdetailComponent,
                  HeaderComponent,
                  FooterComponent,
                  HomeComponent,
                  AboutComponent,
                  ContactComponent
                 ],
     imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FlexLayoutModule,
        MatToolbarModule,
        MatGridListModule,
        MatCardModule,
        MatButtonModule,
        MatListModule,
        AppRoutingModule,
        RouterModule
      ],` 
      `providers: [
        DishService
      ],`
     `bootstrap: [AppComponent]` 
   `})` 

    export class AppModule { }




          

app.component.html 文件

   

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

Answer 1

我从头开始一切。然后我的问题得到了解决。我不完全知道我的问题在哪里。但是，可能我在单独的文件夹中制作了路由文件。在 app-routing 文件夹中制作路由文件，修复了我的问题。

Answer 2

我注意到在您的app.module.ts 文件中，您在providers 和bootstrap 数组周围的不适当位置有反引号```。我从您自己的代码中复制并粘贴了此内容，以便您更好地查看：

      ...MatListModule,
        AppRoutingModule,
        RouterModule
      ],` 
      `providers: [
        DishService
      ],`
     `bootstrap: [AppComponent]` 
   `})` 

    export class AppModule { }

---

这样做： 像我在下面所做的那样删除 app.module.ts 文件中的所有反引号，然后重新启动终端。这应该可以解决您遇到的任何问题。

      ...MatListModule,
        AppRoutingModule,
        RouterModule
      ],
      providers: [
        DishService
      ],
     bootstrap: [AppComponent]
   })

    export class AppModule { }

---

我复制并粘贴了您的代码，并处理了您提供的相关信息的文件。删除反勾号后，您的代码在我的笔记本电脑上运行良好。这是下面 gif 中的结果，路由正常工作且控制台中没有错误。仅包含主页和菜单组件的示例。

最终结果：

我从您的代码中删除了与路由无关的所有其他内容，以便更容易检测错误。这是我的文件夹结构。

文件夹结构：

这是我文件的内容：

route.ts 文件：

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

import { MenuComponent } from './menu/menu.component';
import { HomeComponent } from './menu/home.component';

export const routes: Routes = [
  { path: 'home',  component: HomeComponent },
  { path: 'menu',     component: MenuComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

app.module.ts 文件：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { MenuComponent } from './menu/menu.component';
import { HomeComponent } from './menu/home.component';
import { AppRoutingModule } from './app-routing.module';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    MenuComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule
  ],
  providers: [

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts 文件：

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

@Component({
  selector: 'app-root',
  template: `
    <router-outlet></router-outlet>
  `
})
export class AppComponent {

}

app-routing.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

import { routes } from './routes';

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

menu.component.ts：

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

@Component({
  template: '<h1>Menu Component</h1>'
})
export class MenuComponent {

}

home.component.ts：

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

@Component({
  template: '<h1>Home Component</h1>'
})
export class HomeComponent {

}

就像我说的，一旦我从 app.module.ts 中删除了那些不必要的反引号，你的代码就可以正常工作，没有错误。

Answer 3

我发现您在 AppModule 的导入中缺少 app-routing.module.ts

@NgModule({
  imports: [
    CommonModule,
    routingModule
  ],

})
export class AppModule{ }