angular.io Lazy loading modules with the Router's live example add path repeatedly when refresh page.

When I follow ADVANCED DOCUMENTATION Lazy loading modules with the Router chapter, download live example code and run it locally.

Open browser visit http://localhost:3000 can successfully redirect to http://localhost:3000/contact, but when refresh page an additional /contact will add to url, it become http://localhost:3000/contact/contact. Now, if refresh page again, some errors show in the console.

Oct 28 '16 09:10 sdhhqb

I just find out this issue may caused by the <base> element in index.html.

After change index.html from

<!DOCTYPE html>
<html>
<head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    ...

to

<!DOCTYPE html>
<html>
<head>
    <base href="/">
    ...

everything is just fine.

Oct 28 '16 09:10 sdhhqb

@sdhhqb, I had a similar issue and defined the base ref within app.module.ts.

Here is what I imported into app.module.ts


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
/** Define the application base ref in the module instead of index.html */
import {APP_BASE_HREF} from '@angular/common';

import { AppComponent } from './app.component';
import { TitleComponent } from './components/title/title.component';

import { HighlightDirective } from './highlight.directive';

import { UserService } from './user.service';

/** Feature Modules */
import { ContactModule } from './contact/contact.module';

/** Routing Module */
import { AppRoutingModule } from './app-routing.module';

@NgModule({
    imports: [BrowserModule, ContactModule, AppRoutingModule],
    declarations: [AppComponent, TitleComponent, HighlightDirective],
    bootstrap: [AppComponent],
    providers: [{ provide: APP_BASE_HREF, useValue: '/' }, UserService]
})

export class AppModule { }

Not sure if this is the correct way to do this, but it worked for me.

Oct 29 '16 14:10 rdelvallej32