Javascript文件未正确加载

问题描述：

我有一个很好的html，css template（源代码here）。Javascript文件未正确加载

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

我得到了this存储库（index.html）中的html模板。

我的问题是在angular2源代码

您需要clone角源。
运行npm install
运行ng serve

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

这里是正确 html页面：

这里是角页（破碎标题和菜单）：

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

检查HTML文件中第130行的HTML注释。他们没有正确关闭，所以它打破了后来的标签。 – GillesC

当你打开正在服务的js文件时，它会正确打开吗？可能与CLRF结局或charset与ng服务有所不同？ – LordNeo

把一些自定义功能，并尝试从控制台调用它 – LordNeo

答

不是试图弄清楚你的CSS发生了什么，而是将原始模板转换为Angular 2，并修正了CSS问题。现在所有的工作，并且完整的来源是在https://github.com/Boyan-Kostadinov/angular2-miminium

我用来验证你的CSS的工具是在https://jigsaw.w3.org/css-validator/#validate_by_input –

这意味着我克隆了你的代码，做了我描述的改变，现在你可以将它们合并到您的代码中。转到答案中的PR（拉取请求）链接。 –

它仍然不起作用。当我推十字时，它应该关闭左侧菜单。此外，仪表板的子菜单首先不应显示。像这个模板http://utgame.freetzi.com/ –

答

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

相对路径将从src="assets/js/main.js"变成类似src="../assets/js/main.js"的东西。

将前导../添加到路径将退出当前目录到下一级。就像你现在使用的那样，浏览器正在查找assets目录，我认为你已将它划分为htmlComponents目录。

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

答

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

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

什么工作对我来说

在我的情况，我重新配置我的本地Web服务器以处理Angular2文件夹中的任何未被供电的网页，并返回该指数来代替。当我运行npm start时，我关闭了打开的浏览器页面并使用我的常规Web服务器。而不是在本地主机观看我的申请：3000，我在查看我的申请本地主机/ medface/RecordWriter的/（其等同于本地主机：80/medface/RecordWriter的）。

我临时做法的缺点是页面必须在更改显示之前进行刷新，但它会预测并可靠地加载所有资源，并允许我的Angular2代码与其他区域中的一些旧代码库一起运行的网站未被转换为Angular2。无论如何，这可能也适用于你。

Javascript文件未正确加载

相关推荐