'Router-Outlet' ist kein bekanntes Element

Ich habe ein MVC 5-Projekt mit einem eckigen Frontend. Ich wollte das Routing wie in diesem Tutorial beschrieben hinzufügen: https://angular.io/guide/router . Also habe _Layout.cshtmlich in meinem einen hinzugefügt

<base href="/">

und habe mein Routing in meiner app.module erstellt. Aber wenn ich dies ausführe, erhalte ich den folgenden Fehler:

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 meiner app.component die Zeile

<router-outlet></router-outlet>

gibt einen Fehler aus, der mir mitteilt, dass Visual Studio das Tag 'router-outlet' nicht auflösen kann. Irgendwelche Vorschläge, wie ich diesen Fehler beheben kann? Fehlt mir eine Referenz oder ein Import oder übersehen Sie einfach etwas?

Unten sind meine package.json, app.component und 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';

}

Versuche es mit:

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

Die Exporte müssen nicht konfiguriert werden AppModule, da sie AppModulenicht von anderen Modulen in Ihrer Anwendung importiert werden.

Versuche dies:

Importieren Sie RouterModulein Ihreapp.module.ts

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

Fügen Sie RouterModulein Ihreimports []

so was:

 imports: [    RouterModule,  ]

Wenn Sie Unit-Tests durchführen und diesen Fehler erhalten, importieren Sie RouterTestingModulein Ihre app.component.spec.tsoder in Ihre vorgestellten Komponenten spec.ts:

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

Fügen Sie RouterTestingModulein Ihr imports: []like hinzu

describe('AppComponent', () => {

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

Angenommen, Sie verwenden Angular 6 mit angle-cli und haben ein separates Routing-Modul erstellt, das für die Routing-Aktivitäten verantwortlich ist. Konfigurieren Sie Ihre Routen im Routen-Array. Stellen Sie sicher, dass Sie RouterModule im Export-Array deklarieren. Code würde so aussehen:

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

Es funktioniert für mich, wenn ich folgenden Code in app.module.ts hinzufüge

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

Vielen Dank an Hero Editor Beispiel, wo ich die richtige Definition gefunden habe:

Wenn ich ein App-Routing-Modul generiere:

ng generate module app-routing --flat --module=app

und aktualisieren Sie die Datei app-routing.ts, um Folgendes hinzuzufügen:

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})

Hier ist das vollständige Beispiel:

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 {}

und fügen Sie AppRoutingModule zu den Importen von app.module.ts hinzu:

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  providers: [...],
  bootstrap: [AppComponent]
})

Es ist einfach besser, eine Routing-Komponente zu erstellen, die alle Ihre Routen verarbeitet! Aus der eckigen Website-Dokumentation! Das ist eine gute Übung!

ng generiere Modul App-Routing --flat --module = App

Die obige CLI generiert ein Routing-Modul und fügt es Ihrem App-Modul hinzu. Alles, was Sie aus der generierten Komponente tun müssen, ist, Ihre Routen zu deklarieren. Vergessen Sie auch nicht, Folgendes hinzuzufügen:

exports: [
    RouterModule
  ],

an Ihren ng-module decorator, da dieser standardmäßig nicht mit dem generierten App-Routing-Modul geliefert wird!

Dieses Problem war auch bei mir. Einfacher Trick dafür.

 @NgModule({
  imports: [
   .....       
  ],
 declarations: [
  ......
 ],

 providers: [...],
 bootstrap: [...]
 })

Verwenden Sie es wie in der obigen Reihenfolge. Zuerst importieren Sie dann Erklärungen. Es hat bei mir funktioniert.

Es gibt zwei Möglichkeiten. 1. Wenn Sie eine app.module.tsDatei implementieren möchten, gehen Sie wie folgt vor:

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 { }

2. Wenn Sie eine app-routing.module.tsDatei (Separated Routing Module) implementieren möchten, gehen Sie wie folgt vor:

//app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users', component: UsersComponent },
  { path: 'servers', component: ServersComponent }
];

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

//................................................................

//app.module.ts
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [
    AppRoutingModule
  ]
})
export class AppModule { }

In Ihrer Datei app.module.ts

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 {

}

Fügen Sie diesen Code hinzu. Viel Spaß beim Codieren.

Hier ist die schnelle und einfache Lösung, wenn jemand den Fehler erhält:

"'Router-Outlet' ist kein bekanntes Element" im Winkelprojekt,

Dann,

Gehen Sie einfach zur Datei "app.module.ts" und fügen Sie die folgende Zeile hinzu:

import { AppRoutingModule } from './app-routing.module';

Und auch 'AppRoutingModule' beim Import.