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

Question

我正在尝试在我的 angular 9 应用程序中设置 GDS 工具包，如此处定义：

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

下面是我的项目结构：

我已经更新了 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 应用程序编译并启动确定 angular.json 对资产、css 和 js 文件的引用是正确的。

下面是我的 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)

经过一些研究，我看到了一篇文章，在脚本标签中说到特定类型 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

任何帮助将不胜感激。

Answer 1

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

来源 -> 应用程序
src -> 资产 -> fonts
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 成功加载开箱即用。

Janaka，感谢您的回复。 您的文件足以设置自定义 JS 文件。

Answer 2

这是我在StackOverflow中的第一个答案你为什么不尝试使用单独的“JS”文件

您可以在资产文件中创建一个单独的“JS”文件。

索引.js

    function myTest() {
      alert('Welcome to custom js');
    }

.ts

....
declare const myTest: any;
....
export class AppComponent {
  onClick() {
    myTest();
  }
}

.html

<div style="text-align:center">
  <h1>{{ title }}</h1>
  <button (click)="onClick()" class="btn btn-primary">TestMe</button>
</div>

笔记

首先安装“ npm安装jquery ”，“ npm安装引导程序”
然后在angular.json中键入单独的 js 文件（“src/assets/index.js”）的位置
```
 "scripts": [ "src/assets/index.js" ]
```
我希望你这会帮助你！

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

问题描述

2 个解决方案

解决方案1
1 2020-04-23 08:07:36

解决方案2
0 2020-04-22 04:31:20

笔记

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

问题描述

2 个解决方案

解决方案1 1 2020-04-23 08:07:36

解决方案2 0 2020-04-22 04:31:20

笔记

解决方案1
1 2020-04-23 08:07:36

解决方案2
0 2020-04-22 04:31:20