Как правильно включать таблицы стилей и скрипты в Angular5? - PullRequest
Новая
       0

Как правильно включать таблицы стилей и скрипты в Angular5?

0 голосов
/ 08 мая 2018

Мой файл index.html: 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Code Concrete</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
    href="assets/bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" 
    href="assets/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
  <app-root></app-root>
  <button class="btn btn-md btn-primary" id="btn-test">Click this!</button>

  <!--Latest Jquery Library-->
  <script src="/node_modules/jquery/dist/jquery.min.js"></script>
  <!--Custom JS-->
  <script src="assets/js/custom.js"></script>
</body>
</html>

Стили начальной загрузки работают с этим форматом. Но HTML не может загрузить библиотеку JQuery. Я проверил путь и все, и все мне кажется правильным. Что я здесь не так делаю? И как правильно включать таблицы стилей и скрипты в angular5?

Заранее спасибо

Ответы [ 3 ]

0 голосов
/ 08 мая 2018

Вы можете добавить внешние сценарии и стили в свой проект, добавив пути к вашим сценариям и таблицам стилей в файл angular-cli.json. 

{
  "scripts": [
  "../node_modules/jquery/dist/jquery.slim.js",
  "../node_modules/popper.js/dist/umd/popper.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],
//
"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "styles.scss"
]
}
0 голосов
/ 08 мая 2018

Angular-CLI и многие другие разработчики Angular используют Webpack, чтобы связать все вместе в более эффективное производственное приложение.

Таким образом, очень распространено представить его так, чтобы файл конфигурации мог ясно видеть его.

Если вы используете angular-cli вплоть до Angular 5, он должен быть внутри, .angular-cli.json

enter image description here

Теперь я верю вУгловой 6 это angular.json файл

0 голосов
/ 08 мая 2018

Как правильно включить таблицы стилей и скрипты в angular5?

В angular (v5) правильно импортировать эти файлы, чтобы включить их в файл .angular-cli.json в массиве styles и scripts. как это - 

        "styles": [
           "assets/bower_components/bootstrap/dist/css/bootstrap.css"
        ],
        "scripts": [
          "assets/js/custom.js",
          "/node_modules/jquery/dist/jquery.min.js"
        ],

PS: в последней версии Angular (v6) .angular-cli.json файл был переименован в angular.json file

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

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

...