erreur NG8001: 'router-outlet' n'est pas un élément connu: 1. Si 'router-outlet' est un Angular component, alors vérifiez qu'il fait partie de ce module. 2. Si ' router-outlet 'est un composant Web puis ajoutez' CUSTOM_ELEMENTS_SCHEMA 'au' @ NgModule.schemas 'de ce composant pour supprimer ce message.
4 <router-outlet></router-outlet>
Dans mon app.composant la ligne
<router-outlet></router-outlet>
Dans mon 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"
}
}
Dans 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 { }
Ici, vous utilisez RouterTestingModule
ceci n'est utilisé que pour l'unité essayez d'utiliser RouterModule
Comme ça
import { RouterModule } from '@angular/router';
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
...
})
J'ai eu le même problème car j'essayais d'importer un module qui déclarerait un ensemble spécifique de composants. L'un de ces composants avait un <router-outlet>
tag. C'était l'erreur lors de la compilation:
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>
Ce que j'ai fait était d'importer RouterModule sur le module externe, comme ceci:
@NgModule({
declarations:[
AlertsComponent,
FooterComponent,
LogoutComponent,
MessageComponent,
SearchComponent,
SidebarComponent,
TopbarComponent,
UserInfoComponent,
LayoutComponent,
],
imports:[
RouterModule
]
})
export class LayoutModule {}
puis j'ai importé le module sur le app.module.ts
@NgModule({
declarations: [
AppComponent
],
imports: [
AppRoutingModule,
BrowserModule,
LayoutModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Maintenant ça marche