Как добавить пользовательские файлы с помощью angular -cli build?

Ответ 1

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

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

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

Ответ 2

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

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

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

{
  ...
  "apps" [
    {
       "root": "src",
       "assets": [
         "assets",
         "web.config"
       ],
       ...
    }
  ]
  ...
}

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

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

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

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

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

{
  ...
  "apps" [
    {
      "root": "src",
      "assets": [
        "assets",
        "web.config",
        {
          // Copy contents in this folder
          "input": "../",
          // That matches this wildcard
          "glob": "*.config",
          // And put them in this folder under `dist` ('.' means put it in `dist` directly)
          "output": "."
        }
      ],
      ...
    }
  ]
  ...
}

.

.

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

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

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

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

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

Ответ 3

Одним из решений (хотя, на мой взгляд, является немного взлома) является объявление переменной в вашем файле 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);

Когда 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 -cli управляет этим с помощью angular-cli.json пока (бета .16).

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

Ответ 4

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

Ответ 5

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

Ответ 6

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

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

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

Убедитесь, что вы поместили файл .htaccess каталог src вашего проекта. (Если вам нужен действительный файл htaccess, вы можете найти его здесь - fooobar.com/info/16160909/...)

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

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

Ура,