1

Background

Angular App was created using angular-cli@1.0.0-rc.0 Angular App contains a NavbarComponent that displays two menu items "Home" and "About". Angular App uses the Angular Router and a NavbarComponent to allow the user to navigate to two component views: HomeComponent View and AboutComponent View. The base route for the app is set inside index.html as . A Router Configuration File is defined and defines two routes, one route as the HomeComponent default route with a path: '' and one route as the AboutComponent Path with a path: 'about'. The ConfiguredRouterModule is exported from app.routing.ts The ConfiguredRouterModule is imported into app.module.ts. A directive is defined inside the AppComponent HTML Template. A routerLink directive is defined for each menu item link inside the NavbarComponent. To build the project I use the angular-cli command "ng build --prod". I copy files from "dist" folder to destination web server folder. Note that the destination web server folder is a sub folder under the root folder on the web server. Example "root/projects/router" and not just the "root" folder

NavbarComponent Menu Item Links correctly render Component Views

When a user clicks on either or the NavbarComponent menu item links "Home" or "About" the correct Component View displays inside the inside the AppComponent HTML Template

Issue

When a user manually changes the URL in the browser from "website/projects/router/" to "website/projects/router/about" instead of the AboutComponent displaying, a 404 Page Not Found Error is displayed

After I execute the command ng build --prod I have to change the <base href="value"> from <base href="/"> to <base href="/projects/router/">.

Note that if I try to build the project using the angular-cli command ng build --prod --base-href projects/router, after executing command if I open the index.html file inside the "dist" folder I see that angular-cli changed the <base href="value"> from <base href="/" to <base href="C:/Program Files/Git/projects/router/>

My Questions

How do I build the Angular Project so that the <base href="value"> is set correctly? More importantly why is the Angular App giving a 404 Error if a user manually changes the URL in the browser to a valid router route path? Example "website/projects/router/about"

  • Please consider to provide a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) if possible. This way, it's more likely volunteers on SO can help you. – lealceldeiro Feb 28 '17 at 19:21
  • 1
    Possible duplicate of [Angular 2.0 router not working on reloading the browser](https://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser) – Frank Nguyen May 24 '17 at 08:30

0 Answers0