Jak dołączyć pliki niestandardowe do kompilacji angular-cli?

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

Jak nakazać angular-cli dołączenie pliku z „src / asset” w katalogu głównym „dist” podczas kompilacji?

Wdrażamy na hoście z systemem Windows i musimy dołączyć plik „web.config”, aby poinformować usługi IIS o skierowaniu wszystkiego do indeksu. Robiliśmy to przed RC4, ale przy wszystkich aktualizacjach wypadło przez pęknięcia (nie pamiętam, jak to zrobiliśmy).

Byłem czyszczenie docs GitHub repo i nie znalazłem niczego stosowania w odniesieniu do tego tematu. Może jestem w złym miejscu?

W ToC znajduje się punkt „Dodawanie dodatkowych plików do kompilacji”, ale wygląda na to, że sekcja nie istnieje.

Właściwość „asset” pliku angular-cli.json można skonfigurować tak, aby zawierała pliki niestandardowe w kompilacji angular-cli webpack. Skonfiguruj więc wartość właściwości „asset” jako tablicę. Na przykład:

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

powyższa konfiguracja skopiuje config.jsn i .htaccess do folderu dist podczas budowania angular-cli webpack. powyższe ustawienie działało w wersji angular-cli 1.0.0-beta.18

Obecna poprawna odpowiedź:

Zespół dodał obsługę kopiowania określonych plików bez distzmian do folderu wyjściowego ( domyślnie) w późniejszej wersji Angular CLI (byłaby to wersja beta 17 lub 19 - od wieków była w końcowych wersjach 1.x).

Po prostu dodajesz go do tablicy w następujący sposób angular-cli.json:

{
  ...
  „aplikacje” [
    {
       "root": "src",
       "majątek": [
         "majątek",
         „web.config”
       ],
       ...
    }
  ]
  ...
}

(Zwróć uwagę, że ścieżka jest względna do srcfolderu)

Osobiście go używam i działa dobrze.

Jak beta 24, I dodaje funkcję kątowym CLI, który sprawia, że wszystkie assetspliki i foldery serwowane są z serwera dev WebPACK podczas pracy ng testnie tylko ng serve.

Obsługuje również obsługę plików zasobów na serwerze deweloperskim pakietu webpack używanego do testów jednostkowych ( ng test).
(w przypadku, gdy potrzebujesz plików JSON do testów lub po prostu nie chcesz widzieć ostrzeżeń 404 w konsoli).
Są już obsługiwane, ng e2eponieważ działa pełne ng serve.

Ma również bardziej zaawansowane funkcje, takie jak filtrowanie plików, które chcesz z folderu, i nadanie nazwy folderu wyjściowego innej niż folder źródłowy:

{
  ...
  „aplikacje” [
    {
      "root": "src",
      "majątek": [
        "majątek",
        „web.config”:
        {
          // Skopiuj zawartość tego folderu
          "Wejście": "../",
          // To pasuje do tego symbolu wieloznacznego
          "glob": "* .config",
          // I umieść je w tym folderze pod `dist` ('.' Oznacza, że ​​umieść je bezpośrednio w` dist`)
          "wynik": "."
        }
      ],
      ...
    }
  ]
  ...
}

Możesz również zapoznać się z oficjalną dokumentacją: Angular Guide - Workspace configuration .

.

[TYLKO DO ARCHIWIZACJI] Oryginalna odpowiedź (6 października 2016 r.):

Niestety obecnie nie jest to obsługiwane (od wersji beta-16). Podałem dokładną troskę zespołowi (pliki web.config), ale wydaje się, że nie nastąpi to w najbliższym czasie (chyba że rozwidlasz CLI itp.).

Śledź to wydanie, aby uzyskać pełną dyskusję i możliwe szczegóły na przyszłość.

W przypadku pliku JSON możesz go umieścić w ./src/assets/. Ten folder zostanie skopiowany bez zmian ./dist/assets/. To jest obecne zachowanie.

Wcześniej w czasach systemJS istniał inny ./public/folder, do którego kopiowano ./dist/bezpośrednio, ale zniknął on w wersjach Webpack, o którym mowa powyżej.

Jednym z rozwiązań (chociaż moim zdaniem jest to trochę hack) jest zadeklarowanie zmiennej w main.tspliku, która wymaga dodatkowego pliku, który chcesz dołączyć do wyniku kompilacji pakietu internetowego.

DAWNY:

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

Gdy pakiet webpack napotka tę instrukcję deklaracji zmiennej main.ts, wyemituje web.configplik raw jako część wyniku kompilacji:

                            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.

Idealnym rozwiązaniem byłaby konfiguracja angular-cli.jsonpakietu webpacka , ale nie potrafię jeszcze zrozumieć, jak Angular- CLI sobie z tym radzi (beta.16).

Więc jeśli ktoś ma lepszą odpowiedź, która rozszerza konfigurację pakietu WebPack dla projektu generowanego przez angular-cli, chciałbym to usłyszeć.

Dla czytelników Angular 8 ,

.htaccessmusi być src/.htaccess. Zobacz poniżej

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

Upewnij się, że umieściłeś .htaccessplik w srckatalogu projektu.

a plik do wstawienia to angular.jsonnie plikangular-cli.json

(Jeśli potrzebujesz prawidłowego htaccesspliku, możesz go znaleźć tutaj - https://stackoverflow.com/a/57126352/767625 )

Otóż ​​to. Powinno to teraz zostać skopiowane po trafieniu ng build --prod=true.

Mam nadzieję, że to komuś pomoże.

Twoje zdrowie,

W pliku angular-cli.json znajduje się sekcja „scripts”. Możesz tam dodać wszystkie pliki javascript innych firm.

W moim przypadku użyłem wersji Angulara 5 , więc próbowałem utworzyć plik o nazwie Staticfile.txt podczas uruchamiania polecenia ng build --prod. upewnij się, że podano rozszerzenie pliku, w przeciwnym razie plik nie zostanie utworzony.

Zmodyfikuj angular.json.
Dodaj wpis do tablicy zasobów:

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