SystemJs игнорирует набор угловых зависимостей

Question

Я пытаюсь довести мое угловое приложение до точки, где оно готово к распространению, и мне удалось создать 2 пакета, один для моего углового приложения и один для моих зависимостей (которые включают в себя угловую среду и среду rxjs). Я использую https://github.com/systemjs/builder, чтобы выполнить связывание, и использую gulp, чтобы запустить сборщик. Оба пакета создаются, и мой пользовательский пакет (который содержит мой код) загружается внешним интерфейсом, но пакет поставщика / зависимости игнорируется, а зависимости по-прежнему загружаются из node_modules папка.

Я думаю, что это проблема с моим dist-system-config.js файл, который я использую в окончательном выпуске.

Мое решение основано главным образом на этом предыдущем ответе с несколькими исключениями, такими как не включение / вставка моих 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>

приложение / 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);

Сценарии / расстояние-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 (Гай Бедфорд), объясняющий почему:

Вам необходимо сначала настроить SystemJS перед загрузкой пакетов, поскольку пакеты проходят через нормализацию, и, следовательно, для правильной нормализации необходима конфигурация.