Как включить пользовательские файлы в сборку angular-cli?

RE: Angular2 2.0.0, angular-cli v1.0.0-beta.11-webpack.8

Как мне сказать angular-cli включить файл из "src /assets" в корень "dist" при сборке?

Мы развертываем на хосте Windows, и нам нужно включить файл «web.config», чтобы сообщить IIS, что все должно быть проиндексировано. Мы делали это до RC4, но со всеми обновлениями он провалился (я не помню, как мы это сделали).

Я изучал документы по репозиторию GitHub и не нашел ничего полезного в этой теме. Может я не в том месте?

В ToC есть пункт "Добавление дополнительных файлов в сборку". , но похоже, что этот раздел не существует.

76 голосов | спросил Kizmar 16 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowFri, 16 Sep 2016 21:59:43 +0300 2016, 21:59:43

4 ответа


0

Свойство assets в angular-cli.json может быть настроено на включение пользовательских файлов в сборку angular-cli webpack. Итак, настройте значение свойства «assets» как массив. Например:

"assets": ["assets", "config.json",".htaccess"],

Приведенная выше конфигурация скопирует config.jsn и .htaccess в папку dist во время сборки веб-пакета angular-cli. вышеуказанная настройка работала в angular-cli версии 1.0.0-beta.18

ответил Md Ayub Ali Sarker 31 +03002016-10-31T22:08:15+03:00312016bEurope/MoscowMon, 31 Oct 2016 22:08:15 +0300 2016, 22:08:15
0

Текущий правильный ответ:

Команда добавила поддержку копирования определенных файлов как есть в выходную папку (по умолчанию dist) в более поздней версии Angular CLI (будет бета 17 или 19 - он был в финальных версиях 1.x целую вечность).

Вы просто добавляете его в массив в angular-cli.json как:

{
  ...
  "Программы" [
    {
       "root": "src",
       "активы": [
         «активы»,
         "Web.config"
       ],
       ...
    }
  ]
  ...
}

(обратите внимание, что путь относится к папке src)

Лично я использую его, и он работает просто отлично.

Начиная с бета-версии 24, я добавил функцию в Угловой интерфейс командной строки, обеспечивающий подачу всех файлов и папок assets с сервера webpack при запуске ng test не просто ng serve.

Он также поддерживает обслуживание файлов ресурсов на сервере разработки веб-пакетов, используемых для модульных тестов (ng test).
(в случае, если вам нужны файлы JSON для тестов, или просто не хочется видеть 404 предупреждения в консоли).
Они уже обслуживаются из ng e2e, потому что он полностью заполнен ng serve.

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

{
  ...
  "Программы" [
    {
      "root": "src",
      "активы": [
        «активы»,
        "Web.config",
        {
          //Копируем содержимое в эту папку
          "input": "../",
          //Это соответствует этому шаблону
          "glob": "* .config",
          //И помещаем их в эту папку под `dist` ('.' Означает, что помещаем его в` dist` напрямую)
          "выход": "."
        }
      ],
      ...
    }
  ]
  ...
}

.


.

[ТОЛЬКО ДЛЯ АРХИВИРОВАНИЯ] Оригинальный ответ (6 октября 2016 г.):

К сожалению, в настоящее время это не поддерживается (начиная с бета-16). Я выразил особую обеспокоенность команде (файлы web.config), но, похоже, в ближайшее время это не произойдет (если вы не разбудите CLI и т. Д.).

Следуйте этому вопросу для полного обсуждения и возможных подробностей в будущем.

Постскриптум

Для файла JSON вы можете поместить его в ./src/assets/. Эта папка копируется как есть в ./dist/assets/. Это текущее поведение.

Ранее в дни systemJS была еще одна папка ./public/, которая была скопирована в ./dist/, но этого не произошло в версиях Webpack, о которых говорилось выше.

ответил Meligy 6 +03002016-10-06T14:02:38+03:00312016bEurope/MoscowThu, 06 Oct 2016 14:02:38 +0300 2016, 14:02:38
0

Одним из решений (хотя, на мой взгляд, это немного хакерство) является объявление переменной в вашем main.ts файле, который требует дополнительный файл, который вы хотите включить в вывод сборки webpack.

Пример:

import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';

/* HACK: Include standalone web.config file manually in webpack build
 *
 * Due to the way the beta angular-cli abstracts the webpack config files into
 * angular-cli.json and lacks current documentation we were unable to find
 * a way to include additional files manually in the webpack build output.
 *
 * For hosting on IIS we need to include a web.config file for
 * specifying rewrite rules to make IIS compatible with the Angular Router.
 * The one liner following this comment is a hack to accomplish this
 * and should be reviewed and corrected as soon as adequete documentation
 * is available for the angular-cli configuration file.
 */
const webConfig = require('file?name=[name].[ext]!./web.config');

if (environment.production) {
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

Когда веб-пакет встречает этот оператор объявления переменной в main.ts, он генерирует необработанный web.config файл как часть вывода сборки:

                            Asset       Size  Chunks             Chunk Names
                       inline.map    5.59 kB       2  [emitted]  inline
                       web.config  684 bytes          [emitted]
                 styles.bundle.js    16.7 kB    1, 2  [emitted]  styles
                        inline.js    5.53 kB       2  [emitted]  inline
                         main.map    5.36 MB    0, 2  [emitted]  main
                       styles.map    22.6 kB    1, 2  [emitted]  styles
                   main.bundle.js    4.85 MB    0, 2  [emitted]  main
                       index.html    1.98 kB          [emitted]
                assets/.npmignore    0 bytes          [emitted]
         assets/styles/global.css    2.74 kB          [emitted]
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  4.45 kB       0
webpack: bundle is now VALID.

Идеальным решением было бы использование конфигурации веб-пакета, но я не могу понять, как angular-cli управляет этим с помощью angular-cli.json пока (бета.16).

Так что, если у кого-то есть лучший ответ, который расширяет конфигурацию веб-пакета для проекта, созданного в angular-cli, я бы хотел услышать его.

ответил Joe Purdy 5 +03002016-10-05T22:16:07+03:00312016bEurope/MoscowWed, 05 Oct 2016 22:16:07 +0300 2016, 22:16:07
0

В файле angular-cli.json есть раздел «скрипты». Вы можете добавить туда все сторонние файлы javascript.

ответил Alex Lin 16 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowFri, 16 Sep 2016 23:10:17 +0300 2016, 23:10:17

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132