Menu
I want to build my angular project and generate a ZIP file containing it to send it via email and I want the person who receives it to be able to open it on his Desktop clicking index.html file.
I changed the baseUrl to ./ or to document.location but I'm getting the following error: "Unhandled Navigation Error"
Does anyone have any hint about how to fix this?
912
You don't need a server-side engine to dynamically compose application pages because Angular does that on the client-side. If the application 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.
Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client. This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.
You can run angular app on double click on index.html file. Just add below code in your app.module.ts
note that : remove baseUrl = ./ from index.html file
//in App.module.ts :
//import these packages
import { APP_BASE_HREF, LocationStrategy, HashLocationStrategy } from '@angular/common';
// add these packages into providers as below :
@NgModule({
imports:
[
.....
],
declarations:
[
....
],
providers:
[
....
{ provide: APP_BASE_HREF, useValue: '/' },
{ provide: LocationStrategy, useClass: HashLocationStrategy },
....
]
....
})
export class Appmodule{}Now execute : npm run build and double click the index.html file from dist folder.
You app should run.
144
This is what I have done for Angular 8.
After following the steps provided by @programoholic go to ./dist/index.html and remove type="module" attribute from all of the script tags.
Below is my working index.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>StartApp</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script src="runtime-es2015.js"></script>
<script src="runtime-es5.js" nomodule defer></script>
<script src="polyfills-es5.js" nomodule defer></script>
<script src="polyfills-es2015.js"></script>
<script src="styles-es2015.js"></script>
<script src="styles-es5.js" nomodule defer></script>
<script src="vendor-es2015.js"></script>
<script src="vendor-es5.js" nomodule defer></script>
<script src="main-es2015.js"></script>
<script src="main-es5.js" nomodule defer></script>
</body>
</html>
Hope it helps
29
In Angular 9 (not sure about versions between Angular 2 - 9, should work the same), you don't need to change the LocationStrategy to render the index.html from the dist/ directory.
Instead, you have to just specify the base url as ./ to make it accessible as a file path.
Run an ng build --prod --base-href ./ in the app route directory and generate the dist/ files
Then, like @zaki-mohammed has stated, remove the type="module" from the scripts. I removed the nomodule defer too
Ex:
<script src="runtime-es2015.1eba213af0b233498d9d.js" type="module"></script>
<script src="runtime-es5.1eba213af0b233498d9d.js" nomodule defer></script>
should be changed to,
<script src="runtime-es2015.1eba213af0b233498d9d.js"></script>
<script src="runtime-es5.1eba213af0b233498d9d.js"></script>
Now the index.html file should render in a browser.
Also follow, https://stackoverflow.com/a/61220058/4294275
36
In addition to @programoholic's answere. If you don't want to remove <base> element manually from index.html you can build using this:
ng build --base-href= --prod
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
