Bagaimana cara menyertakan file kustom dengan angular-cli build?

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

Bagaimana cara memberi tahu angular-cli untuk menyertakan file dari "src / assets" di root "dist" saat dibuat?

Kami menerapkan ke host Windows dan perlu menyertakan file "web.config" untuk memberi tahu IIS agar merutekan semuanya ke indeks. Kami melakukan ini sebelum RC4, tetapi dengan semua pembaruan itu gagal (saya tidak ingat bagaimana kami melakukannya).

Saya telah menjelajahi dokumen repo GitHub dan belum menemukan apa pun yang berguna sehubungan dengan topik ini. Mungkin saya di tempat yang salah?

Di ToC , ada poin peluru "Menambahkan file ekstra ke build", tetapi tampaknya bagian itu tidak ada.

Properti "assets" dari angular-cli.json dapat dikonfigurasi untuk menyertakan file khusus dalam pembuatan webpack angular-cli. Jadi, konfigurasikan nilai properti "aset" sebagai larik. Sebagai contoh:

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

konfigurasi di atas akan menyalin config.jsn dan .htaccess ke folder dist selama pembuatan webpack angular-cli. pengaturan di atas bekerja di angular-cli versi 1.0.0-beta.18

Jawaban yang Benar Saat Ini:

Tim telah menambahkan dukungan untuk menyalin file tertentu apa adanya ke folder output ( distsecara default) di versi CLI Angular yang lebih baru (akan menjadi beta 17 atau 19 - sudah dalam rilis final 1.x selama berabad-abad).

Anda hanya menambahkannya ke array angular-cli.jsonseperti:

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

(Perhatikan bahwa jalur relatif ke srcfolder)

Saya pribadi menggunakannya dan berfungsi dengan baik.

Mulai beta 24, saya telah menambahkan fitur ke Angular CLI yang memastikan semua assetsfile dan folder dilayani dari server dev webpack saat berjalan ng testtidak hanya ng serve.

Ini juga mendukung penyajian file aset di server dev webpack yang digunakan untuk pengujian unit ( ng test).
(jika Anda memerlukan beberapa file JSON untuk pengujian, atau tidak suka melihat peringatan 404 di konsol).
Mereka sudah dilayani dari ng e2ekarena sudah penuh ng serve.

Dan itu juga memiliki fitur yang lebih canggih, seperti memfilter file apa yang Anda inginkan dari folder, dan memiliki nama folder keluaran yang berbeda dari folder sumber:

{
  ...
  "apps" [
    {
      "root": "src",
      "aktiva": [
        "aktiva",
        "web.config":
        {
          // Salin konten di folder ini
          "memasukkan": "../",
          // Itu cocok dengan wildcard ini
          "glob": "* .config",
          // Dan letakkan di folder ini di bawah `dist` ('.' Berarti langsung taruh di` dist`)
          "keluaran": "."
        }
      ],
      ...
    }
  ]
  ...
}

Anda juga dapat merujuk ke dokumentasi resmi: Panduan Sudut - Konfigurasi ruang kerja .

.

[KHUSUS UNTUK ARSIP] Jawaban Asli (6 Okt 2016):

Sayangnya, ini tidak didukung saat ini (pada beta-16). Saya menyampaikan kekhawatiran yang sebenarnya kepada tim (file web.config), tetapi tampaknya itu tidak akan terjadi dalam waktu dekat (kecuali jika Anda membagi CLI, dll).

Ikuti masalah ini untuk diskusi lengkap dan kemungkinan detail di masa mendatang.

Untuk file JSON, Anda bisa memasukkannya ./src/assets/. Folder ini disalin sebagaimana adanya ./dist/assets/. Ini adalah perilaku saat ini.

Sebelumnya di systemJS hari ada ./public/folder lain yang disalin ./dist/secara langsung, tetapi ini hilang dalam versi Webpack, yang dibahas masalah yang disebutkan di atas.

Salah satu solusinya (meskipun menurut saya sedikit hack) adalah mendeklarasikan variabel di main.tsfile Anda yang memerlukan file tambahan yang ingin Anda sertakan dalam output build 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);

Ketika webpack menemukan pernyataan deklarasi variabel ini di main.tsdalamnya, itu akan memancarkan web.configfile mentah sebagai bagian dari keluaran build:

                            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.

Solusi yang ideal adalah dalam konfigurasi webpack, tetapi saya tidak dapat memahami bagaimana angular-cli mengelolanya hingga angular-cli.jsonsaat ini (beta.16).

Jadi, jika ada yang memiliki jawaban lebih baik yang memperluas konfigurasi webpack untuk proyek yang dihasilkan angular-cli, saya akan senang mendengarnya.

Untuk pembaca Angular 8 ,

.htaccessperlu src/.htaccess. Lihat di bawah,

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

Pastikan Anda telah menempatkan .htaccessfile di dalam srcdirektori proyek Anda.

dan file yang akan dimasukkan adalah angular.json, bukanangular-cli.json

(Jika Anda memerlukan htaccessfile yang valid , Anda dapat menemukannya di sini - https://stackoverflow.com/a/57126352/767625 )

Itu dia. Ini sekarang harus disalin saat Anda menekan ng build --prod=true.

Semoga ini bisa membantu seseorang.

Bersulang,

Ada bagian "skrip" di file angular-cli.json. Anda dapat menambahkan semua file javascript pihak ketiga di sana.

Dalam kasus saya, saya menggunakan Angular versi 5 , Jadi saya mencoba membuat file bernama Staticfile.txt saat menjalankan ng build --prod perintah. pastikan untuk memberikan ekstensi file, jika tidak maka tidak akan membuat file.

Ubah angular.json.
Tambahkan entri ke larik aset:

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