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

user_10899511 0
Viewed 7143

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?

angular7 angular routing
4 Answers

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.

user_81754670

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

user_49890540

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.

  1. Run an ng build --prod --base-href ./ in the app route directory and generate the dist/ files

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

user_42942750

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
user_13568220
Related