SystemJs 忽略 Angular 依赖包

Question

我正在尝试让我的 angular 应用程序准备好分发，我已经成功创建了 2 个包，一个用于我的 angular 应用程序，一个用于我的依赖项（ 其中包括 angular 框架和 rxjs 框架)。我正在使用 systemjs builder 进行捆绑并使用 gulp 来运行构建器。两个包都生成了，我的自定义包（包含我的代码）由前端加载，但 vendor/dependency 包被忽略，依赖项仍然从 node_modules 文件夹加载。

我认为我在最终分发中使用的 dist-system-config.js 文件有问题。

我的解决方案主要基于，但有一些例外，例如不是 including/inlining 我的 html 模板以及将 node_modules 添加到依赖项的排除路径。

我将包括所有我认为与问题相关的内容，如果需要更多请告诉我。

重申一下，应用程序加载并且运行正常，但不是从 dependencies.bundle.js 加载依赖项，而是从 node_modules 文件夹中的原始位置加载依赖项. app.bundle.js 加载没有任何问题。

Index.html

<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.min.js"></script>
<script src="/node_modules/reflect-metadata/Reflect.js"></script>
<script src="/node_modules/systemjs/dist/system.js"></script>

<script src="/bundles/dependencies.bundle.js"></script>
<script src="/bundles/app.bundle.js"></script>
<script src="/Scripts/dist-system-config.js"></script>

<script>
    System.import('app/boot').catch(function(err) {
        console.error(err);
    });
</script>

app/boot.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Scripts/dist-system-config.js

System.config({
    baseURL: '/',
    paths: {
        'npm:': 'node_modules/'
    },
    map: {
        'app': 'dist/app',

        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.min.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.min.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.min.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.min.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js',
        '@angular/http': 'npm:@angular/http/bundles/http.umd.min.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.min.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.min.js',
        'rxjs': 'npm:rxjs'
    },
    packages: {
        'app': { main: './boot.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' }
    }
});

gulpfile.js

var gulp = require('gulp'),
    tsc = require('gulp-typescript'),
    Builder = require('systemjs-builder');

gulp.task('bundle', ['bundle-app', 'bundle-dependencies'], function(){});

gulp.task('app-components', function () {
    return gulp.src('Scripts/app/**/*.ts')
        .pipe(tsc({
            "target": 'es5',
            "module": 'commonjs',
            "moduleResolution": 'node',
            "lib": [ 'es2015', 'dom', 'es2015.iterable' ],
            "sourceMap": true,
            "emitDecoratorMetadata": true,
            "experimentalDecorators": true,
            "removeComments": true,
            "noImplicitAny": false
        }))
        .pipe(gulp.dest('dist/app'));
});

gulp.task('bundle-app', ['app-components'], function() {
    // optional constructor options
    // sets the baseURL and loads the configuration file
    var builder = new Builder('', 'Scripts/dist-system-config.js');

    return builder
        .bundle('dist/app/**/* - [node_modules/@angular/**/*.js] - [node_modules/rxjs/**/*.js]', 'bundles/app.bundle.js', { minify: true})
        .then(function() {
            console.log('Build complete');
        })
        .catch(function(err) {
            console.log('Build error');
            console.log(err);
        });
});

gulp.task('bundle-dependencies', ['app-components'], function() {
    // optional constructor options
    // sets the baseURL and loads the configuration file
    var builder = new Builder('', 'Scripts/dist-system-config.js');

    return builder
        .bundle('dist/app/**/*.js - [dist/app/**/*.js]', 'bundles/dependencies.bundle.js', { minify: true})
        .then(function() {
            console.log('Build complete');
        })
        .catch(function(err) {
            console.log('Build error');
            console.log(err);
        });
});

package.json（仅相关版本）

"@angular/***": "4.2.6",
"canonical-path": "0.0.2",
"gulp": "3.9.1",
"gulp-typescript": "^3.2.0",
"rimraf": "2.6.1",
"rxjs": "5.4.2",
"systemjs": "0.20.14",
"systemjs-builder": "0.16.9",
"typescript": "2.4.1",

Answer 1

在加载任何包之前配置 SystemJS。

我能够重现您的问题。我发现，如果在配置 SystemJS 之前加载包，那么 SystemJS 会忽略已加载的包。如果在配置 SystemJS 之后加载包，那么一切都很好。所以您应该按以下顺序编写脚本：

<script src="/Scripts/dist-system-config.js"></script>
<script src="/bundles/dependencies.bundle.js"></script>
<script src="/bundles/app.bundle.js"></script>

这里是 SystemJS 作者 (Guy Bedford) 的 a comment 解释原因：

You need to configure SystemJS first before loading bundles because bundles run through normalization, and hence need configuration present in order to normalize correctly.

SystemJs 忽略 Angular 依赖包

SystemJs Ignores Angular Dependency Bundle

angular

rxjs

systemjs

systemjs-builder