Javascript 文件未正确加载

Question

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

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

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

我的问题出在 angular2 源代码中

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

不幸的是，index.html 中的<script src="assets/js/main.js"></script> 似乎没有正确添加。虽然控制台中没有错误，但左侧菜单已损坏。我知道当 ma​​in.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 的网站。无论如何，这也可能对您有用。