कोणीय-क्लि बिल्ड के साथ कस्टम फाइल कैसे शामिल करें?

Question

रे: Angular2 2.0.0, कोणीय-क्ली v1.0.0-beta.11-webpack.8

जब यह बनाता है तो मैं "दूर" की जड़ में "src / आस्तियों" से एक फ़ाइल को शामिल करने के लिए कोणीय-क्लि कैसे कहूं?

हम एक विंडोज़ होस्ट पर तैनात हैं और IIS को सब कुछ रूट करने के लिए बताने के लिए एक "web.config" फ़ाइल शामिल करने की आवश्यकता है। हम यह पूर्व RC4 कर रहे थे, लेकिन सभी अद्यतन के साथ यह दरार के माध्यम से गिर गया (मुझे याद नहीं है कि हमने यह कैसे किया)।

मैं GitHub रेपो डॉक्स का परिमार्जन कर रहा हूं और मुझे इस विषय के संबंध में कुछ भी उपयोग नहीं मिला है। शायद मैं गलत जगह पर हूँ?

में टीओसी , वहाँ एक बुलेट बिंदु "का निर्माण करने के लिए अतिरिक्त फ़ाइलें जोड़ना" है, लेकिन ऐसा लगता है कि खंड मौजूद नहीं है।

Comments

मूल रूप से आप npm के साथ फाइल कॉपी कर सकते हैं। पैकेज में स्क्रिप्ट में कॉपी कमांड जोड़ें। इसके अलावा इस lucasmreis.github.io/blog/npm-is-an-amazing-build-tool

— वादिम सेंटियाव

मैंने क्या किया (जो हैक भी लगता है) समाप्त कर दिया: एक फाइल कॉपी एनपीएम पैकेज स्थापित किया, फिर इस तरह "पैकेज.जसन" के "स्क्रिप्ट" खंड में एक मूल्य जोड़ा "copy:webConfig": "node node_modules/copy/bin/cli.js web.config dist"। मैंने एक पोस्ट बिल्ड स्क्रिप्ट भी जोड़ी "postbuild": "npm run copy:webConfig":। अन्य मुद्दों पर काम करने के लिए प्रतिलिपि प्राप्त करने की कोशिश कर रहे थे, लेकिन इसने चाल चली।

— किज़मर

हम्म को अज़ुरे आईआईएस नियमों और कोणीय सीएलआई के साथ ठीक वैसी ही आवश्यकता मिली

— रॉडनी

यहाँ उत्तर सही हैं, लेकिन अगर आपको प्रति वातावरण में अलग-अलग फाइलों को कॉपी करने की आवश्यकता है, तो मैं पढ़ने की सलाह देता हूं: stackoverflow.com/a/59162533/3306960

— मैनुअल लोपेरा

Answer 1

कोणीय-cli.json की "संपत्ति" संपत्ति को कोणीय-क्लि वेबपैक बिल्ड में कस्टम फ़ाइलों को शामिल करने के लिए कॉन्फ़िगर किया जा सकता है। तो, एक सरणी के रूप में "संपत्ति" संपत्ति मूल्य को कॉन्फ़िगर करें। उदाहरण के लिए:

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

उपरोक्त कॉन्फ़िगरेशन config.jsn और .htaccess को दूर के फ़ोल्डर में कोणीय-क्ली वेबपैक बिल्ड के दौरान कॉपी करेगा। उपरोक्त सेटिंग कोणीय-क्ली संस्करण 1.0.0-Beta.18 में काम किया है

Comments

"ऐप्स" के अंतर्गत होने की आवश्यकता है, उदाहरण: "ऐप्स": [{"एसेट्स": ["कॉन्फिगर / appConfig.json"]}]

— मैन्नी

एक सच्चे की तरह दिखता है, लेकिन मेरे लिए काम नहीं करता। "एसेट्स": "एसेट्स" और "एसेट्स": ["एसेट्स"] - कार्य, लेकिन "एसेट्स": ".htaccess", "एसेट्स": ["एसेट्स", ".htaccess"] - काम नहीं करता है। कोई सुझाव?

— ग्लीब

@gleb, "आस्तियों" की तरह जोड़ें: ["संपत्ति", ".htaccess"], मुझे लगता है कि यह आपके उद्देश्य की पूर्ति करेगा।

— एमडी अयूब अली सरकार

@MdAyubAliSarker, धन्यवाद, समस्या यह थी कि मैंने कोणीय-क्ली संस्करण 1.0.0-Beta.17 का उपयोग किया था। 1.0.0-Beta.19 मेरे लिए अच्छा काम करता है

— Gleb

ठीक है, इसे अनदेखा करें, एक प्रकार था - यह काम करता है। इसलिए Web.config को Src फ़ोल्डर की जड़ में जाने की जरूरत है और फिर JSON फाइल "संपत्ति": ["संपत्ति", "web.config"] जैसी दिखती है,

— रॉडनी

Answer 2

वर्तमान सही उत्तर:

टीम ने विशिष्ट फाइलों को कॉपी करने के लिए समर्थन जोड़ा है-आउटपुट फोल्डर में ( distडिफ़ॉल्ट रूप से) कोणीय सीएलआई के बाद के संस्करण में (बीटा 17 या 19 होगा - यह उम्र के लिए अंतिम 1.x रिलीज में है)।

आप इसे केवल सरणी में जोड़ सकते हैं angular-cli.jsonजैसे:

{
  ...
  "ऐप्स" [
    {
       "रूट": "src",
       "संपत्ति": [
         "संपत्ति",
         "Web.config"
       ],
       ...
    }
  ]
  ...
}

(ध्यान दें कि पथ srcफ़ोल्डर के सापेक्ष है )

मैं व्यक्तिगत रूप से इसका उपयोग करता हूं और यह ठीक काम करता है।

बीटा 24 के रूप में, मैंने एंगुलर सीएलआई में एक फीचर जोड़ा है जो यह सुनिश्चित करता है कि सभी assetsफाइलें और फ़ोल्डर्स वेबपैक देव सर्वर से ng testन चलाए जाने पर ही चलें ng serve।

यह यूनिट परीक्षणों ( ng test) के लिए उपयोग किए जाने वाले वेबपैक देव सर्वर में एसेट फ़ाइलों की सेवा का भी समर्थन करता है ।
(यदि आपको परीक्षणों के लिए कुछ JSON फ़ाइलों की आवश्यकता है, या कंसोल में 404 चेतावनियों को देखने से नफरत है)।
उन्हें पहले से ही परोसा जाता है ng e2eक्योंकि यह पूर्ण रूप से चलता है ng serve।

और इसमें और अधिक उन्नत विशेषताएं हैं, जैसे कि किसी फ़ोल्डर से आपको कौन सी फाइलें फ़िल्टर करनी हैं, और आउटपुट फ़ोल्डर का नाम स्रोत फ़ोल्डर से अलग होना चाहिए:

{
  ...
  "ऐप्स" [
    {
      "रूट": "src",
      "संपत्ति": [
        "संपत्ति",
        "Web.config":
        {
          // इस फ़ोल्डर में सामग्री की प्रतिलिपि बनाएँ
          "इनपुट": "../",
          // यह वाइल्डकार्ड से मेल खाता है
          "ग्लोब": "* .config",
          // और उन्हें इस फ़ोल्डर में 'dist` ('। '' के अर्थ में सीधे 'dist' में रखें)
          "आउटपुट": "।"
        }
      ],
      ...
    }
  ]
  ...
}

आप आधिकारिक दस्तावेज का भी उल्लेख कर सकते हैं: कोणीय गाइड - कार्यक्षेत्र कॉन्फ़िगरेशन ।

---

।

[केवल प्राप्त करने के लिए] मूल उत्तर (6 अक्टूबर, 2016):

यह वर्तमान में दुर्भाग्य से समर्थित नहीं है (बीटा -16 के रूप में)। मैंने टीम (web.config फ़ाइलों) के लिए सटीक चिंता जताई, लेकिन यह जल्द ही किसी भी समय (जब तक आप सीएलआई, आदि को फोर्क नहीं कर रहे हैं) नहीं हो रहा है।

इस मुद्दे का पालन करेंपूर्ण चर्चा और भविष्य के संभावित विवरण के लिए ।

पुनश्च

JSON फ़ाइल के लिए, आप इसे अंदर रख सकते हैं ./src/assets/। यह फ़ोल्डर जैसे-जैसे कॉपी होता है ./dist/assets/। यह वर्तमान व्यवहार है।

इससे पहले systemJS दिनों में एक और ./public/फ़ोल्डर था जिसे ./dist/सीधे कॉपी किया गया था , लेकिन यह वेबपैक संस्करणों में चला गया है, जिसे इस मुद्दे को चर्चा के लिए संदर्भित किया गया था।

Comments

इस विन्यास ने मेरे लिए काम किया: {"ग्लोब": " * / ", "इनपुट": "src / आस्तियों", "आउटपुट": "/ आस्तियों"},

— patrickbadley

Answer 3

एक समाधान (हालांकि मेरी राय में एक हैक का एक सा है) अपनी main.tsफ़ाइल में एक वैरिएबल घोषित करना है जिसके लिए आपको अतिरिक्त फ़ाइल की आवश्यकता होती है जिसे आप वेबपैक बिल्ड आउटपुट में शामिल करना चाहते हैं।

पूर्व:

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

जब वेबपैक इस परिवर्तनशील घोषणा के बयान का सामना 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.

एक आदर्श समाधान वेबपैक कॉन्फ़िगरेशन में होगा, लेकिन मैं यह नहीं angular-cli.jsonबता सकता कि कैसे कोणीय-क्लि का प्रबंधन किया जा रहा है ।

तो अगर किसी के पास एक बेहतर जवाब है जो एक कोणीय-क्ली उत्पन्न परियोजना के लिए वेबपैक कॉन्फ़िगरेशन का विस्तार करता है तो मुझे यह सुनना अच्छा लगेगा।

Answer 4

कोणीय 8 पाठकों के लिए ,

.htaccessहोना चाहिए src/.htaccess। निचे देखो,

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

सुनिश्चित करें कि आपने .htaccessफ़ाइल srcको अपनी परियोजना की निर्देशिका के अंदर रखा है ।

और उस में डालने के लिए फ़ाइल angular.json, नहीं हैangular-cli.json

(यदि आपको एक वैध htaccessफ़ाइल की आवश्यकता है , तो आप यहाँ एक पा सकते हैं - https://stackoverflow.com/a/57126352/714664 )

बस। आपके हिट होने पर इसे अब कॉपी किया जाना चाहिएng build --prod=true ।

आशा है कि यह किसी की मदद करता है।

चीयर्स,

Comments

और वह फ़ाइल जो पहले के उत्तरों में उल्लिखित है angular.json, वह नहीं angular-cli.jsonहै।

— mererlin

Answer 5

कोणीय-cli.json फ़ाइल में एक "स्क्रिप्ट" अनुभाग है। आप वहां सभी तृतीय पक्ष जावास्क्रिप्ट फ़ाइलों को जोड़ सकते हैं।

Comments

हां, लेकिन web.config एक जावास्क्रिप्ट फ़ाइल नहीं है। क्या यह भी नकल करेगा कि यह जेएस होने की उम्मीद किए बिना और इसे बाकी जेएस के साथ जोड़कर?

— किज़मर

@ किज़मर, हाँ, यह काम नहीं करेगा। इसे js के रूप में लोड करने का प्रयास (और विफल) होगा।

— नाथन कूपर

Answer 6

मेरे मामले में मैंने Angular संस्करण 5 का उपयोग किया है , इसलिए मैंने एनजी बिल्ड-prod कमांड चलाते समय Staticfile.txt नामक फाइल बनाने की कोशिश की । फ़ाइल एक्सटेंशन देना सुनिश्चित करें, अन्यथा यह फ़ाइल नहीं बनाएगा।

Answer 7

कोणीय को संशोधित करें ।json।
संपत्ति सरणी में प्रविष्टि जोड़ें:

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