时间戳

首页 > 解决方案 > Angular 404（未找到）- 无法从 Angular 应用程序中的“index.html”页面加载 Javascript 文件

javascript - Angular 404（未找到）- 无法从 Angular 应用程序中的“index.html”页面加载 Javascript 文件

问题描述

我正在尝试在我的 Angular 9 应用程序中设置 GDS 工具包，如下所述：

https://github.com/alphagov/govuk-frontend/blob/master/docs/installation/installing-from-dist.md

下面是我的项目结构：

我的 Angular 9 应用程序的目录结构

我已将 angular.json 更新如下：

   "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"
            ]

Angular 应用程序编译并启动正常，以确认对资产、css 和 js 文件的 angular.json 引用是正确的。

下面是我的 index.html html 文件：

<!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>

我以为脚本源中指定的路径是对的，所以不知道404的原因。

我使用 chrome 进行开发，但是当我尝试在 Firefox 中访问该页面时，在 Firefox 开发控制台中出现以下错误：

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)

经过一番研究，我看到了一个帖子，上面写着 script 标签中的特定类型 type="application/javascript" 。但这没有用。

我在 safari web 控制台中也遇到了以下错误：

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.

但是，我的问题是 index.html 没有成功加载。

It gives the :

net::ERR_ABORTED 404 (Not Found) loading govuk-frontend-3.6.0.min.js in Angular App in chrome web console

在此处输入图像描述

网络控制台 2

任何帮助将不胜感激。

标签： javascripthtmlcssangulartypescript

解决方案

我的解决方案是在 Angular 项目中采用以下文件夹结构。

  • src -> 应用程序
  • src -> 资产 -> 字体
  • src -> 资产 -> 图像
  • src -> 资产 -> javascript
  • src -> 资产 -> 样式表

然后，更新 angular.json 如下：

 "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"
            ]
          },

然后，我的 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 加载成功，开箱即用。

贾纳卡，感谢您的回复。您的就足以设置自定义 JS 文件。

推荐阅读