Angular-cli yapısıyla özel dosyalar nasıl eklenir?

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

Angular-cli'ye "src / assets" dan bir dosyayı oluştururken "dist" köküne eklemesini nasıl söylerim?

Bir Windows ana bilgisayarına dağıtıyoruz ve IIS'ye her şeyi dizine yönlendirmesini söylemek için bir "web.config" dosyası eklememiz gerekiyor. Bunu RC4 öncesinde yapıyorduk, ancak tüm güncellemelerle birlikte çatlaklardan düştü (nasıl yaptığımızı hatırlamıyorum).

Ben sürtmeye Github repo dokümanlar ve bu konuda açısından kullanımının bir şey bulamadım. Belki yanlış yerdeyim?

In TOK , orada "bir yapı için ekstra dosyaları ekleme" bir kurşun noktasıdır, ama bölüm yoksa görünür.

Angular-cli.json'un "assets" özelliği, özel dosyaları açısal-cli web paketi yapısına dahil edecek şekilde yapılandırılabilir. Bu nedenle, "varlıklar" özellik değerini bir dizi olarak yapılandırın. Örneğin:

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

yukarıdaki yapılandırma, config.jsn ve .htaccess'i açısal-cli web paketi oluşturma sırasında dist klasörüne kopyalayacaktır. yukarıdaki ayar, angular-cli sürüm 1.0.0-beta.18'de çalıştı

Mevcut Doğru Cevap:

Ekip, distAngular CLI'nin sonraki bir sürümünde belirli dosyaların olduğu gibi çıktı klasörüne ( varsayılan olarak) kopyalanması için destek ekledi (beta 17 veya 19 olacak - çağlar için son 1.x sürümlerindeydi).

Bunu diziye şu şekilde eklersiniz angular-cli.json:

{
  ...
  "uygulamalar" [
    {
       "root": "src",
       "varlıklar": [
         "varlıklar",
         "Web.config"
       ],
       ...
    }
  ]
  ...
}

(Yolun srcklasöre göre olduğunu unutmayın )

Ben şahsen kullanıyorum ve gayet iyi çalışıyor.

Beta 24 itibariyle, Angular CLI'ye tüm dosya ve klasörlerin yalnızca çalışırken değil , web paketi dev sunucusundan sunulmasını sağlayan bir özellik ekledim .assetsng testng serve

Ayrıca, birim testleri için kullanılan web paketi geliştirici sunucusunda varlık dosyalarının sunulmasını da destekler ( ng test).
(testler için bazı JSON dosyalarına ihtiyacınız varsa veya konsolda 404 uyarı görmekten nefret ediyorsanız).
Zaten servis ediliyor ng e2eçünkü dolu çalışıyor ng serve.

Ayrıca bir klasörden istediğiniz dosyaları filtrelemek ve çıktı klasörü adının kaynak klasörden farklı olması gibi daha gelişmiş özelliklere de sahiptir:

{
  ...
  "uygulamalar" [
    {
      "root": "src",
      "varlıklar": [
        "varlıklar",
        "Web.config":
        {
          // Bu klasördeki içeriği kopyala
          "input": "../",
          // Bu joker karakterle eşleşen
          "glob": "* .config",
          // Ve onları bu klasöre "dist" altına koyun ("." Doğrudan "dist" içine koymak anlamına gelir)
          "çıktı": "."
        }
      ],
      ...
    }
  ]
  ...
}

Resmi belgelere de başvurabilirsiniz: Açısal Kılavuz - Çalışma alanı yapılandırması .

.

[YALNIZCA ARŞİV İÇİN] Orijinal Cevap (6 Ekim 2016):

Bu maalesef şu anda desteklenmemektedir (beta-16 itibariyle). Ekibe tam endişeyi dile getirdim (web.config dosyaları), ancak yakında herhangi bir zamanda gerçekleşmeyecek gibi görünüyor (CLI, vb. Çatallanmadıkça).

Tam tartışma ve gelecekteki olası ayrıntılar için bu sorunu takip edin .

JSON dosyası için bunu içine koyabilirsiniz ./src/assets/. Bu klasör olduğu gibi kopyalanır ./dist/assets/. Şu anki davranış budur.

SystemJS günlerinin başlarında, doğrudan ./public/kopyalanan başka bir klasör vardı ./dist/, ancak bu, yukarıda atıfta bulunulan sorunun tartışıldığı Webpack sürümlerinde ortadan kalktı.

Bir çözüm (bence biraz hack olsa da) main.tsdosyanızda, web paketi derleme çıktısına dahil etmek istediğiniz ekstra dosyayı gerektiren bir değişken bildirmektir .

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

Web paketi bu değişken bildirim deyimiyle karşılaştığında , derleme çıktısının bir parçası olarak main.tsham web.configdosyayı yayınlayacaktır :

                            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.

İdeal bir çözüm web paketi yapılandırması olabilir, ancak henüz açısal-klibin bunu nasıl yönettiğini angular-cli.jsonanlamıyorum (beta.16).

Bu nedenle, açısal olarak oluşturulmuş bir proje için web paketi yapılandırmasını genişleten daha iyi bir cevabı olan varsa, duymak isterim.

Angular 8 okuyucular için ,

.htaccessolması gerekiyor src/.htaccess. Aşağıya bakınız,

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

.htaccessDosyayı srcprojenizin dizininin içine yerleştirdiğinizden emin olun .

ve bunu koyacağınız dosya angular.json,angular-cli.json

(Geçerli bir htaccessdosyaya ihtiyacınız varsa , burada bir tane bulabilirsiniz - https://stackoverflow.com/a/57126352/767625 )

Bu kadar. Bu artık vurduğunuzda kopyalanmalıdır ng build --prod=true.

Umarım bu birine yardımcı olur.

Alkış,

Angular-cli.json dosyasında bir "betikler" bölümü vardır. Tüm üçüncü taraf javascript dosyalarını buraya ekleyebilirsiniz.

Benim durumumda Angular sürüm 5 kullandım , bu yüzden ng build --prod komutunu çalıştırırken Staticfile.txt adlı bir dosya oluşturmayı denedim . dosya uzantısını verdiğinizden emin olun, aksi takdirde dosyayı oluşturmaz.

Angular.json dosyasını değiştirin.
Varlıklar dizisine giriş ekleyin:

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