I have built a simple angular app with 2 routes through the following command:
ng build --aot --prod --base-href ./
Then i open the index.html file located in the dist folder and the app runs but the the routes don't work and i get the following warning on console:
Hope to have explained my question well. Thanks in advance.
Angular routing works if you use hash routing and define your base href as follows in your index.html.
<base href="#">
Using Angular routing engine will force you to host your app in some server (e.g. IIS, NodeJS etc.)
A simple angular app without routes can run without hosting it on a server.
From Angular docs:
Angular apps are perfect candidates for serving with a simple static HTML server. You don't need a server-side engine to dynamically compose application pages because Angular does that on the client-side.
If the app uses the Angular router, you must configure the server to return the application's host page (index.html) when asked for a file that it does not have.
In my case I would get:
Unhandled Navigation Error: main.af3eff424835a3d5642f.js:1
Because my base url was set to https://
<base href="https://example.com" />
But I was loading the site over http://
http://example.com
Solution was to either use the https:// url OR change the base url to allow access via http.
app/module.ts:
import { LocationStrategy, HashLocationStrategy} from '@angular/common';
@NgModule({
...
],
providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }]
})
As benshabatnoam said, Using Angular routing engine will force you to host your app in some server.
Until deploying the App, only in a demo case, you can set RouterModule.forRoot(routes, { useHash: true }) and use hash for routing to avoid hosting your App in a server.
