Question

我试图生成一个我的angular 2应用程序的静态包（我的目标是使用没有systemjs的脚本标记导入一个缩小的js文件）。我的应用程序具有以下（简化）结构：

MyProject/
    app/
        monitoring/
            a.ts
            b.ts
        terminals/
            a.ts
            b.ts
        main.ts
        app.module.ts
...

这是我的tsconfig：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false,
    "outDir": "__dist__"
  },
  "filesGlob": [
    "**/*.ts",
    "**/*.tsx",
    "!node_modules/**"
  ]
}

这是systemjs config：

(function () {

    var DEFAULT_PACKAGE_CONFIG = {
        main: './index.js',
        defaultExtension: 'js'
    };

    System.config({
        paths: {
            'npm:': 'node_modules/'
        },
        map: {
            app: '__dist__',
            monitoring: '__dist__/monitoring',
            terminals: '__dist__/terminals',
            statistics: '__dist__/statistics',
            references: '__dist__/references',

            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

            'rxjs': 'npm:rxjs',
            'primeng': 'npm:primeng',
            'wijmo': 'scripts/vendor',
            'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api'
        },
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            primeng: {
                defaultExtension: 'js'
            },
            wijmo: {
                defaultExtension: 'js'
            },
            monitoring: DEFAULT_PACKAGE_CONFIG,
            terminals: DEFAULT_PACKAGE_CONFIG,
            statistics: DEFAULT_PACKAGE_CONFIG,
            references: DEFAULT_PACKAGE_CONFIG,
            'angular2-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            }
        }
    });

})();

...最后我的gulp任务：

gulp.task('bundle:js', function () {
    var builder = new SystemJsBuilder('.', './systemjs.config.js');
    return builder
        .buildStatic('__dist__/app/main.js', buildFolder + '/bundle.js');
});

...但是当我运行它时，我得到：

> Error on fetch for __dist__/app/monitoring.js at
> file:///MyProject/__dist__/app/monitoring.js  Loading
> __dist__/app/app.module.js    Loading __dist__/app/main.js    ENOENT: no such file or directory, open '/MyProject/__dist__/app/monitoring.js'

......似乎它忽略了＆＃34; app＆＃34; ...之后的子文件夹？为什么？我该如何解决这个错误？

Answer 1

实际上看起来问题不是忽略app目录而是忽略你的配置。

你有：

System.config({
    packages: {
        monitoring: {
            main: './index.js',
            defaultExtension: 'js'
        }
    ...

所以我猜你的代码中某处导入了monitoring，由于monitoring.js而自动转换为defaultExtension，因此它会抛出错误，因为该文件不存在。< / p>

无法使用gulp正确配置systemjs-builder

1 个答案: