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

时间:2019-06-30 17:52:22

标签: javascript angular web-applications angular-cli

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

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

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

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

browsers-network-tab

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

2 个答案:

答案 0 :(得分:0)

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

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

ng serve

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

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

答案 1 :(得分:0)

这是因为在构建角度应用程序时,是为基本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

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