typescript - मैं वास्तव में एक कोणीय 2+टाइपस्क्रिप्ट+systemjs ऐप कैसे तैनात कर सकता हूं?




angular (5)

Angular.io वेबसाइट के तहत, उन्नत / तैनाती अनुभाग के तहत, यह अनुशंसा की जाती है कि तैनात करने का सबसे सरल तरीका 'सर्वर के विकास के वातावरण की नकल करना' है।

  1. के तहत अनुभाग के माध्यम से जाना: सरल तैनाती संभव है। अंतिम प्रोजेक्ट फाइलें कोड सेक्शन के अंदर दिखाई जाती हैं। ध्यान दें कि यह पहले से ही वेब से npm पैकेज फ़ाइलों को लोड करने के लिए कोड सेट करता है (स्थानीय npm_modules फ़ोल्डर से)।

  2. सुनिश्चित करें कि यह आपके स्थानीय कंप्यूटर (npm start) पर चल रहा है। फिर प्रोजेक्ट फ़ोल्डर के तहत, आपके द्वारा सेट किए गए S3 बाल्टी के सब-फोल्डर के तहत सब कुछ कॉपी करें। आप कॉपी करने के लिए ड्रैग-एंड-ड्रॉप का उपयोग कर सकते हैं, उस प्रक्रिया के दौरान, आपको फ़ाइलों के लिए अनुमति सेटिंग का चयन करने का विकल्प मिलता है, उन्हें 'हर किसी के लिए' पठनीय बनाना सुनिश्चित करें।

  3. बकेट 'प्रॉपर्टीज़' टैब के तहत, 'स्टेटिक वेबसाइट होस्टिंग' पैनल देखें, 'वेबसाइट को होस्ट करने के लिए इस बकेट का उपयोग करें' विकल्प पर जाँच करें और इंडेक्स डॉक्यूमेंट और एरर डॉक्यूमेंट दोनों के लिए 'index.html' निर्दिष्ट करें।

  4. स्थिर वेबसाइट एंडपॉइंट पर क्लिक करें, आपकी परियोजना अच्छी तरह से चल रही है!

वहाँ angular.io पर एक त्वरित ट्यूटोरियल है जो टाइपस्क्रिप्ट और सिस्टमज का उपयोग करता है। अब जब मुझे वह मीनियाप चल रहा है, तो मैं कुछ तैनात करने योग्य कैसे बनाऊंगा? मुझे इसके बारे में कोई जानकारी नहीं मिली।

क्या मुझे System.config में किसी भी अतिरिक्त टूल, किसी भी अतिरिक्त सेटिंग्स की आवश्यकता है?

(मुझे पता है कि मैं वेबपैक का उपयोग कर सकता हूं और एक बंडल बना सकता हूं। जेएस, लेकिन मैं सिस्टमज का उपयोग करना चाहूंगा क्योंकि यह ट्यूटोरियल में उपयोग किया जाता है)

क्या कोई इस सेटअप के साथ अपनी निर्माण प्रक्रिया साझा कर सकता है (कोणीय 2, टाइपस्क्रिप्ट, सिस्टमज)


आप angular2-cli build कमांड का उपयोग कर सकते हैं

ng build -prod

https://github.com/angular/angular-cli/wiki/build#bundling

ng build -prod या ng serve -prod बंडल के माध्यम से -प्रोड फ्लैग के साथ बनाई गई सभी निर्भरता को एक सिंगल फाइल में बनाता है, और ट्री- ng serve -prod तकनीकों का उपयोग करता है।

अद्यतन करें

यह उत्तर प्रस्तुत किया गया था जब कोणीय 2 rc4 में था

मैंने इसे फिर से कोणीय-क्ली बीटा 21 और कोणीय 2 ^ 2.1.0 पर आजमाया था और यह उम्मीद के मुताबिक काम कर रहा है

इस उत्तर के लिए कोणीय-क्ली के साथ ऐप को इनिशियलाइज़ करने की आवश्यकता है जिसका आप उपयोग कर सकते हैं

ng new myApp

या किसी मौजूदा पर

ng init

अपडेट 08/06/2018

कोणीय 6 के लिए वाक्य रचना अलग है।

ng build --prod --build-optimizer

documentation जाँच करें


इस स्तर पर समझने वाली महत्वपूर्ण बात यह है कि निम्नलिखित कॉन्फ़िगरेशन का उपयोग करके, आप सीधे संकलित जेएस फाइलों को समाप्‍त नहीं कर सकते हैं।

टाइपस्क्रिप्ट कंपाइलर कॉन्फ़िगरेशन में:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "declaration": false,
    "stripInternal": true,
    "module": "system",
    "moduleResolution": "node",
    "noEmitOnError": false,
    "rootDir": ".",
    "inlineSourceMap": true,
    "inlineSources": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

HTML में

System.config({
  packages: {
    app: {
      defaultExtension: 'js',
      format: 'register'
    }
  }
});

तथ्य की बात के रूप में, इन जेएस फाइलों में गुमनाम मॉड्यूल शामिल होंगे। एक अनाम मॉड्यूल एक JS फाइल है जो System.register का उपयोग करता है लेकिन पहले पैरामीटर के रूप में मॉड्यूल नाम के बिना। यह तब होता है जब टाइपस्टेप कंपाइलर डिफ़ॉल्ट रूप से उत्पन्न होता है जब सिस्टमज को मॉड्यूल मैनेजर के रूप में कॉन्फ़िगर किया जाता है।

तो अपने सभी मॉड्यूल को एक सिंगल जेएस फ़ाइल में रखने के लिए, आपको अपने टाइपस्क्रिप्ट कंपाइलर कॉन्फ़िगरेशन में outFile संपत्ति का लाभ उठाने की आवश्यकता है।

आप ऐसा करने के लिए निम्न अंदर gulp का उपयोग कर सकते हैं:

const gulp = require('gulp');
const ts = require('gulp-typescript');

var tsProject = ts.createProject('tsconfig.json', {
  typescript: require('typescript'),
  outFile: 'app.js'
});

gulp.task('tscompile', function () {
  var tsResult = gulp.src('./app/**/*.ts')
                     .pipe(ts(tsProject));

  return tsResult.js.pipe(gulp.dest('./dist'));
});

इसे कुछ अन्य प्रसंस्करण के साथ जोड़ा जा सकता है:

  • चीजों को संकलित करने के लिए संकलित टाइपस्क्रिप्ट फाइलें
  • एक app.js फ़ाइल बनाने के लिए
  • तीसरे पक्ष के पुस्तकालयों के लिए एक vendor.js फ़ाइल बनाने के लिए
  • boot.js को boot.js करने वाले मॉड्यूल को आयात करने के लिए boot.js फ़ाइल बनाने के लिए। इस फाइल को पेज के अंत में शामिल किया जाना चाहिए (जब सभी पेज लोड हो जाता है)।
  • इन दो फाइलों को ध्यान में रखने के लिए index.html अपडेट करें

निम्न निर्भरताएँ गल्प कार्यों में उपयोग की जाती हैं:

  • घूंट-concat
  • घूंट एचटीएम्एल की जगह
  • घूंट-टाइपप्रति
  • घूंट-रूप बिगाड़ना

निम्नलिखित एक नमूना है इसलिए इसे अनुकूलित किया जा सकता है।

  • app.min.js फ़ाइल बनाएँ

    gulp.task('app-bundle', function () {
      var tsProject = ts.createProject('tsconfig.json', {
        typescript: require('typescript'),
        outFile: 'app.js'
      });
    
      var tsResult = gulp.src('app/**/*.ts')
                       .pipe(ts(tsProject));
    
      return tsResult.js.pipe(concat('app.min.js'))
                    .pipe(uglify())
                    .pipe(gulp.dest('./dist'));
    });
  • vendors.min.js फ़ाइल बनाएँ

    gulp.task('vendor-bundle', function() {
      gulp.src([
        'node_modules/es6-shim/es6-shim.min.js',
        'node_modules/systemjs/dist/system-polyfills.js',
        'node_modules/angular2/bundles/angular2-polyfills.js',
        'node_modules/systemjs/dist/system.src.js',
        'node_modules/rxjs/bundles/Rx.js',
        'node_modules/angular2/bundles/angular2.dev.js',
        'node_modules/angular2/bundles/http.dev.js'
      ])
      .pipe(concat('vendors.min.js'))
      .pipe(uglify())
      .pipe(gulp.dest('./dist'));
    });
  • boot.min.js फ़ाइल बनाएँ

    gulp.task('boot-bundle', function() {
      gulp.src('config.prod.js')
        .pipe(concat('boot.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
     });

    config.prod.js बस निम्नलिखित शामिल हैं:

     System.import('boot')
        .then(null, console.error.bind(console));
  • index.html फ़ाइल को अपडेट करें

    gulp.task('html', function() {
      gulp.src('index.html')
        .pipe(htmlreplace({
          'vendor': 'vendors.min.js',
          'app': 'app.min.js',
          'boot': 'boot.min.js'
        }))
        .pipe(gulp.dest('dist'));
    });

    index.html निम्न की तरह दिखता है:

    <html>
      <head>
        <!-- Some CSS -->
    
        <!-- build:vendor -->
        <script src="node_modules/es6-shim/es6-shim.min.js"></script>
        <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
        <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>
        <script src="node_modules/rxjs/bundles/Rx.js"></script>
        <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
        <script src="node_modules/angular2/bundles/http.dev.js"></script>
        <!-- endbuild -->
    
        <!-- build:app -->
        <script src="config.js"></script>
        <!-- endbuild -->
      </head>
    
      <body>
        <my-app>Loading...</my-app>
    
        <!-- build:boot -->
        <!-- endbuild -->
      </body>
    </html>

ध्यान दें कि System.import('boot'); आपके सभी एप्लिकेशन घटकों के app.min.js फ़ाइल से पंजीकृत होने की प्रतीक्षा करने के लिए शरीर के अंत में किया जाना चाहिए।

मैं यहाँ CSS और HTML मिनिफिकेशन को संभालने का तरीका नहीं बताता हूँ।


मैंने अपने एनजी 2 प्रोजेक्ट की सेवा के लिए बैकेंड पर एक्सप्रेस का उपयोग किया। आप इसे मेरे github पृष्ठ से देख सकते हैं: https://github.com/echonax/ng2-beta-and-test-framework


सबसे आसान तरीका है कि मैंने systemJs के लिए कोणीय rc1 को बंडल करने के लिए पाया है कि gulp और systemjs-builder :

gulp.task('bundle', function () {
    var path = require('path');
    var Builder = require('systemjs-builder');

    var builder = new Builder('/node_modules');

    return builder.bundle([
        '@angular/**/*.js'
        ], 
        'wwwroot/bundle.js', 
        { minify: false, sourceMaps: false })
        .then(function () {
            console.log('Build complete');
        })
        .catch(function (err) {
            console.log('Build error');
            console.log(err);
        });
});

जैसा कि टिप्पणियों में कहा गया है, systemJs के पास इस समय समस्याएँ हैं जब moduleId: module.id का उपयोग करते हुए घटकों को moduleId: module.id

https://github.com/angular/angular/issues/6131

वर्तमान अनुशंसा (कोणीय 2 आरसी 1) स्पष्ट पथों का उपयोग करने के लिए प्रतीत होती है अर्थात moduleId: '/app/path/'





systemjs