Javascript文件未正确加载

Question

我有一个不错的html，css template（源代码here）。

我将在我的angular2应用程序中使用此模板（源代码here）。

我从this存储库（index.html）中获取了html模板。

我的问题在于angular2源代码

1. 您需要clone角度来源。
2. 运行npm install
3. 运行ng serve

不幸的是，似乎<script src="assets/js/main.js"></script>中的index.html未正确添加。虽然控制台中没有错误，但左侧菜单已损坏。我知道当 main.js 不合适时会出现此问题。

以下是正确的 html页面：



以下是角度页面（已损坏标题和菜单）：



代码相同，但我已将html模板分解为3个组件（标题，菜单和应用程序（主要内容））。

Answer 1

我没有试图找出你的CSS发生了什么，而是使用原始模板，用angular-cli将其转换为Angular 2，并修复了CSS问题。这一切现在都有效，完整的来源是https://github.com/Boyan-Kostadinov/angular2-miminium

Answer 2

当你分开index.html时，你可能也改变了一些文件路径。

相对路径将从src="assets/js/main.js"变为src="../assets/js/main.js"。

将../预先添加到路径将从当前目录退出到下一级别。正如您现在所看到的那样，浏览器正在寻找assets目录，我假设您将其划分为htmlComponents目录。

考虑使用main.js的绝对路径，至少可以诊断问题。

Answer 3

我在同一个文件中遇到了类似的问题。就我而言，我有一个分阶段开发的复杂应用程序。我将Angular种子安装在子目录中。由于我的文件结构，当我运行npm start时，启动的实时服务器具有错误的相对链接位置。例如，在下面的屏幕截图中，您会看到应用程序正在http://localhost:3000/medface/RecordWriter/styles.css处尝试查找style.css;但是，应该查看http://localhost:3000/styles.css，因为npm start创建的Web服务器的根位于/ medface / RecordWriter /。

关于你的项目。找到链接问题的关键是打开开发人员面板并检查实际的网络请求。如果您共享屏幕截图，我们可能会帮助您更深入地检查您的实例。

为我工作的内容

在我的情况下，我重新配置了我的本地Web服务器来处理Angular2文件夹中的任何未服务页面并返回索引。当我运行npm start时，我关闭打开的浏览器页面并使用我的常规Web服务器。我没有在 localhost：3000 上查看我的应用程序，而是在 localhost / medface / RecordWriter / 查看我的应用程序（相当于 localhost：80 / medface / RecordWriter ）。

我的临时方法的缺点是必须在更改出现之前刷新页面，但它会以可预测和可靠的方式加载所有资源，并允许我的Angular2代码与其他区域中的一些旧代码库一起运行。尚未转换为Angular2的网站。无论如何，这对你也有用。