Angular 2.0.1路由器EmptyError:顺序无元素 [英] Angular 2.0.1 Router EmptyError: no elements in sequence

问题描述

我无法使Angular 2路由正常工作.我正在使用Angular 2和Webpack.在Angular 2 webpack启动程序中，我注意到他们已经通过webpack生成了它们的html及其链接，但是我希望我不必对我的html文件进行webpack.

I'm having trouble getting Angular 2 routing to work. I am using Angular 2 and Webpack. In the Angular 2 webpack starter, I noticed they had webpack generating their html and their links, but I was hoping I would not have to webpack my html files.

这是我的app.routes.ts ...

Here's my 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代码...

Here's my @NgModule code...

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

这是计划的组成部分...

Here is the schedule component...

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

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

}

这是我尝试添加路线的HTML ...

And here's my HTML where I tried to add my routes...

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

我知道这是很多代码，但是这也是我的webpack构建.如您所见，webpack任务不会触及我的HTML页面，因此此webpack代码可能无关紧要...

I know this is a lot of code, but here is my webpack build as well. As you can see, the webpack task does not touch my HTML pages, so this webpack code may be irrelevant...

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')
    ]
}

不幸的是，当我单击计划"链接时，我得到一个错误.这是来自区域的详细错误信息...

Unfortunately, when I click on the Schedule link, I just get an error. Here's the detailed error info from zone...

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

有什么秘诀吗?这是什么问题?

Any tips? What is the problem here?

推荐答案

添加pathMatch: 'full'

{ path: '', component: HomeComponent, pathMatch: 'full' },

否则两条路线

{ path: '', component: HomeComponent },
{ path: 'schedule', component: ScheduleComponent },

在路由/schedule上匹配，因为''匹配，但不消耗任何路由，然后'schedule'匹配.

match on route /schedule because '' matches, but doesn't consume anything from the route and then also 'schedule' matches.

这篇关于Angular 2.0.1路由器EmptyError:顺序无元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！