5

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.

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);

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 {

}

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

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

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?

Targaryen
  • 1,081
  • 2
  • 17
  • 30
  • No seeing any issues with Routing configuration, may be ther is issue in your schedule component, test out with a empty component and see if it stills errors out. – Madhu Ranjan Sep 27 '16 at 20:58
  • Thanks for taking a look. I added the code for the Schedule component. The component is empty other than the word "Schedule" in the template. – Targaryen Sep 27 '16 at 21:01
  • Are you using any build tool like angular-cli or are you writing your own webpack task. – Madhu Ranjan Sep 27 '16 at 21:06
  • I wrote my own webpack task. Can the Angular router not work separately from my webpacked code? Or are you saying I should look into using the angular-cli as far as my routes are involved? Do I need a build tool for the routing? – Targaryen Sep 27 '16 at 21:08
  • @MadhuRanjan I added my webpack code here as well, if that helps. As you can see, my webpack task doesn't touch my HTML pages. I would like to keep it that way, if possible. I don't like how webpack formats the HTML. – Targaryen Sep 27 '16 at 21:10
  • I would look at what @Targaryen said. I wonder if it's having trouble with the template you added. Maybe wrap the word schedule in an actual element, say `` – Dave V Sep 27 '16 at 21:12
  • @DaveV Great thought! I was really hopeful! However, I wrapped the word schedule in a `
    ` and I got the same error. I updated my code here on stackoverflow to reflect adding the div.
     – Targaryen Sep 27 '16 at 21:14

2 Answers2

14

Add pathMatch: 'full'

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

otherwise both routes

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

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

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
0

This bug is due to the last version of Angular's Router. Please remove revert back angular version or add pathMatch: 'full' to your routes.

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

You can find the issue here

Nasruddin
  • 1,640
  • 14
  • 20