“路由器插座”不是已知元件

我有一个 MVC5项目与角前锋。我想添加路由，如本教程 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 组件中

<router-outlet></router-outlet>

给我一个错误告诉我，视觉工作室不能解决标签’路由器插座’。对于如何修复这个错误有什么建议吗？我是不是漏掉了一个引用或者一个导入，或者只是忽略了什么？

下面是我的 package.json、 app.Component 和 app.module

返回文章页面

{
"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"
}
}

返回文章页面

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 {


}

返回文章页面

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';


}
380472 次浏览
小开
最佳答案

试试:

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

不需要在 AppModule中配置导出，因为 AppModule不会被应用程序中的其他模块导入。

小开

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

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

试试这个:

将 RouterModule导入到 app.module.ts中

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

在你的 imports []中加入 RouterModule

像这样:

 imports: [    RouterModule,  ]
小开

它只是更好地创建一个路由组件，将处理您的所有路由！从角网站的文档！这是很好的练习！

Ng 生成模块 app-routing —— lat—— module = app

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

exports: [
RouterModule
],

到您的 ng-module 装饰器，因为它没有在默认情况下与生成的应用程序路由模块一起！

小开

假设您使用角6与角-cli 和您已经创建了一个单独的路由模块，这是负责路由活动-配置您的路由在路由阵列。确保在导出数组中声明 RouterModule。 代码应该是这样的:

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

谢谢《英雄编辑》的例子，我找到了正确的定义:

当我生成应用程序路由模块时:

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]
})
小开

这个问题也和我有关。 简单的小把戏。

 @NgModule({
imports: [
.....
],
declarations: [
......
],


providers: [...],
bootstrap: [...]
})

按照上面的顺序使用，先进口，然后申报，对我很管用。

小开

在 app.module.ts 文件中

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


const appRoutes: Routes = [
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full',
component: DashboardComponent
},
{
path: 'dashboard',
component: DashboardComponent
}
];


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


}

添加这个代码。 编码愉快。

小开

如果你正在做单元测试，并得到这个错误，然后导入 RouterTestingModule到您的 app.component.spec.ts或在您的特色组件的 spec.ts:

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

将 RouterTestingModule添加到你的 imports: []

describe('AppComponent', () => {


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

如果有人发现错误，以下是快速简单的解决方案:

“‘路由器出口’不是一个已知的元素”在角项目,

然后,

只需打开“ app.module.ts”文件并添加以下内容:

import { AppRoutingModule } from './app-routing.module';

以及进口中的“ AppRoutingModule”。

小开

有两种方法。 1. 如果要实现 app.module.ts文件，则:

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


const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'user', component: UserComponent },
{ path: 'server', component: ServerComponent }
];


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

  1. 如果要实现 app-routing.module.ts(分离路由模块)文件，则:

//app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'users', component: UsersComponent },
{ path: 'servers', component: ServersComponent }
];


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


//................................................................


//app.module.ts
import { AppRoutingModule } from './app-routing.module';


@NgModule({
imports: [
AppRoutingModule
]
})
export class AppModule { }

小开

在我的案例中，这种情况的发生是因为导入中遗漏了 路由器模组。

小开

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

Main.Component. html

<router-outlet></router-outlet>

主要模块

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 { }
小开

我找到了一个适合我的解决方案。为了进行测试，我创建了一个工作良好的新项目，然后逐渐删除 app.Component. html 中除了路由器出口线之外的所有内容。 这始终导致此错误。 我使用的是 VSCODE 1.53.x 版本，所以我升级到了1.54(2021年2月) ，问题就消失了。

小开

我只有这个问题在 VS 代码，运行 ng serve或 ng build --prod的工作很好。

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

小开

如果手动创建 app-routing.module.ts或使用 CLI 以外的工具来创建，则需要将 AppRoutingModule导入到 app.module.ts中，并将其添加到 NgModule 的导入数组中。 要使用 CLI 创建 app-routing.module.ts，请运行以下命令:

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

在我的情况下是一个延迟加载的错误。我指向的是路由模块，但它应该指向拥有路由模块的模块。

错了

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)
}
]
小开

有时会无缘无故出现此错误，这是由您的 IDE 的 打开和关闭解决的。

小开 
@NgModule({
declarations: [
SessionmagementComComponent, ***////Don't forgot to register main component for which html file you are using <router-outlet>...***
LocalvssessionStorageComponent,
SessionvslocallStorageComponent
],
imports: [
CommonModule,
BrowserModule,
SessionManagementStorageRoutingModule,
RouterModule,
AppRoutingModule
],
exports: [
LocalvssessionStorageComponent,
SessionvslocallStorageComponent
]
})
export class SessionmagementModule { }
小开

在我的例子中，我意外地从 ap.modules.ts 中的@NgModule 声明中删除了 AppComponent

小开

如果 app.module.ts 文件有错误，有时可能会显示此错误。在我的例子中，我导入了一个不再存在的组件

小开

这个错误可能有几个原因:

首先，不要忘记将 AppRoutingModule添加到 app.module.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添加到新创建的模块的 进口和 出口数组中。

返回文章页面新模块:

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 进口数组中。

应用程序模块:

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

我差不多也有同样的问题，我改变了

 templateUrl: `<router-outlet></router-outlet>`,

到

 template: `<router-outlet></router-outlet>`,

顺便说一下，请注意您的组件存在于模块的声明数组中

小开

确保以下几点可以解决这个问题:

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

请看下面的例子:

App.Component. html

<router-outlet></router-outlet>

应用程序路由模块

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 { }

应用程序模块:

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 {}

它和我一起工作! ! ！


提交答案