Run Angular 7 project locally on file:/// without server

Question

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?

Does this answer your question? [Run Angular2 as static app in browser without a server](https://stackoverflow.com/questions/40024147/run-angular2-as-static-app-in-browser-without-a-server) — Rizan Zaky, Apr 15 '20 at 01:55

score 16 · Accepted Answer · answered Jan 11 '19 at 08:56

16

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.

answered Jan 11 '19 at 08:56

programoholic

4,830
5
20
59

@user10899511 can produce sample stackblitz , what have you tries so far – programoholic Jan 11 '19 at 10:55
1

I was missing to remove the element from index.html, I did that and it's working! – user10899511 Jan 11 '19 at 10:59
@user10899511 glad that it worked!... please accept the answer :) – programoholic Jan 11 '19 at 11:00
2

mate, any chance to use router in this `index.html` mode? – godblessstrawberry May 05 '19 at 10:26
Thanks it worked with little changes for Angular 8 which I have posted in answer. – Zaki Mohammed Oct 11 '19 at 09:23

score 8 · Answer 2 · answered Oct 11 '19 at 09:22

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

Rizan Zaky · Answer 3 · 2020-04-15T02:13:11.970

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

score 2 · Answer 4 · answered Nov 10 '19 at 12:51

2

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

answered Nov 10 '19 at 12:51

greenPostIt

63
2
6

Run Angular 7 project locally on file:/// without server

4 Answers4

Linked