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

问题描述

我在使用 Angular 2 路由时遇到问题.我正在使用 Angular 2 和 Webpack.在 Angular 2 webpack starter 中，我注意到他们让 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 { }

这是时间表组件...

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

不幸的是，当我点击 Schedule 链接时，我只是收到一个错误.这是来自区域的详细错误信息...

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屋！