Javascript Angular 404（未找到）-无法从'；index.html'；角度应用中的页面_Javascript_Html_Css_Angular_Typescript

Javascript Angular 404（未找到）-无法从'；index.html'；角度应用中的页面

javascript html css angular typescript

Javascript Angular 404（未找到）-无法从'；index.html'；角度应用中的页面,javascript,html,css,angular,typescript,Javascript,Html,Css,Angular,Typescript,我正在尝试在angular 9应用程序中设置GDS Toolkit，如下所述：以下是我的项目结构：我已将angular.json更新如下： "assets": [ "src/favicon.ico", "src/govuk/assets" ], "styles": [ "src/styles.css", "src/govuk

我正在尝试在angular 9应用程序中设置GDS Toolkit，如下所述：

以下是我的项目结构：

我已将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"
            ]

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

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

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

在做了一些研究之后，我看到了一篇帖子，在script标签中写着to specific 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

任何帮助都将不胜感激。

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

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

index.js

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

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

.ts

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

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

我希望这会对你有所帮助

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

src->app
src->assets->font
src->assets->images
src->assets->javascript
src->assets->stylesheets

然后，更新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"
            ]

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


window.GOVUKFrontend.initAll（）文件

此配置使GDS GOV.UK JS、CSS、Images和x.woff2能够立即成功加载

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