Angular 2.0.1 Router EmptyError：序列中没有元素答案

【问题标题】：Angular 2.0.1 Router EmptyError: no elements in sequenceAngular 2.0.1 Router EmptyError：序列中没有元素
【发布时间】：2016-09-27 20:50:35
【问题描述】：

我无法让 Angular 2 路由正常工作。我正在使用 Angular 2 和 Webpack。在 Angular 2 webpack starter 中，我注意到他们有 webpack 生成他们的 html 和他们的链接，但我希望我不必对我的 html 文件进行 webpack。

这是我的 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>

我知道这是很多代码，但这里也是我的 webpack 构建。可以看到，webpack 任务并没有接触到我的 HTML 页面，所以这个 webpack 代码可能无关紧要……

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

有什么建议吗？这里有什么问题？

【问题讨论】：

没有看到任何路由配置问题，可能是您的计划组件有问题，用空组件测试一下，看看它是否仍然出错。
感谢您的浏览。我添加了 Schedule 组件的代码。除了模板中的“Schedule”一词，该组件为空。
你是在使用 angular-cli 之类的构建工具，还是在编写自己的 webpack 任务。
我写了自己的 webpack 任务。 Angular 路由器不能与我的 webpacked 代码分开工作吗？或者你是说我应该考虑使用 angular-cli 就我的路线而言？我需要用于路由的构建工具吗？
@MadhuRanjan 我也在这里添加了我的 webpack 代码，如果有帮助的话。如您所见，我的 webpack 任务并没有触及我的 HTML 页面。如果可能的话，我想保持这种状态。我不喜欢 webpack 如何格式化 HTML。

标签： angular webpack angular-routing

【解决方案1】：

添加pathMatch: 'full'

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

否则两条路线

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

匹配路由 /schedule，因为 '' 匹配，但不消耗路由中的任何内容，然后 'schedule' 匹配。

【讨论】：

这成功了。非常感谢。但我不知道为什么我突然收到这个错误，因为它在几天前工作正常。
@SibeeshVenu 很高兴听到它有帮助。我不知道你为什么会收到这个错误。

【解决方案2】：

这个错误是由于 Angular 路由器的最新版本造成的。请删除 revert back angular 版本或将 pathMatch: 'full' 添加到您的路线。

export const userRoutes = [
    { path: 'profile', component: ProfileComponent, pathMatch: 'full' },
    { path: 'login', component: LoginComponent, pathMatch: 'full' }
];


export const appRoutes = [
    { path: '', redirectTo: '/events', pathMatch: 'full' },
    { path: 'user', loadChildren: './user/user.module#UserModule' }
];

你可以找到问题here

【讨论】：