Angular - Unhandled Navigation Error after building

user_5806647 0
Viewed 10881

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:

enter image description here

Hope to have explained my question well. Thanks in advance.

angular2-routing angular build
5 Answers

Angular routing works if you use hash routing and define your base href as follows in your index.html.

<base href="#">
user_2468730

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.

user_23424140

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.

user_20687660

app/module.ts:

import { LocationStrategy, HashLocationStrategy} from '@angular/common';


@NgModule({
 ...
 ],
 providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }]
})
user_90770130

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.

user_55414340
Related