Làm thế nào để bao gồm các tệp tùy chỉnh với bản dựng angle-cli?

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

Làm cách nào để yêu cầu angle-cli bao gồm tệp từ "src / asset" trong thư mục gốc của "dist" khi nó được tạo?

Chúng tôi triển khai đến máy chủ Windows và cần bao gồm tệp "web.config" để yêu cầu IIS định tuyến mọi thứ để lập chỉ mục. Chúng tôi đã làm trước RC4 này, nhưng với tất cả các bản cập nhật, nó đã rơi qua các vết nứt (tôi không nhớ chúng tôi đã làm như thế nào).

Tôi đã tìm kiếm tài liệu repo GitHub và không tìm thấy bất cứ điều gì hữu ích liên quan đến chủ đề này. Có lẽ tôi đang ở sai chỗ?

Trong ToC , có một dấu đầu dòng "Thêm tệp bổ sung vào bản dựng", nhưng có vẻ như phần đó không tồn tại.

Thuộc tính "asset" của angle-cli.json có thể được định cấu hình để bao gồm các tệp tùy chỉnh trong bản dựng webpack angle-cli. Vì vậy, hãy định cấu hình giá trị thuộc tính "property" dưới dạng một mảng. Ví dụ:

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

cấu hình trên sẽ sao chép config.jsn và .htaccess vào thư mục dist trong quá trình xây dựng webpack angle-cli. cài đặt trên đã hoạt động trong phiên bản angle-cli 1.0.0-beta.18

Câu trả lời đúng hiện tại:

Nhóm đã thêm hỗ trợ sao chép các tệp cụ thể vào thư mục đầu ra ( disttheo mặc định) trong phiên bản Angular CLI mới hơn (sẽ là phiên bản beta 17 hoặc 19 - phiên bản 1.x cuối cùng cho các lứa tuổi).

Bạn chỉ cần thêm nó vào mảng angular-cli.jsonnhư sau:

{
  ...
  "ứng dụng" [
    {
       "root": "src",
       "tài sản": [
         "tài sản",
         "web.config"
       ],
       ...
    }
  ]
  ...
}

(Lưu ý rằng đường dẫn liên quan đến srcthư mục)

Cá nhân tôi sử dụng nó và nó hoạt động tốt.

Kể từ phiên bản beta 24, tôi đã thêm một tính năng vào Angular CLI để đảm bảo tất cả assetscác tệp và thư mục được phục vụ từ máy chủ webpack dev khi chạy ng testkhông chỉ ng serve.

Nó cũng hỗ trợ cung cấp các tệp nội dung trong máy chủ webpack dev được sử dụng cho các bài kiểm tra đơn vị ( ng test).
(trong trường hợp bạn cần một số tệp JSON cho các bài kiểm tra hoặc chỉ ghét nhìn thấy cảnh báo 404 trong bảng điều khiển).
Chúng đã được phục vụ từ ng e2evì nó chạy đầy đủ ng serve.

Và nó cũng có nhiều tính năng nâng cao hơn, như lọc những tệp bạn muốn từ một thư mục và có tên thư mục đầu ra khác với thư mục nguồn:

{
  ...
  "ứng dụng" [
    {
      "root": "src",
      "tài sản": [
        "tài sản",
        "web.config":
        {
          // Sao chép nội dung trong thư mục này
          "đầu vào": "../",
          // Điều đó khớp với ký tự đại diện này
          "cầu": "* .config",
          // Và đặt chúng vào thư mục này dưới `dist` ('.' Có nghĩa là đặt trực tiếp vào` dist`)
          "đầu ra": "."
        }
      ],
      ...
    }
  ]
  ...
}

Bạn cũng có thể tham khảo tài liệu chính thức: Hướng dẫn Angular - Cấu hình vùng làm việc .

.

[CHỈ ĐỂ SẮP XẾP] Câu trả lời gốc (ngày 6 tháng 10 năm 2016):

Rất tiếc, điều này hiện không được hỗ trợ (kể từ phiên bản beta-16). Tôi đã nêu mối quan tâm chính xác với nhóm (tệp web.config), nhưng có vẻ như nó sẽ không sớm xảy ra (trừ khi bạn đang phân tách CLI, v.v.).

Theo dõi vấn đề này để thảo luận đầy đủ và các chi tiết có thể có trong tương lai.

Đối với tệp JSON, bạn có thể đặt nó vào ./src/assets/. Thư mục này được sao chép nguyên trạng ./dist/assets/. Đây là hành vi hiện tại.

Trước đó trong những ngày systemJS có một ./public/thư mục khác đã được sao chép ./dist/trực tiếp, nhưng điều này đã biến mất trong các phiên bản Webpack, vấn đề được đề cập ở trên thảo luận.

Một giải pháp (mặc dù theo ý kiến ​​của tôi là hơi khó) là khai báo một biến trong main.tstệp của bạn yêu cầu tệp bổ sung mà bạn muốn đưa vào đầu ra bản dựng webpack.

VÍ DỤ:

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

Khi webpack gặp câu lệnh khai báo biến này, main.tsnó sẽ phát ra web.configtệp thô như một phần của đầu ra bản dựng:

                            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.

Một giải pháp lý tưởng sẽ nằm trong cấu hình webpack, nhưng tôi không thể hiểu rõ về cách thức mà angular-cli.jsonangle -cli đang quản lý điều đó cho đến nay (beta.16).

Vì vậy, nếu ai đó có câu trả lời hay hơn về việc mở rộng cấu hình webpack cho một dự án được tạo ra từ angle-cli, tôi rất muốn nghe nó.

Đối với người đọc Angular 8 ,

.htaccesscần phải được src/.htaccess. Xem bên dưới,

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

Đảm bảo rằng bạn đã đặt .htaccesstệp bên trong srcthư mục của dự án.

và tệp để đưa nó vào angular.json, không phải làangular-cli.json

(Nếu bạn cần một htaccesstệp hợp lệ , thì bạn có thể tìm một tệp tại đây - https://stackoverflow.com/a/57126352/767625 )

Đó là nó. Điều này bây giờ sẽ được sao chép khi bạn nhấn ng build --prod=true.

Hy vọng điều này sẽ giúp ai đó.

Chúc mừng,

Có một phần "script" trong tệp angle-cli.json. Bạn có thể thêm tất cả các tệp javascript của bên thứ ba vào đó.

Trong trường hợp của tôi, tôi đã sử dụng Angular phiên bản 5 , Vì vậy, tôi đã thử tạo tệp có tên Staticfile.txt khi chạy lệnh ng build --prod. đảm bảo cung cấp phần mở rộng tệp, nếu không nó sẽ không tạo tệp.

Sửa đổi angle.json.
Thêm mục nhập vào mảng nội dung:

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