Angular 404(未找到)-无法从Angular应用程序的"index.html"页面加载Javascript文件 [英] Angular 404 (Not Found)- Cannot Load Javascript file from 'index.html' page in Angular Application
问题描述
我正在尝试按以下定义在我的angular 9应用程序中设置GDS工具包:
我更新了angular.json如下:
资产":["src/favicon.ico"，"src/govuk/assets"]，样式":["src/styles.css"，"src/govuk/stylesheets/govuk-frontend-3.6.0.min.css"，"src/govuk/stylesheets/govuk-frontend-ie8-3.6.0.min.css"]，脚本":["src/govuk/javascript/govuk-frontend-3.6.0.min.js"] Angular应用已编译并开始OK，以确认对资产，css和js文件的angular.json引用正确.
下面是我的index.html html文件:
<！doctype html>< html lang ="zh-cn" class ="govuk-template">< head></head>< body class ="govuk-template__body">< script> document.body.className =(((document.body.className)?document.body.className +'启用了js':'启用了js'));</script>< a href =#main-content" class ="govuk-skip-link">跳至主要内容</a>< header class ="govuk-header" role ="banner" data-module ="govuk-header">< div class ="govuk-header__container govuk-width-container">< div class ="govuk-header__logo">< a href ="/instructions" class ="govuk-header__link govuk-header__link--主页">< span class ="govuk-header__logotype">< img src ="../../govuk/assets/images/govuk-opengraph-image.png" xlink:href ="/instructions" class ="govuk-header__logotype-crown-fallback-image"/></span></a></div></div></header>< app-root></app-root>< script src ="govuk/javascript/govuk-frontend-3.6.0.min.js"></script>< script> window.GOVUKFrontend.initAll()</script></body></html> 我认为脚本源中指定的路径是正确的，所以我不知道404错误的原因.
我正在使用chrome进行开发，但是当我尝试在Firefox中访问该页面时，在firefox开发人员控制台中出现以下错误:
由于MIME类型("text/html")不匹配(X，因此"http://localhost:portno/govuk/javascript/govuk-frontend-3.6.0.min.js"中的资源被阻止-Content-Type-Options:nosniff) 经过一番研究，我看到了一篇文章，说在脚本标签中的特定类型为type ="application/javascript".但这是行不通的.
我在Safari Web控制台中也遇到以下错误:
拒绝执行http://localhost:portno/govuk/javascript/govuk-frontend-3.6.0.min.js作为脚本，因为给出了"X-Content-Type:nosniff"，并且其Content-类型不是脚本MIME类型. 但是，我的问题是index.html无法成功加载.
它给出了:net :: ERR_ABORTED 404(未找到)在Chrome Web控制台的Angular App中加载govuk-frontend-3.6.0.min.js
任何帮助将不胜感激.
我的解决方案是在angular项目中采用以下文件夹结构.
- src->应用程序
- src->资产->字体
- src->资产->图片
- src->资产-> javascript
- src->资产->样式表
然后，按如下所示更新angular.json:
资产":["src/favicon.ico"，"src/资产"]，样式":["src/styles.css"，"src/assets/stylesheets/govuk-frontend-3.6.0.min.css"，"src/assets/stylesheets/govuk-frontend-ie8-3.6.0.min.css"]，脚本":["src/assets/javascript/govuk-frontend-3.6.0.min.js"]}， 然后，我的index.html摘录如下:
< app-root></app-root>< script src ="/assets/javascript/govuk-frontend-3.6.0.min.js"></script>< script> window.GOVUKFrontend.initAll()</script></body></html> 此配置使GDS GOV.UK JS，CSS，图像和x.woff2加载成功即可.
Janaka，感谢您的回复.您只需设置自定义JS文件即可.
I am trying to setup the GDS Toolkit in my angular 9 application as defined here:
https://github.com/alphagov/govuk-frontend/blob/master/docs/installation/installing-from-dist.md
Below is my project structure:
I have updated the angular.json as follows:
"assets": [
"src/favicon.ico",
"src/govuk/assets"
],
"styles": [
"src/styles.css",
"src/govuk/stylesheets/govuk-frontend-3.6.0.min.css",
"src/govuk/stylesheets/govuk-frontend-ie8-3.6.0.min.css"
],
"scripts": [
"src/govuk/javascript/govuk-frontend-3.6.0.min.js"
]
The angular app compiled and started OK to confirm the angular.json references to the assets, css and js files is correct.
Below is my index.html html file:
<!doctype html>
<html lang="en" class="govuk-template ">
<head>
</head>
<body class="govuk-template__body ">
<script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
<a href="#main-content" class="govuk-skip-link">Skip to main content</a>
<header class="govuk-header " role="banner" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
<a href="/instructions" class="govuk-header__link govuk-header__link--homepage">
<span class="govuk-header__logotype">
<img src="../../govuk/assets/images/govuk-opengraph-image.png" xlink:href="/instructions" class="govuk-header__logotype-crown-fallback-image"/>
</span>
</a>
</div>
</div>
</header>
<app-root></app-root>
<script src="govuk/javascript/govuk-frontend-3.6.0.min.js"></script>
<script>window.GOVUKFrontend.initAll()</script>
</body>
</html>
I thought the path specified in script source is right, so I don't know the reason for the 404.
I was using chrome for the development, but when I tried accessing the page in Firefox, I got the following error in the firefox dev console:
The resource from "http://localhost:portno/govuk/javascript/govuk-frontend-3.6.0.min.js" was blocked due to MIME type ("text/html") mismatch (X-Content-Type-Options: nosniff)
After some researching, i saw a post that says to specific type type="application/javascript" in the script tag. But that did not work.
I got the following error in the safari web console as well:
Refused to execute http://localhost:portno/govuk/javascript/govuk-frontend-3.6.0.min.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type.
But, my problem is the index.html does not load successfully.
It gives the :
net::ERR_ABORTED 404 (Not Found) loading govuk-frontend-3.6.0.min.js in Angular App in chrome web console
Any help will be appreciated.
My solution was adopting the following folder structure in the angular project.
- src -> app
- src -> assets -> fonts
- src -> assets -> images
- src -> assets -> javascript
- src -> assets -> stylesheets
Then, updating the angular.json as follows:
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"src/assets/stylesheets/govuk-frontend-3.6.0.min.css",
"src/assets/stylesheets/govuk-frontend-ie8-3.6.0.min.css"
],
"scripts": [
"src/assets/javascript/govuk-frontend-3.6.0.min.js"
]
},
Then, my index.html excerpt is below:
<app-root> </app-root>
<script src="/assets/javascript/govuk-frontend-3.6.0.min.js"></script>
<script>window.GOVUKFrontend.initAll()</script>
</body>
</html>
This config makes the GDS GOV.UK JS, CSS, Images and x.woff2 load successfulLy out of the box.
Janaka, thanks for your response. Yours will suffice for setting up custom JS files.
这篇关于Angular 404(未找到)-无法从Angular应用程序的"index.html"页面加载Javascript文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
