angular 2，当我在我的项目中使用路由时，然后在控制台窗口中显示错误

Question

EXCEPTION：未捕获（在承诺中）：错误：./e类中的错误e - 内联模板：9：6导致：object unsubscribed 错误：./e类中的错误e - 内联模板：9：6导致：object unsubscribed     在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 {}

  希望它有效！