通常,我开发的所有Web应用程序都通过启动index.html在文件系统上的浏览器上运行,然后通过嵌入式脚本和CSS链接获取所有其他文件。
但是,如果我尝试对由angular生成的构建应用程序执行相同的操作
ng build --prod --base-href ./
要么
ng build --prod --aot --base-href ./
该应用程序根本无法运行。
有趣的是,没有控制台错误,浏览器甚至下载了所有必需的文件,如下所示。
为什么会这样?有解决方案吗?
编辑:我知道普通的角度应用程序是如何工作的。我只是想知道尽管有所有必需的文件,却为何无法以传统方式将应用程序加载到浏览器中的原因是什么?
答案 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
我建议创建一个空的测试项目,然后尝试进行相同的操作,这样您就可以查明是什么导致了项目的异常。