admin管理员组

文章数量:1023849

I am trying to setup the GDS Toolkit in my angular 9 application as defined here:

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

I am trying to setup the GDS Toolkit in my angular 9 application as defined here:

https://github./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 piled 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.

  • javascript
  • html
  • css
  • angular
  • typescript
Share Improve this question edited Apr 14, 2020 at 22:06 Mega asked Apr 14, 2020 at 21:05 MegaMega 1,3447 gold badges22 silver badges43 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 2

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.

This is my first answer in StackOverflow Why don't you try to use separate "JS" file

  1. You can create a separate "JS" file in assets file.

index.js

    function myTest() {
      alert('Wele 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>

Note

  • Firstly install "npm install jquery" , "npm install bootstrap"

  • Then type the location of separate js file ("src/assets/index.js") in angular.json 

      "scripts": [
     "src/assets/index.js"
   ]

    I hope you this will help to you!

I am trying to setup the GDS Toolkit in my angular 9 application as defined here:

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

I am trying to setup the GDS Toolkit in my angular 9 application as defined here:

https://github./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 piled 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.

  • javascript
  • html
  • css
  • angular
  • typescript
Share Improve this question edited Apr 14, 2020 at 22:06 Mega asked Apr 14, 2020 at 21:05 MegaMega 1,3447 gold badges22 silver badges43 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 2

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.

This is my first answer in StackOverflow Why don't you try to use separate "JS" file

  1. You can create a separate "JS" file in assets file.

index.js

    function myTest() {
      alert('Wele 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>

Note

  • Firstly install "npm install jquery" , "npm install bootstrap"

  • Then type the location of separate js file ("src/assets/index.js") in angular.json 

      "scripts": [
     "src/assets/index.js"
   ]

    I hope you this will help to you!

本文标签：

版权声明：本文标题：Angular 404 (Not Found)- Cannot Load Javascript file from &#39;index.html&#39; page in Angular Application - Stack Overf 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745493131a2153051.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。