Angular AOT/Rollup帶有沒有默認導出的模塊（如immutable.js，moment.js）

我嘗試調整我的角度應用程序以準備好AOT編譯和Tree Shaking（彙總）。但我有使用沒有默認導出（immutable.js，moment.js，...）的模塊的問題。根據typscript（看起來here）它只能使用這樣的模塊與以下語句：import x = require('x')或import * as x from 'x' 但這兩個語句會導致累積過程中的問題。在某些情況下，我在彙總過程中得到一個錯誤：Cannot call a namespace ('x')並在某些情況下，我得到一個運行時錯誤：x is undefinedAngular AOT/Rollup帶有沒有默認導出的模塊（如immutable.js，moment.js）

這裏你可以找到我的彙總-config.js和tsconfig-aot.json tsconfig-aot_rollup-config.zip

我需要在AOT編譯和彙總期間使用像immutable.js，moment.js這樣的軟件包。有沒有辦法做到這一點？

謝謝！

來源

2017-02-16 Martin Schagerl

UPDATE

我遇到了一個問題與我以前的答案。這是我在兩個SystemJ中使用AoT/rollup的解決方案。

我的import語句如下：

import * as moment from 'moment'; 
const momentJs = (moment as any).default ? (moment as any).default : moment;

然後，在你的代碼，這樣使用它：

const startDateString = momentJs(startDate).format('YYYY-MM-DD');

這是由於採用兩種不同的方法來解決進口SystemJs和彙總沒有默認導出的模塊。

我有兩個TypeScript配置文件，一個用於systemJs，一個用於運行AoT構建。他們都有這個標誌集compilerOptions

"allowSyntheticDefaultImports": true

（前面的答案）

我跑進這個確切的問題。我能得到它具有以下工作：

var moment = require('moment'); //works

，而不是

import moment from "moment"; // won't work

或

import moment = require('moment'); //won't work

在我彙總的配置，我也有：

commonjs({ 
     include: [ 
      'node_modules/rxjs/**', 
      'node_modules/moment/**', 
      'node_modules/hammerjs/**' 
     ] 
    }),

這個東西指出我在正確的方向與this SO answer相似的問題。

上述解決方案適用於Angular的SystemJs和AoT/Rollup流程。它感覺有點不好意思，因爲它不是導入模塊的'典型'打字方式，但它引起了我的注意。

來源

2017-02-22 21:25:49 Scot

非常感謝，您的方法有效！ –

更新對我很好，謝謝！ –

它也適用於我（更新的答案）。太感謝了！ –

彙總僅適用於es6。嘗試改變目標在tsconfig：

"target": "es6"

當彙總會結束，你可以編譯束與打字稿到ES5，與選項allowJs：真。

p.s. require是一個Webpack方式，Rollup使用es6導入語法。

來源

2017-02-17 04:06:12 Pavel

你的接近不起作用。我嘗試以下操作： - tsconfig-aot.json：將目標更新爲ES6 - 運行轉譯：'ngc -p tsconfig -aot.json' - 成功完成 - 運行彙總：'rollup -c rollup- config.js' - 完成以下錯誤：'？無法調用命名空間（'時刻'）' 在代碼中，我使用以下語句導入時刻：'import * as moment from「moment」;' 是否有問題？謝謝！ –

ngc不會編譯你的打字稿。您應該更新不是tsconfig-aot.json，而是您的主要tsconfig.json（或tsconfig-prod.json，保留專用於生產版本）。無論如何，請提供您的編譯的js文件。 – Pavel

我發現rollup-config.js在ts cookbook中，他們確實在commonJs中包含了特定的rxjs。如果您從僅包含rxjs進行更改，它也會處理第三方模塊。

例如，我使用angular2-實現，所以：

commonjs({ 
    include: [ 
    'node_modules/rxjs/**', 
    'node_modules/angular2-materialize/**' 
    ],

或乾脆包括所有（發現更好的，測試build.js，大小相同）：

commonjs({ 
    include: 'node_modules/**' 
})

來源

2017-02-19 10:07:58

我已經嘗試過了，但它並沒有幫助moment.js和immutable.js –

請你可以在AOT/Rollup構建中提供angular2-materialize的工作示例 - 我真的在與這個 –

@ P.Moloney幸運的是，我有一個剛剛爲我自己創建的初學者項目..（自述文件是針對vsCode的）..自述文件對我來說並不是很詳細......它主要針對scss編譯器 https：// github.com/Blazzze/Angular2CustomQuickstart –

Angular AOT/Rollup帶有沒有默認導出的模塊（如immutable.js，moment.js）

回答

相關問題