Как включить пользовательские файлы в сборку 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 есть пункт «Добавление дополнительных файлов в сборку», но, похоже, этого раздела не существует.

Свойство "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

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

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

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

{
  ...
  "Программы" [
    {
       "корень": "SRC",
       "активы": [
         "активы",
         "web.config"
       ],
       ...
    }
  ]
  ...
}

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

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

Начиная с бета-версии 24, я добавил функцию в Angular CLI, которая гарантирует, что все assetsфайлы и папки обслуживаются с сервера разработки webpack, а ng testне только при запуске ng serve.

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

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

{
  ...
  "Программы" [
    {
      "корень": "SRC",
      "активы": [
        "активы",
        "web.config":
        {
          // Копируем содержимое в эту папку
          "вход": "../",
          // Соответствует этому подстановочному знаку
          "glob": "* .config",
          // И помещаем их в эту папку в `dist` ('.' Означает помещать их напрямую в` dist`)
          "вывод": "."
        }
      ],
      ...
    }
  ]
  ...
}

Вы также можете обратиться к официальной документации: Руководство по Angular - Конфигурация рабочей области .

.

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

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

Следите за этим вопросом, чтобы получить полное обсуждение и возможные будущие подробности.

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

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

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

EX:

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);

Когда webpack встречает этот оператор объявления переменной, он генерирует 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.

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

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

Для читателей Angular 8 ,

.htaccessдолжно быть src/.htaccess. Увидеть ниже,

 "assets": [
    "src/favicon.ico",
     "src/assets",
     "src/.htaccess"
  ],

Убедитесь, что вы поместили .htaccessфайл в srcкаталог вашего проекта.

и файл для этого angular.json, а неangular-cli.json

(Если вам нужен действующий htaccessфайл, вы можете найти его здесь - https://stackoverflow.com/a/57126352/767625 )

Вот и все. Теперь это должно быть скопировано при ударе ng build --prod=true.

Надеюсь, это кому-то поможет.

Ура,

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

В моем случае я использовал Angular версии 5 , поэтому я попытался создать файл с именем Staticfile.txt при запуске команды ng build --prod. обязательно укажите расширение файла, иначе он не создаст файл.

Измените angular.json.
Добавить запись в массив активов:

{
  "glob": "**/web.config",
  "input": "src/",
  "output": "./"
}