Angular 404 (не найдено) - невозможно загрузить файл Javascript со страницы 'index. html' в приложении Angular - PullRequest
Новая
       0

Angular 404 (не найдено) - невозможно загрузить файл Javascript со страницы 'index. html' в приложении Angular

0 голосов
/ 15 апреля 2020

Я пытаюсь настроить GDS Toolkit в моем приложении angular 9, как указано здесь:

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

Ниже приведена структура моего проекта:

Directory structure of my angular 9 application

Я обновил 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.

Ниже приведен мой индекс. 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 dev: 

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)

После некоторых исследований я увидел сообщение, в котором говорится, что c type type = "application / javascript "в теге скрипта. Но это не сработало.

Я также получил следующую ошибку в веб-консоли Safari: 

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.

Но моя проблема с индексом. 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

enter image description here

web console 2

Любая помощь будет оценена.

Ответы [ 2 ]

0 голосов
/ 23 апреля 2020

Мое решение было использовать следующую структуру папок в проекте angular.

  • sr c -> app
  • sr c -> assets -> fonts
  • ср c -> активы -> изображения
  • ср c -> активы -> javascript
  • ср c -> активы -> таблицы стилей

Затем обновите 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"
            ]
          },

Тогда мой индекс. 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 файлов.

0 голосов
/ 22 апреля 2020

Это мой первый ответ в StackOverflow Почему бы вам не попробовать использовать отдельный файл "JS"

  1. Вы можете создать отдельный файл "JS" в файле активов.

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>

Примечание

  • Первая установка "npm установка jquery "," npm install bootstrap "

  • Затем введите местоположение отдельного файла js (" src / assets / index. js ") в angular. json 

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

    Надеюсь, вам это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...