У меня проблемы с настройкой маршрутизации Angular 2. Я использую Angular 2 и Webpack. В Angular 2, я заметил, что у них есть веб-пакеты, генерирующие их HTML и их ссылки, но я надеялся, что мне не нужно будет упаковывать мои HTML-файлы.

Вот мой app.routes.ts ...

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

import { HomeComponent } from "./home/home.component";
import { ScheduleComponent } from "./schedule/schedule.component";
import { PageNotFoundComponent } from "./PageNotFoundComponent";

const appRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'schedule', component: ScheduleComponent },
    { path: '**', component: PageNotFoundComponent }
];

export const appRoutingProviders: any[] = [

];

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

Вот мой код @NgModule ...

@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        FormsModule,
        routing ],
    declarations: [
        AppComponent,
        AppBanner,
        AppLogin,
        HomeComponent,
        ScheduleComponent,
        PageNotFoundComponent
    ],
    bootstrap: [ AppComponent ],
    providers: [
        ApplicationState,
        appRoutingProviders
    ]
})
export class AppModule { }

Вот составляющая графика ...

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

@Component({
    template: `
    <div>Schedule</div>
    `
})
export class ScheduleComponent {

}

И вот мой HTML, где я пытался добавить свои маршруты ...

<a [routerLink]=" ['/schedule'] ">Schedule</a>

Я знаю, что это много кода, но вот моя сборка веб-пакета. Как видите, задача веб-пакета не касается моих HTML-страниц, поэтому этот код веб-пакета может быть неактуален ...

module.exports = {
    entry: {
        'polyfills': __dirname + '/src/polyfills.ts',
        'vendor': __dirname + '/src/vendor.ts',
        'app': __dirname + '/src/main.ts'
    },

    output: {
        filename: '[name].bundle.js',
        path: __dirname + '/src/bundle/',
        publicPath: '/',
        sourceMapFilename: __dirname + '/src/bundle/[name].bundle.map.js'
    },

    resolve: {
        extensions: ['', '.ts', '.js'],
        alias: { 'rxjs': 'rxjs-es' }
    },

    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader']
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            },
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file?name=/fonts/[name].[ext]" },
            { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000&name=/fonts/[name].[ext]" },
            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream&name=/fonts/[name].[ext]" },
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml&name=/fonts/[name].[ext]" }
        ]
    },

    plugins: [
        new ExtractTextPlugin('css/[name].css')
    ]
}

К сожалению, когда я нажимаю на ссылку Расписание, я просто получаю сообщение об ошибке. Вот подробная информация об ошибке из зоны ...

Unhandled Promise rejection: no elements in sequence ; Zone: angular ;
Task: Promise.then ; Value: Error: no elements in sequence(…)
EmptyError: no elements in sequence

Какие-нибудь советы? В чем здесь проблема?