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"