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

问题

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?

回答1:

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.

回答2:

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

回答3:

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

来源：https://stackoverflow.com/questions/54143002/run-angular-7-project-locally-on-file-without-server

标签

angular

routing

angular7