2016-12-06 13 views
1

JiTとAoTの両方を実行できるようにコードベースを設定しようとしています。私はangular documentation hereに従っており、両方とも個別に作業することに成功しました。角2 - JITとAoTの両方の外部ライブラリをインポート

私が直面している問題は、外部ライブラリ、特にモーメントjをインポートしようとするときです。 JITについては

私はSystemJS、

// systemjs.config.js 

System.config({ 
    map: { 
     // ... 
     moment: '/node_modules/moment', 
    }, 
    packages: { 
     // ... 
     moment: { 
      defaultExtension: 'js' 
     } 
    } 
}); 

されたコンフィギュレーションを使用しています。そしてtypescriptです内のコンポーネントにインポートするために、私はちょうど

// some-component.component.ts 

import * as moment from 'moment/moment'; 

を行うことができますこれは正常に動作します地方開発のため。

ただし、AoTをロールアップでコンパイルしようとすると、Cannot call a namespace ('moment')コンパイルエラーが発生します。ロールアップの設定にカップルの変更後に、コンポーネント内のimport文は、IBMアカデミーとロールアップのための素晴らしい作品

// some-component.component.ts 

import moment from 'moment'; 

する必要がありますので、私は、this thread here次のようにその問題を解決しましたが、今SystemJSはそれを理解する問題があります。

私はループから脱出することはできません。私は仕事をすることができますが、同時に両方をすることはできません。ロールアップで必要なインポートステートメントをSystemJSに理解させる方法はありますか?私はその可能性があるとは思わない。

EDIT

私は、少なくともそれを動作させるための方法を見つけたが、それはまさに理想的ではありません。インポートする代わりに、私はそれをanyと宣言してから、スクリプトタグを使って外部的にライブラリにロードします。だから今コンポーネントは、これは私がIBMアカデミービルドで瞬間をバンドルすることはできませんので、これは理想的ではない、

// some-component.component.ts 

declare const moment: any; 

私が言ったようで、それはまたanyとして「一瞬VARを解釈するtypescriptですが強制的に今ではそのタイプについてはわかりません。だから、これはまだ私の質問に正確に答えていませんが、これは少なくとも動作します。

+0

私はあなたが言及したスレッドのOPです。あなたはそれを行うためのより良い方法を見つけることができましたか?私はなぜ誰もこれについて話をしていないように思っています。それはかなり深刻な制限です... –

+0

残念なことに、その特定のプロジェクトに対する私の唯一の依存は瞬間だったので、私はそれを行う他の方法を見つけることができなかったので、私のハックなソリューションで暮らすことに決めました。私は環境変数を使ってどのimport文が使われているかを制御するなどの他のオプションを考えましたが、決してそれを試しました。私はwebpackが輸入品のようにAoTを処理できるかどうかも疑問に思ったが、やはり試したことはなかった。 – davidmk

答えて

1

キープインポート:rollup.jsへ

import * as moment from 'moment'; 

と追加プラグイン:カスタムrollup.jsプラグインを追加したくない人のために

{ 
    name: 'replace moment imports', 
    transform: code => ({ 
     code: code.replace(/import\s*\*\s*as\s*moment/g, 'import moment'), 
     map: { mappings: '' } 
    }) 
}, 
+1

[複数の質問に同じ回答]を追加しないでください(http://meta.stackexchange.com/questions/104227/is-it-acceptable-to-ad??da-duplicate-answer-to-several-質問)。あなたが十分な評判を得たら、最高のものに答え、残りを重複としてフラグを立てます。重複していない場合は、質問への投稿を調整します。 –

+0

赤い質問がありますか?それは全く重複していません - 同様の方法で解決できます。 –

0

、またはパッケージングツールを使用していますng-packagrのように、インポートステートメントを次のソリューションに置き換えることを検討してください。

import * as momentImported from 'moment'; 
const moment = momentImported; 

このソリューションは、元々は、以下のGithubの問題によって提供されました:
https://github.com/dherges/ng-packagr/issues/217#issuecomment-339460255

関連する問題