Question

通常，我开发的所有Web应用程序都通过启动index.html在文件系统上的浏览器上运行，然后通过嵌入式脚本和CSS链接获取所有其他文件。

但是，如果我尝试对由angular生成的构建应用程序执行相同的操作 ng build --prod --base-href ./ 要么 ng build --prod --aot --base-href ./该应用程序根本无法运行。

有趣的是，没有控制台错误，浏览器甚至下载了所有必需的文件，如下所示。

为什么会这样？有解决方案吗？

编辑：我知道普通的角度应用程序是如何工作的。我只是想知道尽管有所有必需的文件，却为何无法以传统方式将应用程序加载到浏览器中的原因是什么？

Answer 1

ng build命令可构建Angular应用程序，但不会启动本地开发Web服务器来运行该应用程序。

要构建和启动您需要运行的应用，

ng serve

然后，您可以在http://localhost:4200

上查看在浏览器中运行的应用程序

Answer 2

这是因为在构建角度应用程序时，是为基本href生成的。所有资源等都是相对于该基本href的。

如果您使用角度分布文件的确切位置编辑构建的index.html文件的基本href，它将起作用。

例如，我这样构建我的应用程序：

ng build --prod --base-href /test/

已建立的索引文件：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Testtalha</title>
  <base href="/test/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.3ff695c00d717f2d2a11.css"></head>
<body>
  <app-root></app-root>
<script type="text/javascript" src="runtime.26209474bfa8dc87a77c.js"></script><script type="text/javascript" src="es2015-polyfills.bda95d5896422d031328.js" nomodule></script><script type="text/javascript" src="polyfills.8bbb231b43165d65d357.js"></script><script type="text/javascript" src="main.4eae417d78b7086fd00a.js"></script></body>
</html>

当我按照说明更新基本href时，它可以在本地浏览器上运行。如下所示：

<base href="./">

编辑：我刚刚意识到我把你的问题弄错了。如果您的问题是与没有任何服务器的本地浏览器上的路由有关，请检查此答案。您需要摆脱推送状态并提供适当的基本href：https://stackoverflow.com/a/45163344/11420760

但是，如果您告诉您的应用程序甚至没有打开甚至不渲染某些内容，那么您的情况似乎有点复杂。这里有一个很长的话题，类似的讨论：https://github.com/angular/angular/issues/13948

我建议创建一个空的测试项目，然后尝试进行相同的操作，这样您就可以查明是什么导致了项目的异常。

为什么Angular 7应用程序无法在浏览器中本地运行

2 个答案: