角度 2，当我在项目中使用路由时，控制台窗口中会显示错误

Question

异常：未捕获（在承诺中）：错误：./e 类 e 中的错误 - 内联模板：9:6 导致：对象取消订阅 错误：./e 类 e 中的错误 - 内联模板：9:6 导致：对象取消订阅 在 ViewWrappedError.ZoneAwareError (http://localhost:3000/node_modules/zone.js/dist/zone.js:811:33)

// aap.component.ts

import { Component } from '@angular/core';
// import { LocalStorageService } from 'angular-2-local-storage';

@Component({
    moduleId: module.id,
    selector: 'my-app',
    template: `
            <div class="container">
                <div class="punjab-vehicle-wrapper">
                    <div class="punjab-vehicle">
                        <a routerLink="/province" routerLinkActive="active" > Province Vehicle Verification </a>
                        <a routerLink="/capital"> Capital Vehicle Verification </a>
                    </div>  
                </div>
            </div>
            <router-outlet></router-outlet>
    `
})

export class AppComponent{

}

//路由模块

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

// loading _component
import { VehicleComponent } from './vehicle.component';
import { AppComponent } from './app.component';
import { IslamVehicleComponent } from './islam-vehicle.component';

const routes: Routes = [
    // { path: 'main', component: AppComponent },
    // { path: '', redirectTo: '/punjab', pathMatch: 'full'},
    { path: 'province', component: VehicleComponent },
    { path: 'capital', component: IslamVehicleComponent }
];

@NgModule({
    imports: [ 
        RouterModule.forRoot(routes)
    ],
    exports: [
        RouterModule
    ]

})

export class VehicleRoutingModule{

}

不知道是哪个文件错误，

Answer 1

这可能是你无法在 app.module.ts 中导入新组件。

Scotch Example

尝试修复您的代码

• app.component.ts

  import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: <template Code> }) export class AppComponent {}

• app-routing.module.ts

  import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { AppComponent } from './AppComponent.component'; const appRoutes: Routes = [ { path: '', redirectTo: '/main', pathMatch: 'full' }, { path: 'main', component: AppComponent }]; @NgModule({ imports: [RouterModule.forRoot(appRoutes)], exports: [RouterModule] }) export class AppRoutingModule {}

• app.module.ts

  import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './AppComponent.component'; import { AppRoutingModule } from './app-routing.module'; @NgModule({ imports: [ BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, AppRoutingModule ], declarations: [ AppComponent ], providers: [], bootstrap: [AppComponent] }) export class AppModule {}

  希望它成功了！