Як включити власні файли з кутовою збіркою cli?

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

Як мені сказати angular-cli, щоб він включав файл з "src / tools" в корінь "dist", коли він будується?

Ми розгортаємося до хоста Windows і потрібно включати файл "web.config", щоб сказати IIS прокласти все до індексу. Ми робили це перед RC4, але з усіма оновленнями він потрапляв через тріщини (я не пам'ятаю, як ми це робили).

Я шукав документи репо в GitHub і не знайшов нічого корисного щодо цієї теми. Можливо, я не в тому місці?

У ToC є куля "Додавання додаткових файлів до збірки", але, здається, що розділу не існує.

Властивість "активи" angular-cli.json можна налаштувати так, щоб включати власні файли у збірку webpack angular-cli. Отже, налаштуйте значення властивості "активи" як масив. Наприклад:

"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таким чином:

{
  ...
  "програми" [
    {
       "root": "src",
       "активи": [
         "активи",
         "web.config"
       ],
       ...
    }
  ]
  ...
}

(Зверніть увагу, що шлях відносно srcпапки)

Я особисто його використовую, і він працює просто чудово.

Станом на бета-версію 24, я додав функцію Angular CLI, яка гарантує, що всі assetsфайли та папки обслуговуються з сервера розробників webpack при запуску ng testне просто ng serve.

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

Крім того, у нього є більш вдосконалені функції, такі як фільтрування файлів, які ви бажаєте отримати з папки, і те, щоб назва вихідної папки відрізнялася від вихідної папки:

{
  ...
  "програми" [
    {
      "root": "src",
      "активи": [
        "активи",
        "web.config":
        {
          // Скопіюйте вміст у цю папку
          "вхід": "../",
          // Що відповідає цій підстановці
          "glob": "* .config",
          // І покладіть їх у цю папку під "dist" ("." Означає, що покладіть її безпосередньо в "dist")
          "вихід": "."
        }
      ],
      ...
    }
  ]
  ...
}

Ви також можете посилатися на офіційну документацію: Angular Guide - Конфігурація робочої області .

.

[ДЛЯ ТІЛЬКОГО АРХІВУВАННЯ] Оригінальний відповідь (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.

Ідеальним рішенням було б в конфігурації вебпакету, але я не можу скласти голови чи хвостики того, як саме кутовий angular-cli.jsonкліп управляє цим шляхом (бета.16).

Тож якщо хтось має кращу відповідь, яка розширює конфігурацію веб-пакету для проекту, створеного у кутовій кліті, я хотів би почути це.

Для читачів 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.

У моєму випадку я використовував кутову версію 5 , тому я спробував створити файл під назвою Staticfile.txt при виконанні команди ng build --prod. обов'язково надайте розширення для файлу, інакше він не створить файл.

Змініть angular.json.
Додати запис до масиву активів:

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