У меня есть проект mvc 5 с угловым интерфейсом. Я хотел добавить маршрутизацию, как описано в этом руководстве https://angular.io/guide/router . Итак, в моем _Layout.cshtml
я добавил
<base href="/">
и создал мою маршрутизацию в моем app.module. Но когда я запускаю это, я получаю следующую ошибку:
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
В моем app.component строка
<router-outlet></router-outlet>
выдает ошибку, сообщающую мне, что Visual Studio не может разрешить тег 'router-outlet'. Есть предложения, как я могу исправить эту ошибку? Мне не хватает ссылки или импорта, или я просто что-то упускаю?
Ниже мои package.json, app.component и 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 ] })
У меня была такая же ошибка, и это устранило мою проблему.Попробуй это:
Импортируйте
RouterModule
в свойapp.module.ts
import { RouterModule } from '@angular/router';
Добавьте
RouterModule
в свойimports []
как это:
источник
'router-outlet' is not a known element
проблему. дляAngular CLI version: 6.0.8
иAngular version: 6.0.5
Если вы выполняете модульное тестирование и получаете эту ошибку, импортируйте
RouterTestingModule
в своиapp.component.spec.ts
или в свои избранные компонентыspec.ts
:import { RouterTestingModule } from '@angular/router/testing';
Добавьте
RouterTestingModule
в свойimports: []
лайкdescribe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ RouterTestingModule ], declarations: [ AppComponent ], }).compileComponents(); }));
источник
Предполагая, что вы используете Angular 6 с angular-cli и создали отдельный модуль маршрутизации, который отвечает за маршрутизацию - настройте свои маршруты в массиве Routes. Убедитесь, что вы объявляете RouterModule в массиве экспорта. Код будет выглядеть так:
@NgModule({ imports: [ RouterModule, RouterModule.forRoot(appRoutes) // other imports here ], exports: [RouterModule] }) export class AppRoutingModule { }
источник
У меня это работает, когда я добавляю следующий код в app.module.ts
источник
Спасибо, пример редактора героев, где я нашел правильное определение:
Когда я создаю модуль маршрутизации приложений:
ng generate module app-routing --flat --module=app
и обновите файл app-routing.ts, добавив:
@NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] })
Вот полный пример:
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 {}
и добавьте AppRoutingModule в импорт app.module.ts:
@NgModule({ declarations: [ AppComponent, ... ], imports: [ BrowserModule, FormsModule, AppRoutingModule ], providers: [...], bootstrap: [AppComponent] })
источник
Просто лучше создать компонент маршрутизации, который бы обрабатывал все ваши маршруты! Из документации на сайте angular! Это хорошая практика!
ng generate module app-routing --flat --module = app
Вышеупомянутый интерфейс командной строки генерирует модуль маршрутизации и добавляет к вашему модулю приложения, все, что вам нужно сделать из сгенерированного компонента, - это объявить свои маршруты, также не забудьте добавить это:
exports: [ RouterModule ],
в ваш декоратор ng-module, так как по умолчанию он не поставляется со сгенерированным модулем маршрутизации приложений!
источник
Есть два пути. 1. если вы хотите реализовать
app.module.ts
файл, то: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 { }
app-routing.module.ts
файл (Separated Routing Module), то://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 { }
источник
Эта проблема была и со мной. Простой трюк.
@NgModule({ imports: [ ..... ], declarations: [ ...... ], providers: [...], bootstrap: [...] })
используйте его, как в приведенном выше порядке. сначала импорт, затем объявления. У меня это сработало.
источник
В вашем файле 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 { }
Добавьте этот код. Удачного кодирования.
источник
Вот быстрое и простое решение, если у кого-то возникает ошибка:
Затем,
Просто перейдите в файл "app.module.ts" и добавьте следующую строку:
import { AppRoutingModule } from './app-routing.module';
А также AppRoutingModule в импорте.
источник