Маршруты При Импорте Не Работают

В настоящее время я пытаюсь добавить маршрутизацию в свой проект Angular 2. Все компоненты работают, но когда я добавляю ‘appRoutes’ к моему импорту в приложении.модуль.ts, ошибка бросается говоря

Uncought TypeError: не удается установить свойство ‘stack’ неопределенного

Вот мой код:

приложение.модуль.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { appRoutes } from './app.router';
import { AppComponent } from './app.component';
import { NavigationComponent } from './navigation/navigation.component';
import { AboutComponent } from './about/about.component';
import { ResumeComponent } from './resume/resume.component';
import { WorkComponent } from './work/work.component';
import { BlogComponent } from './blog/blog.component';
import { HomeComponent } from './home/home.component';



@NgModule({     
declarations: [
AppComponent,
NavigationComponent,
AboutComponent,
ResumeComponent,
WorkComponent,
BlogComponent,
HomeComponent
],
imports: [
appRoutes,
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent, NavigationComponent, AboutComponent,
            ResumeComponent, WorkComponent, BlogComponent, HomeComponent]
})
export class AppModule { }

приложение.обращать в бегство.ts

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

import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { ResumeComponent } from './resume/resume.component';
import { WorkComponent } from './work/work.component';
import { BlogComponent } from './blog/blog.component';
import { HomeComponent } from './home/home.component';

export const appRoutes: Routes =[
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'about', component: AboutComponent },
  { path: 'resume', component: ResumeComponent },
  { path: 'work', component: WorkComponent },
  { path: 'blog', component: BlogComponent },
  { path: 'home', component: HomeComponent }
];

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

Любая помощь будет оценена. Страница работает до тех пор, пока я не добавлю appRoutesимпорт, затем он просто сидит на загрузке…

2 ответа

  1. Вы не должны нуждаться в ModuleWithProviders. Удалить это из:

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

    т. е.

    export const routes: RouterModule.forRoot(appRoutes); 
    

    и посмотреть, если это работает. (Также очистите путем удаления импорта).

  2. Я смог найти решение своей проблемы. Я удалил все компоненты из bootstrap: […] кроме AppComponent, но сохранил другие компоненты в объявлениях, и это исправило проблему.