antonybudianto / angular-starter

:star: Gulp Angular Starter using TypeScript (Updated to 4.4.3)

Home Page:https://antonybudianto.github.io/angular-starter/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

second level path routing fails

kennyhyun opened this issue · comments

Issue Overview

second level routing (like second/home) fails with following error

http://localhost:3000/second/tmp/app/bundle.js Failed to load resource: the server responded with a status of 404 (Not Found)

Issue Description

when I add a second level routing like following

export const HomeRoutes: RouterConfig = [
  { path: '',  component: HomeComponent },
  { path: 'second',  component: HomeComponent },
  { path: 'second/home',  component: HomeComponent }
];

and open second/home then fails with following error. (first level /second is okay)

http://localhost:3000/second/tmp/app/bundle.js Failed to load resource: the server responded with a status of 404 (Not Found)

Reproducables

I think it is produced only in local development env.
checked occurring with gulp and gulp serve-build.

Information

Operating System Windows
Node version 4.4.5
NPM Version 2.15.5
Environment Chrome

since paths starting with / is banned,
https://github.com/angular/vladivostok/blob/master/CHANGELOG.md#breaking-changes

router get the last name from the path and find files relative to the path.

editing base tag in the index.html resolved it .

<base href="/">

BTW,
when I was googling and search for Angular2 source, I found those comments in @angular/common/src/location_strategy.js

so I added {provide: APP_BASE_HREF, useValue: '/'} in bootstrap but didn't change anything:(

/**
 * The `APP_BASE_HREF` token represents the base href to be used with the
 * {@link PathLocationStrategy}.
 *
 * If you're using {@link PathLocationStrategy}, you must provide a provider to a string
 * representing the URL prefix that should be preserved when generating and recognizing
 * URLs.
 *
 * ### Example
 *
 * ```
 * import {Component} from '@angular/core';
 * import {ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig} from '@angular/router';
 * import {APP_BASE_HREF} from '@angular/common';
 *
 * @Component({directives: [ROUTER_DIRECTIVES]})
 * @RouteConfig([
 *  {...},
 * ])
 * class AppCmp {
 *   // ...
 * }
 *
 * bootstrap(AppCmp, [
 *   ROUTER_PROVIDERS,
 *   {provide: APP_BASE_HREF, useValue: '/my/app'}
 * ]);
 * ```
 * @stable
 */ 

Since the base tag in the index.html needs to be customised,
and changing routing after first page loaded is not the case,
I think this is a problem.
I am closing issue but please give a thought of changing '.' into '/'.

I use '.' as a workaround for github page (maybe fixed in new router now...), I'll update it
Thanks for the catch! @kennyhyun