angularjs - 为什么 webpack 打包为 'System.register'

标签 angularjs angular webpack

我正在尝试使用 webpack 开发一个 angular2 应用程序,但最终在浏览器控制台中出现错误:Uncaught ReferenceError: System is not defined。

当我查看捆绑的 js 时,我看到它正在使用 System.register,如下所示:

function(module, exports) {

    System.register(['angular2/platform/browser', './app.component'], function(exports_1) {
        var browser_1, app_component_1;
        return {
            setters:[
                function (browser_1_1) {
                    browser_1 = browser_1_1;
                },
                function (app_component_1_1) {
                    app_component_1 = app_component_1_1;
                }],
            execute: function() {
                browser_1.bootstrap(app_component_1.AppComponent);
            }
        }
    });
    // ...

我的 webpack.config.js 非常简单,如下所示:

var webpack = require('webpack');

module.exports = {
    context: __dirname,
    entry: "./app/boot.ts",
    devtool: 'inline-sourcemap',

    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },

    module: {
        loaders: [
            {test: /\.ts$/, loader: 'ts-loader'}
        ]

    }
};

谁能帮我修好?谢谢。

最佳答案

根据@Ron 的建议

如果您使用 Webpack 来捆绑您的应用程序,您必须将您的代码转换为 commonjs。解决方案是在您的 tsconfig.json 中将 module 更改为 commonjs

// tsconfig.json
"module" : "commonjs"

这是一个使用 webpack 的 angular2 种子存储库列表,可能会有帮助

额外的,我推荐你看Modularity and Packaging for Angular2 Applications来自 AngularConnect2015 的 Pawel

关于angularjs - 为什么 webpack 打包为 'System.register',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35075130/

相关文章:

angular - ChangeDetectionStrategy.OnPush 打破了 ControlValueAccessor 的禁用状态

javascript - 捆绑 js 与 bundle.js.gz

webpack 4 禁用 uglifyjs-webpack-plugin

javascript - 使用 AngularJS 在 AJAX 调用后绑定(bind)数据

javascript - 将数据导出到 excel/csv 时设置列宽和自动换行属性

javascript - 获取指令中输入文本的值 (ANGULAR.JS)

javascript - 删除未使用的 webpack 分块文件

javascript - $setValidity 函数未按预期工作

angular - 如何在循环中以 Angular 实现多个顺序 Http 请求(每个新请求都取决于以前的结果)

android - NativeScript Http 发布请求被阻止