构建后无法在本地执行 Angular 应用程序 [英] Not able to execute Angular application locally after build
问题描述
我正在使用 Angular 的 CLI 工具.当我执行
I'm toying with the CLI tools for Angular. When I execute
ng 服务
应用程序上线并且运行良好.现在，我想将它分发到网络并尝试通过
the application comes to live and is working all great. Now, I'd like to distribute it to the wide web and attempted building it by
ng build --verbose
ng build --verbose
这似乎有效，因为我没有看到任何错误或警告.但是，当我进入创建的 dist 目录并在 index.html 上执行 FF 时，我到达了一个空白页面.
which seems to have worked as I see no errors nor warnings. However, as I enter the created dist directory and execute FF on index.html, I arrive at a blank page.
检查源代码，我看到包含的包在那里，但是作为我的 Angular 应用程序入口点的标记 app-root 没有呈现给任何东西.包含的包列表如下(我尽量保持默认和标准):
Checking the source, I see that the included bundles are there but that the tag app-root that is the entry point of my Angular application isn't rendered to anything. The list of bundles included is as follows (I try to keep it as default and standard as possible):
<body style="padding-top: 70px;">
<app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="scripts.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
我假设在 main.bundle.js 中呈现内容所需的所有魔法都在 inline.bundle.js 和/或任何包括其他捆绑包.是吗?
I'm assuming that all the magic required to render the stuff in main.bundle.js is provided in inline.bundle.js and/or any of the other bundles included. Is it so?
因为我在控制台中没有看到任何错误，所以从 src 目录中提供它可以工作等等.我猜我忘记了一些需要打开或注释掉的相当简单的东西.谷歌搜索这样一个模糊的问题会导致一堆无用的信息.
Since I see no errors in the console, serving it form the src directory works etc. I'm guessing I've forgotten something fairly simple that needs to be switched on or commented out or something. Googling such a vague question resulted in a bunch of useless info.
我该怎么办?如何更深入地排除故障?
What can I do about it? How can I troubleshoot it deeper?
推荐答案
我使用这个脚本代替 index.html 中的 <base href="/"> 打开 dist 目录下的文件.我不确定它是否适合您，但可能会有所帮助.
I use this script instead of <base href="/"> in index.html to open file in dist directory. I'm not sure it may be the solution for you but may help.
<script>
document.write('<base href="' + String(document.location).replace('index.html','') + '">')
</script>
这篇关于构建后无法在本地执行 Angular 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
