Ik heb een mvc 5-project met een hoekige frontend . Ik wilde routering toevoegen zoals beschreven in deze tutorial https://angular.io/guide/router. Dus in mijn _Layout.cshtml
heb ik een
. toegevoegd
<base href="/">
en heb mijn routing gemaakt in mijn app.module. Maar als ik dit uitvoer krijg ik de volgende foutmelding:
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
In mijn app.component de regel
<router-outlet></router-outlet>
geeft een foutmelding dat Visual studio de tag ‘router-outlet’ niet kan oplossen. Om het even welke suggesties hoe ik deze fout kan bevestigen? Mis ik een referentie of een import of zie ik iets over het hoofd?
Hieronder staan mijn package.json, app.component en 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.ts
:
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.ts
:
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';
}
Antwoord 1, autoriteit 100%
Probeer met:
@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes),
FormsModule
],
declarations: [
AppComponent,
DashboardComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
Het is niet nodig om de exports in AppModule
te configureren, omdat AppModule
niet door andere modules in uw applicatie wordt geïmporteerd.
Antwoord 2, autoriteit 95%
Probeer dit:
Importeer RouterModule
in uw app.module.ts
import { RouterModule } from '@angular/router';
Voeg RouterModule
toe aan uw imports []
zoals dit:
imports: [ RouterModule, ]
Antwoord 3, autoriteit 53%
Als u unit-tests uitvoert en deze foutmelding krijgt, importeert u RouterTestingModule
in uw app.component.spec.ts
of in de spec.ts
:
import { RouterTestingModule } from '@angular/router/testing';
Voeg RouterTestingModule
toe aan uw imports: []
zoals
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent
],
}).compileComponents();
}));
Antwoord 4, autoriteit 35%
Voor degenen die al RoutingModule
hebben geïmporteerd in de bovenliggende module, wordt het probleem soms veroorzaakt door het niet toevoegen van de component met <router-outlet></router-outlet>
in de moduleverklaringen.
main.component.html
<router-outlet></router-outlet>
main.module.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 { }
Antwoord 5, autoriteit 17%
Ervan uitgaande dat u Angular 6 gebruikt met angular-cli en u een aparte routeringsmodule hebt gemaakt die verantwoordelijk is voor routeringsactiviteiten, configureert u uw routes in Routes-array. Zorg ervoor dat u RouterModule declareert in exports-array.
Code zou er als volgt uitzien:
@NgModule({
imports: [
RouterModule,
RouterModule.forRoot(appRoutes)
// other imports here
],
exports: [RouterModule]
})
export class AppRoutingModule { }
Antwoord 6, autoriteit 14%
Het werkt voor mij, als ik de volgende code toevoeg in app.module.ts
@NgModule({ ..., imports: [ AppRoutingModule ], ... })
Antwoord 7, autoriteit 6%
Bedankt Hero Editor-voorbeeld, waar ik de juiste definitie heb gevonden:
Als ik app-routeringsmodule genereer:
ng generate module app-routing --flat --module=app
en update het app-routing.ts-bestand om toe te voegen:
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
Dit is het volledige voorbeeld:
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 {}
en voeg AppRoutingModule toe aan app.module.ts imports:
@NgModule({
declarations: [
AppComponent,
...
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule
],
providers: [...],
bootstrap: [AppComponent]
})
Antwoord 8, autoriteit 2%
Het is gewoon beter om een routeringscomponent te maken die al uw routes afhandelt! Uit de hoekige websitedocumentatie! Dat is een goede gewoonte!
ng module app-routing genereren –flat –module=app
De bovenstaande CLI genereert een routeringsmodule en voegt toe aan uw app-module. Het enige wat u hoeft te doen van de gegenereerde component is om uw routes te declareren, vergeet ook niet dit toe te voegen:
exports: [
RouterModule
],
naar uw ng-module-decorateur omdat deze standaard niet wordt geleverd met de gegenereerde app-routeringsmodule!
Antwoord 9, autoriteit 2%
Ik heb een oplossing gevonden die voor mij werkte. Om te testen, heb ik een nieuw project gemaakt dat goed werkte en vervolgens geleidelijk alles in app.component.html verwijderd, behalve de router-outlet-lijn.
DIT veroorzaakt CONSTANT deze fout.
Ik gebruikte VSCODE versie 1.53.x dus ik heb geüpgraded naar 1.54 (februari 2021) en het probleem is verdwenen.
Antwoord 10, autoriteit 2%
Ik had dit probleem alleen in VS Code, het uitvoeren van ng serve
of ng build --prod
werkte prima.
Wat het probleem voor mij oploste, was het uitschakelen van de Angular Language Service-extensie (angular.ng-template
) en vervolgens opnieuw inschakelen.
Antwoord 11
In mijn geval was er een fout bij het lui laden. Ik verwees naar de routeringsmodule, maar het zou moeten verwijzen naar de module die eigenaar is van de routeringsmodule.
Fout
const routes: Routes = [
{
path: 'Login',
loadChildren: ()=> import('./login/login-routing.module.ts').then(m=> m.LoginRoutingModule)
}
]
rechts
const routes: Routes = [
{
path: 'Login',
loadChildren: ()=> import('./login/login.module.ts').then(m=> m.LoginModule)
}
]
Antwoord 12
Er zijn twee manieren.
1. Als u app.module.ts
-bestand wilt implementeren, dan:
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 { }
Antwoord 13
In mijn geval gebeurt het omdat routermodule gemist in de import.
Antwoord 14
Als u handmatig hebt gemaakt app-routing.module.ts
of gebruikte een andere gereedschap dan de CLI om dit te doen, moet u AppRoutingModule
in app.module.ts
en voeg het toe aan de importsarray van de NGModule.
Om de app-routing.module.ts
met behulp van de CLI Run dit:
ng generate module app-routing --flat --module=app
Antwoord 15
Dit probleem was ook bij mij.
Eenvoudige truc ervoor.
@NgModule({
imports: [
.....
],
declarations: [
......
],
providers: [...],
bootstrap: [...]
})
Gebruik het zoals in bovenstaande volgorde. First importeert dan verklaringen. Het werkte voor mij.
Antwoord 16
in uw app.module.ts-bestand
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 {
}
Voeg deze code toe.
Happy Codering.
Antwoord 17
Hier is de snelle en eenvoudige oplossing als iemand de foutmelding krijgt:
“Router-outlet” is geen bekend element “in het hoekproject,
Dan,
Ga gewoon naar het bestand “App.module.ts” en amp; Voeg de volgende regel toe:
import { AppRoutingModule } from './app-routing.module';
en ook ‘ApproutingModule’ in de invoer.