'router-outlet'不是一个已知的元素

Question

我有一个带角度前端的mvc 5项目.我想按照本教程https://angular.io/guide/router中的说明添加路由.所以在我的_Layout.cshtml中我添加了一个

<base href="/">

并在我的app.module中创建了我的路由.但是当我运行这个时,我收到以下错误:

Error: Template parse errors:
    'router-outlet' is not a known element:
    1. If 'router-outlet' is an Angular component, then verify that it is part       of this module.
    2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA'   to the '@NgModule.schemas' of this component to suppress this message. ("
    <a routerLink="/dashboard">dashboard</a>
    </nav>
    [ERROR ->]<router-outlet></router-outlet>
     "): ng:///AppModule/AppComponent.html@5:0

在我的app.component中

<router-outlet></router-outlet>

给出一个错误,告诉我Visual Studio无法解析标签'router-outlet'.有任何建议我如何解决这个错误？我错过了参考或导入或只是忽略了什么？

下面是我的package.json,app.component和app.module

的package.json

{
  "version": "1.0.0",
  "name": "app",
  "private": true,
  "scripts": {},
  "dependencies": {
    "@angular/common": "^4.2.2",
    "@angular/compiler": "^4.2.2",
    "@angular/core": "^4.2.2",
    "@angular/forms": "^4.2.2",
    "@angular/http": "^4.2.2",
    "@angular/platform-browser": "^4.2.2",
    "@angular/platform-browser-dynamic": "^4.2.2",
    "@angular/router": "^4.2.2",
    "@types/core-js": "^0.9.41",
    "angular-in-memory-web-api": "^0.3.2",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "graceful-fs": "^4.0.0",
    "ie-shim": "^0.1.0",
    "minimatch": "^3.0.4",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.0.1",
    "systemjs": "^0.20.12",
    "zone.js": "^0.8.12"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.1",
    "gulp-tsc": "^1.3.2",
    "gulp-typescript": "^3.1.7",
    "path": "^0.12.7",
    "typescript": "^2.3.3"
  }
}

app.module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import {DashboardComponent} from "./dashboard/dashboard.component"    

const appRoutes: Routes = [
{
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full',
    component: DashboardComponent
},  
{
    path: 'dashboard',
    component: DashboardComponent
}
];
@NgModule({
imports: [
    RouterModule.forRoot(appRoutes),
    BrowserModule,
    FormsModule               
],
exports: [RouterModule],
declarations: [
    AppComponent,  
    DashboardComponent      
],
bootstrap: [AppComponent]
})
export class AppModule {

}

app.component:

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

@Component({
selector: 'my-app',
template: `
          <h1>{{title}}</h1>
          <nav>
          <a routerLink="/dashboard">dashboard</a>
          </nav>
          <router-outlet></router-outlet>
          `
})
export class AppComponent {
    title = 'app Loaded';

}

Answer 1

试试:

@NgModule({
imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    FormsModule               
],
declarations: [
    AppComponent,  
    DashboardComponent      
],
bootstrap: [AppComponent]
})
export class AppModule {

}

没有必要配置导出AppModule,因为AppModule不会被应用程序中的其他模块导入.

Answer 2

试试这个:

导入RouterModule你的app.module.ts

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

加入RouterModule你的imports []

像这样:

 imports: [    RouterModule,  ]

Answer 3

对于已经RoutingModule在父模块中导入的那些，有时问题是由于未<router-outlet></router-outlet>在模块声明中添加组件引起的。

主组件.html

<router-outlet></router-outlet>

主模块.ts

import { MainComponent } from './main.component';
import { SharedModule } from './../shared/shared.module';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { MainRoutingModule } from './main-routing.module';
import { RouterModule } from '@angular/router';


@NgModule({
  declarations: [
    MainComponent // <----- DON'T FORGET TO DECLARE THIS
  ],
  imports: [
    CommonModule,
    SharedModule,
    RouterModule,
    MainRoutingModule
  ]
})
export class MainModule { }

Answer 4

如果你正在进行单元测试并得到这个错误,那么导入RouterTestingModule到你的app.component.spec.ts或你的特色组件的spec.ts里面

import { RouterTestingModule } from '@angular/router/testing';

Add RouterTestingModule into your imports [] like 

describe('AppComponent', () => {

  beforeEach(async(() => {    
    TestBed.configureTestingModule({    
      imports: [    
        RouterTestingModule    
      ],
      declarations: [    
        AppComponent    
      ],    
    }).compileComponents();    
  }));

Answer 5

有时这个错误无缘无故地出现，可以通过打开和关闭IDE 来解决。

Answer 6

假设您正在使用带有angular-cli的Angular 6,并且您已创建了一个负责路由活动的单独路由模块 - 在Routes数组中配置您的路由.请确保您在exports数组中声明了RouterModule.代码看起来像这样:

@NgModule({
      imports: [
      RouterModule,
      RouterModule.forRoot(appRoutes)
     // other imports here
     ],
     exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 7

当我在app.module.ts中添加以下代码时，它对我有用

@NgModule({
...,
   imports: [
     AppRoutingModule
    ],
...
})

Answer 8

最好创建一个可以处理所有路由的路由组件！来自 Angular 网站文档！这是很好的做法！

ng 生成模块应用程序路由 --flat --module=app

上面的 CLI 生成一个路由模块并添加到您的应用程序模块中，您需要从生成的组件中声明您的路由，也不要忘记添加以下内容：

exports: [
    RouterModule
  ],

到您的 ng-module 装饰器，因为默认情况下它不附带生成的应用程序路由模块！

Answer 9

谢谢你的英雄编辑器示例，我在这里找到了正确的定义：

当我生成应用路由模块时：

ng generate module app-routing --flat --module=app

并更新 app-routing.ts 文件以添加：

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

以下是完整示例：

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

import { DashboardComponent }   from './dashboard/dashboard.component';
import { HeroesComponent }      from './heroes/heroes.component';
import { HeroDetailComponent }  from './hero-detail/hero-detail.component';

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes', component: HeroesComponent }
];

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

并将 AppRoutingModule 添加到 app.module.ts 导入中：

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  providers: [...],
  bootstrap: [AppComponent]
})

Answer 10

我只在 VS Code 中遇到这个问题，运行ng serve还是ng build --prod工作正常。

对我来说，解决这个问题的方法是简单地禁用Angular 语言服务扩展 ( angular.ng-template)，然后重新启用它。

Answer 11

就我而言，延迟加载是一个错误。我指向的是路由模块，但它应该指向拥有路由模块的模块。

错误的

const routes: Routes = [
  {
    path: 'Login',
    loadChildren: ()=> import('./login/login-routing.module.ts').then(m=> m.LoginRoutingModule)
  }
]

正确的

const routes: Routes = [
  {
    path: 'Login',
    loadChildren: ()=> import('./login/login.module.ts').then(m=> m.LoginModule)
  }
]

Answer 12

导致此错误的原因可能有多种：

首先，不要忘记添加到文件AppRoutingModule中app.module.ts

应用程序模块.ts：

imports: [AppRoutingModule]

如果你创建了一个新的路由模块，那么你只需要在这个路由模块中导入和导出 RouterModule 即可：

@NgModule({
  declarations: [],
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class NewRoutingModule {}

然后不要忘记将其添加NewRoutingModule到主模块文件中：

@NgModule({
  declarations: [NewComponent],               //--> Add NewComponent
  imports: [CommonModule, NewRoutingModule ]  //--> Add NewRoutingModule 
})
export class NewModule{}

然后将此模块添加到 app.module.ts 文件中：

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, 
            BrowserAnimationsModule, 
            NewModule],       //--> Add NewModule
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

对于那些生成/创建新模块并尝试<router-outlet>在该模块中使用而无需任何新路由模块的人。不要忘记添加RouterModule到新创建的模块的导入和导出数组中。

新模块.模块.ts：

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

@NgModule({
  declarations: [NewComponent],          //--> Add NewComponent
  imports: [CommonModule, RouterModule]  //--> Add RouterModule
  exports: [RouterModule],               //--> Add RouterModule
})
export class NewModule{}

并且不要忘记将新创建的模块添加到 app.module.ts导入数组中。

应用程序模块.ts：

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, 
            BrowserAnimationsModule, 
            NewModule],       //--> Add NewModule
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Answer 13

请确保以下几点来解决此问题：

1. 将RouterModule模块导入到模块中。
2. 将组件添加到模块中的声明数组中。
3. 如果明确定义了路由器模块，请确保导入它。

请参阅以下示例：

应用程序组件.html

<router-outlet></router-outlet>

应用程序路由.module.ts

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router';
import { AboutUsComponent } from './components/about-us/about-us.component';
import { ContactUsComponent } from './components/contact-us/contact-us.component';
import { IndexComponent } from './components/index/index.component';
const routes: Routes = [
{ path: '', redirectTo: 'index', pathMatch: 'full' }, 
{ path: 'index', component: IndexComponent },
{ path: 'about-us', component: AboutUsComponent },
{ path: 'contact-us', component: ContactUsComponent }
];
@NgModule({
imports: [
    RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })
],
exports: [
    RouterModule
],
providers: []
})
export class AppRoutingModule { }

应用程序模块.ts：

import { NgModule} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { IndexComponent } from './components/index/index.component';
import { AboutUsComponent } from './components/about-us/about-us.component';
import { ContactUsComponent } from './components/contact-us/contact-us.component';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
CommonModule,
FormsModule,
RouterModule,
BrowserModule,
BrowserAnimationsModule, 
AppRoutingModule,
 ],
declarations: [AppComponent, IndexComponent, AboutUsComponent, ContactUsComponent],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}

它正在和我一起工作！