angular4のAOTスロー必要がエラー

Question

が定義されていない私は、角度4でAOTを行うにはしばらく帖過ごし、常にこのエラーました： 捕捉されないにReferenceErrorを：

が定義されていない必要私はjqueryのを使用していますので、私はこのエラーを得ました私のアプリでは、アプリケーションでは、私はこのコードを持っています：私はこれを削除した場合

var jQuery = require('jquery'); 
jQuery("xxxx").val() 

、全体AOTは魅力のように働きました。

私のTSconfig-aot.json：

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "es2015", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
"lib": ["es5", "dom"], 
    "noImplicitAny": true, 
    "suppressImplicitAnyIndexErrors": true 
    }, 
"files": [ 
    "src/app/app.module.ts", 
    "src/main.ts" 
    ], 

    "angularCompilerOptions": { 
    "genDir": "aot", 
    "skipMetadataEmit" : true 
} 
} 

そして、私のロールアップの設定：あなたはその後、AOTはないでしょう、あなたのNG4アプリ内（）必要が使用している場合

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: 'src/main.js', 
    dest: 'public/build.js', // output a single application bundle 
    sourceMap: false, 
    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/**','node_modules/jquery/**'] 
     }), 
     uglify() 
    ] 
} 

は、この平均値をい作業？

ありがとうございましたあなたのアドバイスを聞いて願っています。

私はこれを使ってみました： import * as jQuery from 'jquery'; これはrequireと同じように機能し、JITモードではうまくいきました。また、ngcパッケージも問題ありません。

Cannot call a namespace ('jQuery') 
src/app/app.component.js (14:8) 
12:  } 
13:  AppComponent.prototype.ngOnInit = function() { 
14:   jQuery('h1').html('New Content'); 
      ^
15:  }; 
16:  return AppComponent; 

これは、更新されたコード：

import * as jQuery from 'jquery'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html', 
    styleUrls: ['./scss/app.component.scss'] 
}) 
export class AppComponent implements OnInit{ 

    ngOnInit(){ 

     jQuery('h1').html('New Content'); 

    }  

} 

任意のアイデア私はロールアップを使用する場合でも、入れて、このエラーを持っていますか？

Answer 1

requireと--module es2015を使用することはできません。

これは、タイプスクリプトのコンパイルエラーを引き起こします。唯一の理由は、TypeScriptのimport..requireという形式ではなく、var..requireの形式を使用していることです。

これはコンパイルエラーを発生させない唯一の理由は、@typesパッケージのように周囲の宣言がrequireであることです。

requireはイグニッションモジュールの構文の一部ではないため、ロールアップを使用しているため、少なくともプラグインと設定を追加しない限り、認識されませんので、動作する可能性は非常に低いです。上記のjQueryが定義されていないことを、実行時にスローした場合

import jQuery from 'jquery'; 

を試してみてください、私はあなたがエラー

Cannot call a namespace ('jQuery') Which is actually the correct spec compliant behavior when using the form

を受けている見るあなたの更新の質問を見てみると

import * as jQuery from 'jquery'; 

を試してみてください

import * as ns from 'module'; 

を指定して、その値をエクスポートするためにmodule.exports（Export = TypeScript）に割り当てるCommonJSモジュールからインポートします。

CommonJSモジュールとのInteropは、defaultエクスポートの下でmodule.exportsの値を利用可能にし、インポートされるモジュール名前空間オブジェクトのdefaultプロパティに変換されます。それは

import jQuery from 'jquery'; 

が実際に残念ながら

import {default as jQuery} from 'jquery'; 

のためだけの速記であるフォームに、相互運用が異なり、それを扱う多くの環境、transpilers、ローダー、およびbundlersで遠くに滑らかからであると言うことです。

NodeJS自体でも実装されていません。

これは、TypeScriptが間違ったことをする非常にまれな領域の1つです。このケースはまったく処理しません。インポートされたモジュールの名前空間のオブジェクトが[[コール]スロットを持っていないので、代わりに

ns() 

のための仕様に準拠した環境に失敗します

import * as ns from 'module'; 

フォームを推薦します。

幸運なことに、TypeScript出力es2015をロールアップなどの別のツールで処理することで、現在行っているようにこの動作を回避できます。

もう1つのオプションは、TypeScriptのsystemモジュールオプションとSystemJSを使用することです。

これはちょっと詳細すぎると同時に少し手を振っているように見えるかもしれませんが、私たちがいつかそれを修正できるように実際にどのように壊れたinteropが実現しているかを知ることは重要です。

更新：

The TypeScript team is actively looking into the問題と、正しい構文

import jQuery from 'jquery'; 

は、最終的に別のtranspilation層を必要とせずに活字体によってサポートされることが表示されます。

いつか、子供たちはこの落とし穴について知る必要なく、ウェブアプリケーションを書くことができます！