Question

我想构建我的角度项目，并生成一个包含该项目的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

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

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所说的那样，从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

在没有服务器的情况下在文件：///本地运行Angular 7项目

4 个答案: