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应用程序，而无需知道这个陷阱！