AOT और रोल-अप: "node_modules/.bin/रोलअप" -c लिपियों/rollup-: केवल main.js और कुछ नहीं

Question

मैं AOT और प्रति https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#tree-shaking

मैं प्रति रोलअप चलाने रोलअप को लागू करने के कोशिश कर रहा हूँ बंडल config.js

और परिणाम केवल build फ़ाइल के साथ build.js फ़ाइल है और कुछ भी नहीं। कोई त्रुटि नहीं है और केवल एक चेतावनी है: "डिफ़ॉल्ट 'बाहरी मॉड्यूल' रोलअप 'से आयात किया जाता है लेकिन कभी भी"

"एओटी" फ़ोल्डर में सभी प्रासंगिक संकलित ngfactory फ़ाइलें होती हैं।

import { platformBrowser } from '@angular/platform-browser'; 
import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory'; 

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); 

रोलअप-js.config:

बाद प्रविष्टि फ़ाइल है

(function (global) { 
    System.config({ 
     paths: { 
      // paths serve as alias 
      'npm:': 'libs/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: 'approot', 
      appjit: 'approot', 
      // angular bundles 
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
      // other libraries 
      'rxjs': 'npm:rxjs', 
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', 
      'jquery': 'npm:jquery/dist/jquery.min.js', 
      'moment': 'npm:moment/moment.js', 
      'ng2-bootstrap/ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js', 
      'ng2-select/ng2-select': 'npm:ng2-select/ng2-select.js', 
      "ng2-popover": "libs/ng2-popover", 
      'angular2-ui-switch': 'libs/angular2-ui-switch/dist/index.js', 
      "angular2-text-mask": "libs/angular2-text-mask/dist", 
      "text-mask-core": "libs/text-mask-core/" 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       main: './app/main.js', 
       defaultExtension: 'js' 
      }, 
      appjit: { 
       main: './app/main-jit.js', 
       defaultExtension: 'js' 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      }, 
      'angular-in-memory-web-api': { 
       main: './index.js', 
       defaultExtension: 'js' 
      }, 
      'libs/ng2-select': { 
       defaultExtension: 'js' 
      }, 
      'libs/ng2-popover': { 
       main: "index.js", 
       defaultExtension: 'js' 
      }, 
      'libs/angular2-text-mask/dist': { 
       main: "angular2TextMask.js", 
       defaultExtension: 'js' 
      }, 
      'libs/text-mask-core/': { 
       main: "textMaskCore.js", 
       defaultExtension: 'js' 
      }, 
      'libs/angular2-ui-switch': { 
       main: "index.js", 
       defaultExtension: 'js' 
      } 
     } 
    }); 
})(this); 

मेरे फ़ोल्डर संरचना:

import rollup  from 'rollup' 
import nodeResolve from 'rollup-plugin-node-resolve' 
import commonjs from 'rollup-plugin-commonjs'; 
import uglify  from 'rollup-plugin-uglify' 

export default { 
    entry: 'scripts/app/main.js', 
    dest: 'scripts/app/build.js', // output a single application bundle 
    sourceMap: true, 
    sourceMapFile: 'scripts/app/build.js.map', 
    format: 'iife', 
    onwarn: function(warning) { 
     // Skip certain warnings 

     // should intercept ... but doesn't in some rollup versions 
     if (warning.code === 'THIS_IS_UNDEFINED') { return; } 
     // intercepts in some rollup versions 
     if (warning.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1) { return; } 

     // console.warn everything else 
     console.warn(warning.message); 
    }, 
    plugins: [ 
     nodeResolve({jsnext: true, module: true}), 
     commonjs({ 
      include: '../node_modules/rxjs/**' 
     }), 
     uglify() 
    ] 
} 

और सिर्फ मामले उसके प्रासंगिक में मेरी systemjs निम्नानुसार है:

• [दृश्य स्टूडियो परियोजना]/scripts/AOT
• [दृश्य स्टूडियो परियोजना]/scripts/एप्लिकेशन
• [दृश्य स्टूडियो परियोजना] /scripts/app/main.js
• [दृश्य स्टूडियो परियोजना]/लिपियों /rollup-config.js
• [दृश्य स्टूडियो परियोजना] /scripts/tsconfig-aot.json

मेरे पर्यावरण:

• वी.एस. 2015
• कोणीय: 2.4.0
• नोड: v5.5.0
• टाइपप्रति: 2.0.10
• रोलअप: 0.41.4
• रोलअप-प्लगइन-नोड संकल्प: 2.0.0
• रोलअप-प्लगइन-commonjs: 7.0.0
• रोलअप-प्लगइन-बदसूरत बनाना: 1.0.1

Answer 1

अपने [दृश्य स्टूडियो परियोजना]/scripts/AOT फ़ोल्डर में, वहाँ एक main.ts फ़ाइल होना चाहिए, दृश्य स्टूडियो का उपयोग टी sconfig.json main.js के लिए यह संकलन नहीं बल्कि tsconfig-aot.json होगा, अपने main.js फ़ाइल की जाँच, आप

तरह

"use strict"; 
var platform_browser_1 = require("@angular/platform-browser"); 
var app_module_ngfactory_1 = require("./app.module.ngfactory"); 
platform_browser_1.platformBrowser().bootstrapModuleFactory(app_module_ngfactory_1.AppModuleNgFactory); 

अपने tsconfig.json में अद्यतन करने की आवश्यकता है, तो ऐसा लगता है:

{ 
    "module": "commonjs", 
    } 

करने के लिए

{ 
    "module": "es2015", 
    } 

Answer 2

AOT काम करने के लिए, आप सुनिश्चित करें कि आप तों जेनरेट कर रहे हैं की आवश्यकता होगी 6 मॉड्यूल लोडिंग सिंटैक्स:

रोलअप केवल वृक्ष शेक ES2015 मॉड्यूल कर सकता है जिसमें आयात और निर्यात विवरण हैं।

tsconfig.json:

{ 
    "compilerOptions" { 
     "module": "es6", 
     ... 
    } 
} 

Answer 3

मैं भी एक साधारण काम कर उदाहरण मैं इस GitHub repository बनाया है की कमी के कारण सरकारी angular2 AOT guilde अपने आप को और पीछा कर रहा था। मुझे उम्मीद है इससे आपको मदद मिली होगी।

यदि आप एक विंडोज उपयोगकर्ता हैं, तो आपको निश्चित रूप से git-bash टर्मिनल (मेरे द्वारा परीक्षण) में काम करने में सक्षम होना चाहिए।