错误 NG8001：“路由器插座”不是已知元素
Posted
技术标签:
【中文标题】错误 NG8001：“路由器插座”不是已知元素【英文标题】：error NG8001: 'router-outlet' is not a known element 【发布时间】：2020-06-08 04:47:47 【问题描述】：错误 NG8001：'router-outlet' 不是已知元素： 1.如果'router-outlet'是一个Angular组件，那么验证它是这个模块的一部分。 2. 如果“router-outlet”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。
4 <router-outlet></router-outlet>
在我的 app.component 行
<router-outlet></router-outlet>
在我的 package.json 中
"name": "auth-table2",
"version": "0.0.0",
"scripts":
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
,
"private": true,
"dependencies":
"@angular/animations": "~9.0.1",
"@angular/common": "~9.0.1",
"@angular/compiler": "~9.0.1",
"@angular/core": "~9.0.1",
"@angular/forms": "~9.0.1",
"@angular/platform-browser": "~9.0.1",
"@angular/platform-browser-dynamic": "~9.0.1",
"@angular/router": "~9.0.1",
"@ng-bootstrap/ng-bootstrap": "^6.0.0",
"@ngrx/store": "^8.6.0",
"angularfire2": "^5.4.2",
"bootstrap": "^4.4.1",
"firebase": "^7.9.1",
"rxjs": "~6.5.4",
"rxjs-compat": "^6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
,
"devDependencies":
"@angular-devkit/build-angular": "~0.900.2",
"@angular/cli": "~9.0.2",
"@angular/compiler-cli": "~9.0.1",
"@angular/language-service": "~9.0.1",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~5.18.0",
"typescript": "~3.7.5"
在 app.module.ts 中
import AdminAuthGuard from './admin-auth-guard.service';
import UserService from './user.service';
import AuthGuard from './auth-guard.service';
import AuthService from './auth.service';
import environment from './../environments/environment';
import BrowserModule from '@angular/platform-browser';
import NgModule from '@angular/core';
import AngularFireModule from 'angularfire2';
import AngularFireDatabaseModule from 'angularfire2/database';
import AngularFireAuthModule from 'angularfire2/auth';
import RouterModule from '@angular/router';
import RouterTestingModule from '@angular/router/testing';
import NgbModule from '@ng-bootstrap/ng-bootstrap';
import AppComponent from './app.component';
import BsNavbarComponent from './bs-navbar/bs-navbar.component';
import HomeComponent from './home/home.component';
import ProductsComponent from './products/products.component';
import ShoppingCartComponent from './shopping-cart/shopping-cart.component';
import CheckOutComponent from './check-out/check-out.component';
import OrderSuccessComponent from './order-success/order-success.component';
import MyOrdersComponent from './my-orders/my-orders.component';
import AdminProductsComponent from './admin/admin-products/admin-products.component';
import AdminOrdersComponent from './admin/admin-orders/admin-orders.component';
import LoginComponent from './login/login.component';
@NgModule(
declarations: [
AppComponent,
BsNavbarComponent,
HomeComponent,
ProductsComponent,
ShoppingCartComponent,
CheckOutComponent,
OrderSuccessComponent,
MyOrdersComponent,
AdminProductsComponent,
AdminOrdersComponent,
LoginComponent
],
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule,
// NgbModule.forRoot(),
RouterTestingModule,
RouterModule.forRoot([
path: '', component: HomeComponent ,
path: 'products', component: ProductsComponent ,
path: 'shopping-cart', component: ShoppingCartComponent ,
path: 'login', component: LoginComponent ,
path: 'check-out', component: CheckOutComponent, canActivate: [AuthGuard] ,
path: 'order-success', component: OrderSuccessComponent, canActivate: [AuthGuard] ,
path: 'my/orders', component: MyOrdersComponent, canActivate: [AuthGuard] ,
path: 'admin/products',
component: AdminProductsComponent,
canActivate: [AuthGuard, AdminAuthGuard]
,
path: 'admin/orders',
component: AdminOrdersComponent,
canActivate: [AuthGuard, AdminAuthGuard]
])
],
providers: [
AuthService,
AuthGuard,
AdminAuthGuard,
UserService
],
exports: [
[ RouterModule ]
],
bootstrap: [AppComponent]
)
export class AppModule
【问题讨论】：
你不应该在真正的模块中有RouterTestingModule。它仅适用于单元测试的 TestBed 模块。
【参考方案1】：
这里您使用的是RouterTestingModule，这仅用于单元尝试使用RouterModule
这样
import RouterModule from '@angular/router';
@NgModule(
imports: [
RouterModule.forRoot(appRoutes)
],
...
)
【讨论】：
【参考方案2】：我遇到了同样的问题，因为我试图导入一个声明一组特定组件的模块。其中一个组件有一个<router-outlet> 标签。
这是编译过程中的错误：
ERROR in src/app/components/layout/layout.component.html:8:17 - error NG8001: 'router-oulet' is not a known element:
1. If 'router-oulet' is an Angular component, then verify that
it is part of this module.
2. If 'router-oulet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
8 <router-oulet></router-oulet>
我所做的是在外部模块上导入 RouterModule，如下所示：
@NgModule(
declarations:[
AlertsComponent,
FooterComponent,
LogoutComponent,
MessageComponent,
SearchComponent,
SidebarComponent,
TopbarComponent,
UserInfoComponent,
LayoutComponent,
],
imports:[
RouterModule
]
)
export class LayoutModule
然后我在 app.module.ts
上导入了模块@NgModule(
declarations: [
AppComponent
],
imports: [
AppRoutingModule,
BrowserModule,
LayoutModule
],
providers: [],
bootstrap: [AppComponent]
)
export class AppModule
现在可以使用了
【讨论】：
【参考方案3】：错误NG 8001，以及其他类似的错误是由不正确的导入语句引起的。
模块始终位于组件区域的第一个文件夹中。
仅在import RouterModule from '@angular/router'; 中使用RouterModule
【讨论】：
【参考方案4】：该错误发生在 ng-build 或 ng-serve 时，当对 import 语句等内容进行更改或添加新模块时。该消息试图告诉我们它找不到该组件。这个链接可能非常有用：
https://dev.to/jwp/material-components-4616#:~:text=The%20NG8001%20Error%20happens%20at,and%20how%20to%20fix%20them.
在我的情况下，错误是我创建了一个新模块，并且没有在模块的 declarations:[] 部分中包含关联的组件：
在 AlxModule 内部（在我的例子中），没有声明 AlxComponent... 所以在我像下面那样做的那一刻，对我来说效果很好：
@NgModule(
declarations: [AlxComponent, HomeComponent],
imports: [
AlxRoutingModule,
],
)
export class AlxModule
【讨论】：
【参考方案5】：Angular 版本 - 10.1.5
app.component.html
<router-outlet></router-outlet>
错误 -
ERROR in src/app/app.component.html:1:1 - error NG8001: '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.
解决方案 -
app.module.ts
import RouterModule from '@angular/router';
@NgModule(
declarations: [...],
imports: [..., RouterModule],
providers: [],
bootstrap: [AppComponent]
)
export class AppModule
【讨论】：
以上是关于错误 NG8001：“路由器插座”不是已知元素的主要内容，如果未能解决你的问题，请参考以下文章
ng 测试模板解析错误“ngb-carousel”不是已知元素