'Router-Outlet' ist kein bekanntes Element

92

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';

}
Molo
quelle

Antworten:

66

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.

Jota.Toledo
quelle
Ich verstehe nicht, was du meinst
Jota.Toledo
@ Jota.Toledo Ich habe eine separate Moduldatei für das Routing erstellt, in der ich Routen definiert habe. Außerdem habe ich BrowserModule, FormsModule in app.module-Importen und alle drei in der Routing-Modul-Datei. Aber ich erhalte immer noch diesen Fehler. Irgendwelche Ratschläge?
ninja_md
@ninja_md Haben Sie Ihrer Routing-Modul-Datei eine Exportdeklaration hinzugefügt? Wie unten. @NgModule({ imports: [ RouterModule.forRoot(appRoutes) ], exports: [ RouterModule ] }) Ich habe den gleichen Fehler erhalten und dies hat mein Problem behoben.
Mihir Kagrana
72

Versuche dies:

Importieren Sie RouterModulein Ihreapp.module.ts

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

Fügen Sie RouterModulein Ihreimports []

so was:

 imports: [    RouterModule,  ]
Shubham Verma
quelle
4
Großartig, das hat mein 'router-outlet' is not a known elementProblem gelöst . für Angular CLI version: 6.0.8undAngular version: 6.0.5
Shams
32

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();    
  }));
Muhammad Adeel Malik
quelle
3
Danke Alter, du hast meinen Tag gerettet.
Beto Silva
11

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 { }
MKant
quelle
Ich habe eine separate Moduldatei für das Routing erstellt, wie in Ihrer Antwort erwähnt. Außerdem habe ich BrowserModule, FormsModule in app.module-Importen und RouterModule in AppRouting-Datei. Aber ich erhalte immer noch diesen Fehler. Kannst du helfen?
ninja_md
Ein bisschen Code würde helfen - Routing-Modulteil und App-Modulteil.
MKant
1
ninja_md Importieren Sie Ihr Routing-Modul in das Array app.module imports. Die zweite Änderung wäre, dass Sie im Routing-Modul unter @NgModule im Export-Array den Namen Ihrer Moduldatei angeben, die Sie für das Routing erstellt haben. Ich hoffe das wird dein Problem lösen.
M. Sharma
8

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

@NgModule({
...,
   imports: [
     AppRoutingModule
    ],
...
})
Jigar Bhatt
quelle
4

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]
})
Kamlesh
quelle
1

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!

Seyi Daniels
quelle
0

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.

Susampath
quelle
0

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

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

Shatu
quelle
-2

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.

Vinayak Savale
quelle
-3

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.

Shree
quelle