router-outlet' n'est pas un élément connu.

Question

J'ai un projet mvc 5 avec un frontend angulaire. Je voulais ajouter le routage comme décrit dans ce tutoriel. https://angular.io/guide/router . Ainsi, dans mon _Layout.cshtml J'ai ajouté un

<base href="http://stackoverflow.com/">

et créé mon routage dans mon app.module. Mais lorsque je l'exécute, j'obtiens l'erreur suivante :

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

Dans mon app.component, la ligne

<router-outlet></router-outlet>

donne une erreur me disant que Visual studio ne peut pas résoudre la balise 'router-outlet'. Avez-vous des suggestions sur la façon dont je peux corriger cette erreur ? Est-ce qu'il me manque une référence ou une importation ou est-ce que je néglige quelque chose ?

Voici mon package.json ,app.component et 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';

}

Answer 1

Essayez ça :

Importation RouterModule dans votre app.module.ts

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

Ajouter RouterModule dans votre imports []

comme ça :

 imports: [    RouterModule,  ]

Answer 2

Essayez avec :

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

Il n'est pas nécessaire de configurer les exports dans AppModule parce que AppModule ne seront pas importés par d'autres modules de votre application.

Answer 3

Si vous effectuez des tests unitaires et que vous obtenez cette erreur, alors Importer RouterTestingModule dans votre app.component.spec.ts ou à l'intérieur de vos composants vedettes spec.ts :

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

Ajouter RouterTestingModule dans votre imports: [] comme

describe('AppComponent', () => {

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

Answer 4

En supposant que vous utilisez Angular 6 avec angular-cli et que vous avez créé un module de routage distinct qui est responsable des activités de routage - configurez vos routes dans le tableau Routes.Assurez-vous que vous déclarez RouterModule dans le tableau exports. Le code devrait ressembler à ceci :

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

Answer 5

Cela fonctionne pour moi, lorsque j'ajoute le code suivant dans app.module.ts

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