Я не уверен, как включить JS-файлы (поставщиков) после переключения Angular Cli с SystemJs на Webpack.
Например
Вариант А
У меня есть файлы js, которые были установлены через npm. Добавление тегов сценария к тегу заголовка таким образом не работает. И это не кажется лучшим способом.
<head>
<script src="node_modules/some_package/somejs.js">
</head>
//With systemJs I could do this
<head>
<script src="vendor/some_package/somejs.js">
</head>
Вариант Б
Включите эти файлы js как часть пакета webpack. Это похоже на то, как это, вероятно, должно быть сделано. Однако я не уверен, как это сделать, поскольку весь код webpack, кажется, скрыт за пакетом узла angular-cli-webpack. Я подумал, может быть, есть еще одна конфигурация веб-пакета, к которой у нас может быть доступ. Но я не уверен, поскольку я не видел его при создании нового проекта angular-cli-webpack.
Больше информации:
Файлы js, которые я пытаюсь включить, должны быть включены до проекта Angular. Например, jQuery и сторонняя библиотека js, которая на самом деле не настроена для загрузки модуля или машинописного текста.
Ссылки https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md https://github.com/angular/angular-cli/tree/webpack
источник
Ответы:
Последний раз тестировался с использованием angular-cli 7.xx с Angular 7.xx
Это можно сделать с помощью
scripts:[]in.angular-cli.json.{ "project": { "version": "1.0.0", "name": "my-project" }, "apps": [ { "root": "src", "outDir": "dist", "assets": ["assets"], "index": "index.html", "main": "main.ts", "polyfills": "polyfills.ts", "test": "test.ts", "tsconfig": "tsconfig.json", "prefix": "app", "mobile": false, "styles": [ "styles.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.js" ], "environments": { "source": "environments/environment.ts", "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ], "addons": [], "packages": [], "e2e": { "protractor": { "config": "./protractor.conf.js" } }, "test": { "karma": { "config": "./karma.conf.js" } }, "defaults": { "styleExt": "css", "prefixInterfaces": false } }Примечание. Как указано в документации при установке глобальной библиотеки: если вы измените значение своего
styles(илиscripts!) Свойства, то:.. чтобы увидеть скрипты, выполняемые в ** глобальном контексте через
scripts.bundle.jsфайл.Примечание: как описано в комментариях ниже. Библиотеки JS, которые поддерживают модули UMD через импорт es6, такие как jQuery, также могут быть импортированы в ваши файлы машинописных текстов с использованием синтаксиса импорта es6. Например:
import $ from 'jquery';.источник
src/polyfills.ts(по состоянию на бета-версию 31)Есть небольшая разница в использовании
scripts:[]и добавлении чего-либо в<head>with<script>. Скрипты изscripts:[]get добавляются в тот,scripts.bundle.jsкоторый всегда загружается в теге body и, таким образом, будет загружаться ПОСЛЕ скриптов в<head>. Таким образом, если порядок загрузки скриптов имеет значение (например, вам нужно загрузить глобальный полифилл), тогда ваш единственный вариант - вручную скопировать скрипты в папку (например, с помощью скрипта npm) и добавить эту папку как актив. в.angular-cli.json.Поэтому, если вы действительно зависите от того, что что-то загружается до самого angular ( вариант A ), вам нужно вручную скопировать его в папку, которая будет включена в сборку angular, а затем вы можете загрузить это вручную с помощью
<script>in<head>.Таким образом, для достижения варианта а вам необходимо:
vendorпапку вsrc/.angular-cli.json:"assets": [ "assets", "favicon.ico", "vendor" ]скопируйте свой скрипт поставщика
node_modules/some_package/somejs.jsвvendorзагрузить его вручную в
index.html:<head> <script src="vendor/some_package/somejs.js"> </head>Однако в большинстве случаев вам нужен этот подход только для пакетов, которые должны быть доступны глобально, прежде всего (например, для определенных полифиллов). Ответ Криса верен для варианта B, и вы получаете преимущества сборки веб-пакета (минификация, хеши, ...).
Однако, если ваши скрипты не должны быть доступны глобально и если они готовы к работе с модулями, вы можете импортировать их
src/polyfills.tsили, что еще лучше, импортировать только тогда, когда они вам нужны в ваших конкретных компонентах.Предоставление глобального доступа к скриптам посредством
scripts:[]их загрузки вручную или путем их загрузки создает собственный набор проблем, и на самом деле их следует использовать только тогда, когда это абсолютно необходимо.источник
Вам нужно открыть файл
.angular-cli.jsonи выполнить поиск,"scripts:"или, если вы хотите добавить внешний CSS, вам нужно найти слово"styles":в том же файле.в качестве примера, показанного ниже, вы увидите, как bootstrap Js (
bootstrap.min.js) и bootstrap CSS (bootstrap.min.css) включены в.angular-cli.json:"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],Конечно, если у вас есть собственный файл js, вы можете добавить путь к нему здесь, в
.angular-cli.jsonтом же месте (в"scripts":[]).источник
Возможно, вы захотите взглянуть на эту страницу: https://github.com/angular/angular-cli#global-library-installation
Он показывает основы того, как включать файлы .js и .css.
источник
Раньше я не использовал angular-cli, но сейчас работаю над сборкой Angular / Webpack. Для того , чтобы обеспечить мое приложение с JQuery и другими производителями я использую плагин WebPack, в
ProvidePlugin(). Обычно это находится в вашемwebpack.config.js: Вот пример библиотек jquery, lodash и moment. Вот ссылка на документацию (в лучшем случае расплывчатую)plugins: [ new webpack.ProvidePlugin({ $: 'jquery', _: 'lodash', moment: 'moment', }) ]Невероятно, но на самом деле он позволяет вам использовать его сразу же при условии, что все остальные настройки веб-пакета были выполнены правильно и были установлены с помощью
npm.источник
ng buildэто все обрабатывается cli. Но я подумал, что, вероятно, есть способ добавить что-то как часть сборки. Но я не видел четкого примера.