我正在使用单个模块,我在app.module.ts文件中注册了路由所需的一切。但是下面的错误仍在继续......不确定发生了什么。有人可以通过查看以下详细信息错误消息来帮助。 "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. ("<app-nav></app-nav>↵ [ERROR ->]<router-outlet></router-outlet>"): AppComponent@1:2"
originalStack
:
"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. ("<app-nav></app-nav>↵ [ERROR ->]<router-outlet></router-outlet>"): AppComponent@1:2↵ at SyntaxError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:3236:33)↵ at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:64595:16)↵ at new SyntaxError (http://localhost:4200/vendor.bundle.js:5714:16)↵ at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:17621:19)↵ at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:47610:68)↵ at http://localhost:4200/vendor.bundle.js:47493:62↵ at Set.forEach (native)↵ at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:47493:19)↵ at createResult (http://localhost:4200/vendor.bundle.js:47375:19)↵ at ZoneDelegate.webpackJsonp.567.ZoneDelegate.invoke (http://localhost:4200/polyfills.bundle.js:2608:26)↵ at Zone.webpackJsonp.567.Zone.run (http://localhost:4200/polyfills.bundle.js:2404:43)↵ at http://localhost:4200/polyfills.bundle.js:2957:57↵ at ZoneDelegate.webpackJsonp.567.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:2641:31)↵ at Zone.webpackJsonp.567.Zone.runTask (http://localhost:4200/polyfills.bundle.js:2444:47)↵ at drainMicroTaskQueue (http://localhost:4200/polyfills.bundle.js:2807:35)"
我的App.component.ts文件如下所示:
`import { Component } from '@angular/core';
@Component({
template: `<app-nav></app-nav>
<router-outlet></router-outlet>`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}
我的app.module.ts文件看起来像, `
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {RouterModule} from '@angular/router';
import { AppComponent } from './app.component';
import { NavComponent } from './nav/nav.component';
import { BlogComponent } from './blog/blog.component';
import { PostblogComponent } from './blog/postblog/postblog.component';
import { BlogdetailComponent } from './blog/blogdetail/blogdetail.component';
import {BlogService} from './blog/shared/blog.service';
import {AppRoutes} from './app.route';
@NgModule({
declarations: [
AppComponent,
NavComponent,
BlogComponent,
PostblogComponent,
BlogdetailComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(AppRoutes)
],
providers: [BlogService],
bootstrap: [AppComponent]
})
export class AppModule { }
以下是我的路由模块,
import {Routes} from '@angular/router';
import {BlogComponent} from './blog/blog.component';
import {BlogdetailComponent} from './blog/blogdetail/blogdetail.component';
export const AppRoutes:Routes = [
{path:'blog',component:BlogComponent},
{path:'blog/:id',component:BlogdetailComponent},
{path:'', redirectTo:'/blog',pathMatch:'full'}
]
`