Angular-cli 1.0 rc 0 - 路由器插座未知

时间:2017-03-19 22:41:07

标签: angular angular2-routing

我正在使用单个模块,我在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'}
]

`

0 个答案:

没有答案