AOT & Roll-Up: Chỉ bó main.js và không có gì khác

Question

Tôi cố gắng để thực hiện AOT và Rollup mỗi https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#tree-shaking

tôi chạy rollup mỗi: "node_modules/.bin/cuộn lên" kịch bản -c/rollup- config.js

và kết quả là tệp build.js chỉ với tệp nhập và không có gì khác. Không có lỗi và chỉ một cảnh báo: "mặc định" được nhập từ mô-đun bên ngoài 'rollup' nhưng không bao giờ được sử dụng "

Thư mục" aot "chứa tất cả các tệp ngfactory được biên dịch có liên quan.

Sau đây là tập tin nhập:

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

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); 

Các rollup-js.config:

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() 
    ] 
} 

và systemjs của tôi chỉ trong trường hợp có liên quan của nó:

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

cấu trúc thư mục My như sau:

• [dự án visual studio]/scripts/AOT
• [dự án visual studio]/scripts/app
• [dự án visual studio] /scripts/app/main.js
• [dự án visual studio]/script /rollup-config.js
• [dự án visual studio] /scripts/tsconfig-aot.json

môi trường của tôi:

• VS 2015
• góc: 2.4.0
• Node: v5.5.0
• nguyên cảo: 2.0.10
• rollup: 0.41.4
• rollup-plugin-node-quyết tâm: 2.0.0
• rollup-plugin-commonjs: 7.0.0
• rollup-plugin làm xấu đi: 1.0.1

Answer 1

Trong thư mục [project studio]/scripts/aot của bạn, cần có tệp main.ts, studio trực quan sẽ biên dịch nó thành main.js bằng t sconfig.json nhưng không phải tsconfig-aot.json, kiểm tra tập tin main.js của bạn, nếu nó trông giống như

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

bạn cần cập nhật trong tsconfig.json bạn:

{ 
    "module": "commonjs", 
    } 

để

012.

{ 
    "module": "es2015", 
    } 

Answer 2

Đối AOT để làm việc, bạn sẽ cần phải đảm bảo rằng bạn đang tạo es Cú pháp tải 6 mô-đun:

Việc cuộn chỉ có thể mô-đun Tree Shake ES2015 có câu lệnh nhập và xuất.

tsconfig.json:

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

Answer 3

Tôi cũng được sau khi angular2 AOT chính thức guilde bản thân mình và do thiếu một ví dụ làm việc đơn giản, tôi đã tạo ra github này repository. Tôi hy vọng nó sẽ giúp bạn.

Nếu bạn là người dùng cửa sổ, bạn chắc chắn sẽ có thể làm cho nó hoạt động trong git-bash thiết bị đầu cuối (được thử nghiệm bởi tôi).