วิธีรวมไฟล์ที่กำหนดเองด้วย angular-cli build?

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

ฉันจะบอก angular-cli ให้รวมไฟล์จาก "src / assets" ในรูทของ "dist" ได้อย่างไรเมื่อสร้าง

เราปรับใช้กับโฮสต์ Windows และจำเป็นต้องรวมไฟล์ "web.config" เพื่อบอกให้ IIS กำหนดเส้นทางทุกอย่างไปยังดัชนี เรากำลังทำ RC4 ก่อนหน้านี้ แต่ด้วยการอัปเดตทั้งหมดมันล้มเหลว (ฉันจำไม่ได้ว่าเราทำอย่างไร)

ฉันได้กำจัดเอกสาร repo ของ GitHubและไม่พบสิ่งใดที่เกี่ยวข้องกับหัวข้อนี้ บางทีฉันอาจจะผิดที่?

ในToCมีสัญลักษณ์แสดงหัวข้อย่อย "การเพิ่มไฟล์พิเศษในบิลด์" แต่ดูเหมือนว่าไม่มีส่วนนั้น

คุณสมบัติ "assets" ของ angular-cli.json สามารถกำหนดค่าให้รวมไฟล์ที่กำหนดเองใน angular-cli webpack build ดังนั้นกำหนดค่าคุณสมบัติ "สินทรัพย์" เป็นอาร์เรย์ ตัวอย่างเช่น:

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

การกำหนดค่าข้างต้นจะคัดลอก config.jsn และ. htaccess ไปยังโฟลเดอร์ dist ในระหว่างการสร้าง angular-cli webpack การตั้งค่าข้างต้นใช้งานได้ใน angular-cli เวอร์ชัน 1.0.0-beta.18

คำตอบที่ถูกต้องในปัจจุบัน:

ทีมงานได้เพิ่มการสนับสนุนสำหรับการคัดลอกไฟล์เฉพาะตามที่เป็นอยู่ไปยังโฟลเดอร์ผลลัพธ์ ( distโดยค่าเริ่มต้น) ใน Angular CLI เวอร์ชันที่ใหม่กว่า (อาจเป็นเบต้า 17 หรือ 19 ซึ่งเป็นรุ่นสุดท้าย 1.x สำหรับทุกวัย)

คุณเพียงแค่เพิ่มลงในอาร์เรย์ในangular-cli.jsonลักษณะ:

{
  ...
  "แอป" [
    {
       "ราก": "src",
       "ทรัพย์สิน": [
         "ทรัพย์สิน"
         "web.config"
       ],
       ...
    }
  ]
  ...
}

(โปรดทราบว่าเส้นทางนั้นสัมพันธ์กับsrcโฟลเดอร์)

ฉันใช้มันเป็นการส่วนตัวและมันก็ใช้ได้ดี

ในฐานะของเบต้า 24 ผมได้เพิ่มคุณลักษณะที่จะเชิงมุม CLI ที่ทำให้แน่ใจว่าทุกassetsไฟล์และโฟลเดอร์ที่จะได้รับจากเซิร์ฟเวอร์ webpack dev เมื่อทำงานไม่ได้เป็นเพียงng testng serve

นอกจากนี้ยังรองรับการให้บริการไฟล์เนื้อหาในเซิร์ฟเวอร์ webpack dev ที่ใช้สำหรับการทดสอบหน่วย ( ng test)
(ในกรณีที่คุณต้องการไฟล์ JSON สำหรับการทดสอบหรือเพียงแค่เกลียดที่จะเห็นคำเตือน 404 ในคอนโซล)
พวกเขาจะทำหน้าที่แล้วจากเพราะมันจะทำงานได้เต็มรูปแบบng e2eng serve

และยังมีคุณสมบัติขั้นสูงอีกด้วยเช่นการกรองไฟล์ที่คุณต้องการจากโฟลเดอร์และการมีชื่อโฟลเดอร์ผลลัพธ์แตกต่างจากโฟลเดอร์ต้นทาง:

{
  ...
  "แอป" [
    {
      "ราก": "src",
      "ทรัพย์สิน": [
        "ทรัพย์สิน"
        "web.config":
        {
          // คัดลอกเนื้อหาในโฟลเดอร์นี้
          "อินพุต": "../",
          // ตรงกับสัญลักษณ์แทนนี้
          "glob": "* .config",
          // และใส่ไว้ในโฟลเดอร์นี้ภายใต้ "dist" ("." หมายถึงใส่ไว้ใน "dist" โดยตรง)
          "เอาต์พุต": "."
        }
      ],
      ...
    }
  ]
  ...
}

นอกจากนี้คุณยังสามารถดูเอกสารอย่างเป็นทางการ: เชิงมุมคู่มือ - การกำหนดค่าพื้นที่ทำงาน

.

[สำหรับการเก็บถาวรเท่านั้น] คำตอบเดิม (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.

ทางออกที่ดีที่สุดคือในการกำหนดค่า webpack แต่ฉันไม่สามารถสร้างหัวหรือก้อยว่า angular-cli จัดการสิ่งนั้นangular-cli.jsonได้อย่างไรในตอนนี้ (beta.16)

ดังนั้นหากใครมีคำตอบที่ดีกว่าที่ขยายการกำหนดค่า webpack สำหรับโครงการที่สร้างขึ้นเชิงมุมฉันชอบที่จะได้ยิน

สำหรับเชิงมุม 8 ผู้อ่าน ,

.htaccesssrc/.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 คุณสามารถเพิ่มไฟล์จาวาสคริปต์ของบุคคลที่สามทั้งหมดได้ที่นั่น

ในกรณีของฉันฉันใช้Angular เวอร์ชัน 5ดังนั้นฉันจึงลองสร้างไฟล์ชื่อStaticfile.txtเมื่อรันคำสั่ง ng build --prod อย่าลืมระบุนามสกุลไฟล์มิฉะนั้นจะไม่สร้างไฟล์

แก้ไข angular.json
เพิ่มรายการในอาร์เรย์สินทรัพย์:

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