Блог

Я использую NgModule в angular2, 2.0.0-rc.5, но я получил ошибку shim.js: 4035 Ошибка отклонения необработанного обещания: не удается сопоставить какие-либо маршруты: «(…). Как я могу устранить эту ошибку.Пожалуйста, помогите мне, вот мой код.

app/base/app.component.html

 <router-outlet></router-outlet>
  

app /base/app.component.ts

 import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { EventService } from '../shared/service/event-service';

@Component({
    moduleId: module.id,
    selector: 'owb-workbench-app',
    templateUrl: 'app.component.html',
    providers: [EventService],
    directives: [ROUTER_DIRECTIVES]
 })

export class AppComponent {
}
  

app /base/app.module.ts

 import { provide } from '@angular/core';
import {CommonModule, APP_BASE_HREF} from "@angular/common";
import { disableDeprecatedForms, provideForms } from '@angular/forms/index';
import { enableProdMode } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';

import { HTTP_PROVIDERS, HttpModule } from '@angular/http';
import { HttpClient } from '../shared/http/base.http';
import { EventService } from '../shared/service/event-service';

import { routing } from './app.routes';
import { DashboardComponent } from '../dashboard/dashboard.component'
import { appRoutingProviders } from './app.routes'
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent }   from './app.component';
import { NKDatetime } from 'ng2-datetime/ng2-datetime';

@NgModule({
      imports:      [ BrowserModule, FormsModule,HttpModule,CommonModule,routing,appRoutingProviders],
      declarations: [ AppComponent, NKDatetime,DashboardComponent],
      exports: [NKDatetime],
      bootstrap:    [ AppComponent ],
      providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy },
                  { provide: APP_BASE_HREF, useValue: '<%= APP_BASE %>' },
                  HTTP_PROVIDERS,EventService,HttpClient]
    })
    export class AppModule { 
    }
  

app /base/app.routes.ts

     import { provideRouter, RouterConfig,RouterModule,Routes } from '@angular/router';
    import { ModuleWithProviders } from '@angular/core';
    import { DashboardRoutes } from '../dashboard/index';

export const routes: RouterConfig = [
    ...DashboardRoutes
];

export const appRoutingProviders: any[] = [];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
  

app /base /main.ts

 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
  

app/dashboard/dashboard.component.html

 <h1>Hello World Welcome</h1>
  

app / dashboard/dashboard.component.ts

 import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { TopNavComponent } from '../shared/topnav/topnav';
import { SidebarComponent } from '../shared/sidebar/sidebar';
import { RightNavComponent } from '../shared/rightnav/rightnav';

@Component({
    moduleId: module.id,
    selector: 'dashboard-app',
    templateUrl: 'dashboard.component.html',
    directives: [ ROUTER_DIRECTIVES, TopNavComponent, SidebarComponent, RightNavComponent ]
})

export class DashboardComponent {}
  

app / dashboard/dashboard.routes.ts

 import { DashboardComponent } from './index';
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { GridViewComponent } from './ gridview/gridview.component'

 const appRoutes: Routes = [
  { 
      path: 'dashboard', 
      component: DashboardComponent
  }

];

export const appRoutingProviders: any[] = [

];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
  

app / dashboard/index.ts

/** * Этот бочкообразный файл обеспечивает экспорт для отложенного загруженного компонента DashboardComponent. */

 export * from './dashboard.component';
export * from './dashboard.routes';
  

Вы должны импортировать свои маршруты в app.module.ts следующим образом. Я считаю, что вам также необходимо указать пустой маршрут. В этом случае home — это мой маршрут по умолчанию, вы бы изменили его на панель мониторинга, если это то, что у вас по умолчанию.

 export const appRoutes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full'  },
    { path: 'home',  loadChildren: './app/home/home.module#HomeModule' },
];

export const appRoutingProviders: any[] = [];
  

My app.module.ts (обратите внимание на импорт RouterModule.forRoot(appRoutes)):

 @NgModule({
    imports: [ BrowserModule, RouterModule.forRoot(appRoutes), SharedModule.forRoot() ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ],
    providers: [ appRoutingProviders ]

}) 

export class AppModule {}