Question

我是SystemJs和Angular2的新手。我正在使用第三方软件包，其中一些包含bundles/code.js个文件，有些则没有。

正在使用bundles/code.js的人我已经设法开始工作了。

我包含<script src=foo/bundles/code.js>，然后能够在import * from 'code/foo'个文件中ts。

这一切都对我有意义，因为bundles/code.js有类似System.registerDynamic("code/foo",...)的内容，因此import知道code/foo是什么（这是我对它的理解）

我遇到过一个不使用bundle的软件包。我需要加载的.js文件如下所示：

// ./vendor/ng2-file-upload/ng2-file-upload.js

function __export(m) {
    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
__export(require('./components/file-upload/file-select'));
__export(require('./components/file-upload/file-drop'));
__export(require('./components/file-upload/file-uploader'));
var file_select_2 = require('./components/file-upload/file-select');
var file_drop_2 = require('./components/file-upload/file-drop');
exports.FILE_UPLOAD_DIRECTIVES = [file_select_2.FileSelect, file_drop_2.FileDrop];
//# sourceMappingURL=ng2-file-upload.js.map

我意识到这不是System格式。我在index.html中尝试了以下内容：

System.config({
    packages: {
        'js': {
            format: 'register',
            defaultExtension: 'js'
        }
    },
    meta: {
       'vendor/ng2-file-upload/ng2-file-upload.js' : {
            format: 'cjs', // I have also tried 'amd' and 'global'
            defaultExtension: 'js'
       }
    }
});

我也试过

System.config({
    packages: {
        'js': {
            format: 'register',
            defaultExtension: 'js'
        },
       'vendor/ng2-file-upload/ng2-file-upload.js' : {
            format: 'cjs', // I have also tried 'amd' and 'global'
            defaultExtension: 'js'
       }
    }
});

无论我做什么，我最终都会遇到以下错误：

未捕获的ReferenceError：未定义require

我有两个问题：

如何加载ng2-file-upload.js？
我如何为此套餐创建bundle？（该程序包在运行.ts）

.d.ts

npm install

Answer 1

这对我来说都很有意义，因为bundle / code.js有类似System.registerDynamic（“code / foo”，...）的东西，所以导入知道代码/ foo是什么（这是我对它的理解）

您是正确的，当您将代码编译为系统模块时，可以安全地使用脚本标记加载它们，假设已加载SystemJS。你可以用以下方法测试：

  <script async src="~/system.src.js"></script>

异步加载system.js将给出：

未捕获的ReferenceError：未定义系统

与commonjs模块相同，因此如果您不使用RequireJS加载器，请不要通过脚本标记加载它们。相反，您应该使用SystemJS加载commonjs模块：

  System.import("vendor/ng2-file-upload/ng2-file-upload.js")
    .then(function() {
       System.import("/static/scripts/bootstrap.js");
    }, console.error.bind(console));

ng2-file-upload.js应该已经是一个捆绑包，因此你以这种方式加载它。如果不是，只需将它的.ts文件添加到源文件中，并按照使用代码的方式使用它们。

Angular2 SystemJs Bundles和Non Bundled js

我有两个问题：

1 个答案: