0

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:

Directory structure of my angular 9 application

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

enter image description here

web console 2

Any help will be appreciated.

Mega
  • 1,304
  • 5
  • 22
  • 37

2 Answers2

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.

Mega
  • 1,304
  • 5
  • 22
  • 37
0

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('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>

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!