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?
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.
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
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
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
