angular4 AOT擲要求是沒有定義的錯誤

Question

我花了一刀一個，而做AOT具有角4，始終得到這個錯誤： 未捕獲的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 
} 
} 

我的彙總配置：

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

這是否意味着，如果你使用的需要（）你NG4內部應用程序，則AOT不會工作？

感謝並希望聽到您的建議。

我試圖用這個： import *作爲jQuery從'jquery'; 然後它按要求工作，並在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編譯錯誤。唯一的原因不是您正在使用var..require表單而不是正確的，在TypeScript中，import..require表單。

這不會引發編譯錯誤的唯一原因是環境聲明require在某處，例如在@types包中。

它仍然不太可能工作，因爲require不是點火模塊語法的一部分，而且因爲您使用的是彙總，所以絕對不會被識別，至少不會添加一堆插件和配置。

嘗試

import jQuery from 'jquery'; 

如果上面那個jQuery是沒有定義運行時拋出，試圖

import * as jQuery from 'jquery'; 

看你更新的問題，我看到你收到的錯誤

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

import * as ns from 'module'; 

從CommonJS模塊導入，該模塊將其分配給module.exports（導出=在TypeScript中）以導出其值。

與CommonJS模塊的互操作應該使的值在default導出下可用，該值將轉換爲導入的模塊名稱空間對象的default屬性。也就是說形式

import jQuery from 'jquery'; 

實際上來說是

import {default as jQuery} from 'jquery'; 

不幸的是簡寫，互操作是遠遠光滑，許多環境中，transpilers，裝載機和捆紮機不同的處理它。

NodeJS本身甚至沒有實現它。

這是一個非常罕見的區域，TypeScript會做出錯誤的分類。它根本不處理這種情況。相反，推薦的

import * as ns from 'module'; 

形式，將在遵循規範的環境中失敗

ns() 

，因爲導入模塊的命名空間對象沒有[[呼叫]]插槽。

幸運的是，您可以通過使用TypeScript輸出es2015模塊並使用其他工具（如彙總）處理它們來避開此行爲，正如您當前所做的那樣。

另一種選擇是使用TypeScript的system模塊選項和SystemJS。

這似乎有點過於詳細，同時有點揮手，但我認爲了解interop實際上是如何破解是非常重要的，以便我們有一天能夠修復它（我希望）。

更新：並出現

The TypeScript team is actively looking into the問題，認爲正確的語法

import jQuery from 'jquery'; 

終將被打字稿，而不需要另外transpilation層的支持。

有一天，您的孩子將能夠編寫Web應用程序，而無需知道這個陷阱！