运行 Angular 7 个本地项目在 file:/// 上，没有服务器

Question

我想构建我的 angular 项目并生成一个包含它的 ZIP 文件以通过电子邮件发送，我希望接收它的人能够在他的桌面上单击 index.html 文件。

我将 baseUrl 更改为 ./ 或 document.location，但出现以下错误："Unhandled Navigation Error"

有没有人知道如何解决这个问题？

Answer 1

您可以运行 angular 应用双击 index.html 文件。只需在 app.module.ts

中添加以下代码

请注意：从 index.html 文件中删除 baseUrl = ./

//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{}

现在执行：npm run build 并双击 dist 文件夹中的 index.html 文件。您的应用应该运行.

Answer 2

这就是我为 Angular 8.

所做的

按照@programoholic 提供的步骤，转到 ./dist/index.html 并从所有脚本标签中删除 type="module" 属性。

下面是我的工作index.html文件

<!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>

希望对您有所帮助

Answer 3

除了@programoholic 的回答。如果您不想从 index.html 中手动删除 <base> 元素，您可以使用以下方法构建：

ng build --base-href= --prod

Answer 4

在 Angular 9 中（不确定 Angular 2 - 9 之间的版本，应该工作相同），您不需要更改 LocationStrategy 来呈现 index.html 来自 dist/ 目录。

相反，您只需将 base url 指定为 ./ 即可将其作为文件路径访问。

运行应用程序路径目录中的 ng build --prod --base-href ./ 并生成 dist/ 文件

然后，就像@zaki-mohammed 所说的那样，从 script 中删除 type="module"。我也删除了 nomodule defer

例如：

<script src="runtime-es2015.1eba213af0b233498d9d.js" type="module"></script>
<script src="runtime-es5.1eba213af0b233498d9d.js" nomodule defer></script>

应该改为，

<script src="runtime-es2015.1eba213af0b233498d9d.js"></script>
<script src="runtime-es5.1eba213af0b233498d9d.js"></script>

现在 index.html 文件应该在浏览器中呈现。

也关注，

运行 Angular 7 个本地项目在 file:/// 上，没有服务器

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

routing

angular

angular7