‘router-outlet’ is geen bekend element

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.cshtmlheb 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 AppModulete configureren, omdat AppModuleniet door andere modules in uw applicatie wordt geïmporteerd.


Antwoord 2, autoriteit 95%

Probeer dit:

Importeer RouterModulein uw app.module.ts

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

Voeg RouterModuletoe aan uw imports []

zoals dit:

imports: [    RouterModule,  ]

Antwoord 3, autoriteit 53%

Als u unit-tests uitvoert en deze foutmelding krijgt, importeert u RouterTestingModulein uw app.component.spec.tsof in de spec.ts:

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

Voeg RouterTestingModuletoe aan uw imports: []zoals

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

Antwoord 4, autoriteit 35%

Voor degenen die al RoutingModulehebben 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 serveof ng build --prodwerkte 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.tsof gebruikte een andere gereedschap dan de CLI om dit te doen, moet u AppRoutingModulein app.module.tsen voeg het toe aan de importsarray van de NGModule.
Om de app-routing.module.tsmet 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.

Other episodes