AOT和總覽：只有捆綁main.js並沒有別的

我想實現每https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#tree-shaking AOT和總覽：只有捆綁main.js並沒有別的

我每運行彙總AOT和彙總：「node_modules /的.bin /彙總」 -c腳本/ rollup- config.js

結果是一個build.js文件，只有條目文件，沒有別的。有沒有錯誤，只是一個警告：「‘默認’從外部模塊‘彙總’進口，但從來沒有使用過」

的「AOT」文件夾中確實包含所有相關的編譯ngfactory文件。

以下是入口文件：

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

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

的彙總，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() 
    ] 
}

和我systemjs以防其相關：

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

我的文件夾結構如下：

[Visual Studio項目] /腳本/ AOT
[Visual Studio項目] /腳本/應用
[Visual Studio項目] /scripts/app/main.js
[Visual Studio項目] /腳本/rollup-config.js
[Visual Studio項目] /scripts/tsconfig-aot.json

我的環境：

VS 2015年
角：2.4.0
節點：V5.5.0
打字稿：2.0.10
彙總：0.41.4
彙總 - 插件節點排解：2.0.0
彙總 - 插件 - CommonJS的：7.0.0
彙總 - 插件，醜化：1.0.1

來源

2017-01-30 Ques Tion

問題解決了嗎？ – echonax

對不起，它沒有解決。公司讓我暫時休息一下，沒有時間去測試給出的解決方案。 –

好吧：/我也被困在一個類似的問題..努力寫出「不友好」的角碼:-) – echonax

在你的[visual studio項目]/scripts/aot文件夾中，應該有一個main.ts文件，visual studio會使用t sconfig.json而不是tsconfig-aot.json將其編譯爲main.js，檢查你的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", 
    }

來源

2017-02-08 16:27:01 ylu20

這爲我解決了這個問題。當我跟着食譜時，我錯過了在我的tsconfig-aot.json中將模塊從「commonjs」更改爲「es2015」。 – fooser

我的main.js文件使用es2015標準，並且仍然有相同的錯誤。 –

我打算將其標記爲答案，因爲它有點相關。不只是main.js，但AOT中的所有外部/內部文件都需要es2015投訴。 –

對於AOT工作，你需要確保你產生ES 6模塊加載語法：

彙總只能具有自營進出口語句樹搖ES2015模塊。

tsconfig.json：

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

來源

2017-02-04 04:43:06 pixelbits

我也被正式angular2 AOT guilde自己和下面，由於缺乏我創造了這個github上repository一個簡單的工作的例子。我希望它能幫助你。

如果你是Windows用戶，你一定要能夠得到它git-bash終端（由我測試）工作。

來源

2017-02-06 15:11:13

AOT和總覽：只有捆綁main.js並沒有別的

回答

相關問題