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.cshtml
ich 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';
}
@NgModule({ imports: [ RouterModule.forRoot(appRoutes) ], exports: [ RouterModule ] })
Ich habe den gleichen Fehler erhalten und dies hat mein Problem behoben.Versuche dies:
Importieren Sie
RouterModule
in Ihreapp.module.ts
Fügen Sie
RouterModule
in Ihreimports []
so was:
quelle
'router-outlet' is not a known element
Problem gelöst . fürAngular CLI version: 6.0.8
undAngular version: 6.0.5
Wenn Sie Unit-Tests durchführen und diesen Fehler erhalten, importieren Sie
RouterTestingModule
in Ihreapp.component.spec.ts
oder in Ihre vorgestellten Komponentenspec.ts
:Fügen Sie
RouterTestingModule
in Ihrimports: []
like hinzuquelle
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:
quelle
Es funktioniert für mich, wenn ich folgenden Code in app.module.ts hinzufüge
quelle
Vielen Dank an Hero Editor Beispiel, wo ich die richtige Definition gefunden habe:
Wenn ich ein App-Routing-Modul generiere:
und aktualisieren Sie die Datei app-routing.ts, um Folgendes hinzuzufügen:
Hier ist das vollständige Beispiel:
und fügen Sie AppRoutingModule zu den Importen von app.module.ts hinzu:
quelle
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:
an Ihren ng-module decorator, da dieser standardmäßig nicht mit dem generierten App-Routing-Modul geliefert wird!
quelle
Dieses Problem war auch bei mir. Einfacher Trick dafür.
Verwenden Sie es wie in der obigen Reihenfolge. Zuerst importieren Sie dann Erklärungen. Es hat bei mir funktioniert.
quelle
Es gibt zwei Möglichkeiten. 1. Wenn Sie eine
app.module.ts
Datei implementieren möchten, gehen Sie wie folgt vor:app-routing.module.ts
Datei (Separated Routing Module) implementieren möchten, gehen Sie wie folgt vor:quelle
In Ihrer Datei app.module.ts
Fügen Sie diesen Code hinzu. Viel Spaß beim Codieren.
quelle
Hier ist die schnelle und einfache Lösung, wenn jemand den Fehler erhält:
Dann,
Gehen Sie einfach zur Datei "app.module.ts" und fügen Sie die folgende Zeile hinzu:
Und auch 'AppRoutingModule' beim Import.
quelle