在 file:/// 上本地运行 Angular 7 项目，无需服务器

Question

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

我将 baseUrl 更改为 ./ 或 document.location，但收到以下错误：“未处理的导航错误”

有人对如何解决这个问题有任何提示吗？

Answer 1

您可以通过双击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

并双击

index.html

文件夹中的

dist

文件。您的应用程序应该运行。

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

在 Angular 9 中（不确定 Angular 2 - 9 之间的版本，应该工作相同），您不需要更改

LocationStrategy

即可从 dist/ 目录渲染

index.html

。

相反，您只需将

base url

指定为

./

即可将其作为文件路径进行访问。

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

然后，就像 @zaki-mohammed 所说，从

type="module"

中删除

script

。我也删除了

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 文件应该在浏览器中呈现。

另请关注，https://stackoverflow.com/a/61220058/4294275

Answer 4

除了@programoholic的回答。如果您不想从

<base>

中手动删除

index.html

元素，您可以使用以下命令进行构建：

ng build --base-href= --prod

Answer 5

我曾经使用过上述方法，效果很好。从 Angular 17 开始，它不再适合我了。文件已加载，但我在控制台中看到以下错误消息：

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

在 file:/// 上本地运行 Angular 7 项目，无需服务器

问题描述投票：0回答：5

5个回答

最新问题

在 file:/// 上本地运行 Angular 7 项目，无需服务器

问题描述 投票：0回答：5

5个回答

最新问题

问题描述投票：0回答：5