CODEWITHSUNDEEP
angularbuildangular2-routing
Elkin
Elkin

Reputation: 900

Angular - Unhandled Navigation Error after building

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.

Upvotes: 11

Views: 12168

Answers (5)

Pedram A. Keyvani
Pedram A. Keyvani

Reputation: 812

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.

Upvotes: 0

Jorge Mario López
Jorge Mario López

Reputation: 41

app/module.ts:

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


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

Upvotes: 4

Kim T
Kim T

Reputation: 6436

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.

Upvotes: 5

chenson42
chenson42

Reputation: 1108

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

<base href="#">

Upvotes: 15

benshabatnoam
benshabatnoam

Reputation: 7660

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.

Upvotes: 7

Related Questions