Angular SystemJs忽略角度依赖包

我试图让我的angular应用程序达到可以发布的程度，我已经成功创建了两个捆绑包，一个用于我的angular应用程序，另一个用于我的依赖项（包括angular框架和rxjs框架）。我用做捆绑，用gulp运行builder。这两个捆绑包都是由前端生成的，并且我的自定义捆绑包（包含我的代码）由前端加载，但是忽略了供应商/依赖项捆绑包，并且依赖项仍然从

节点\u模块

文件夹加载

我认为这是我在最终发行版中使用的

dist system config.js

文件的问题

我的解决方案主要基于以下几个例外，比如不包括/内联我的html模板，以及向依赖项的排除路径添加

node\u模块

我将包括一切我认为是相关的问题，如果需要更多的请让我知道

重申一下，应用程序加载并运行正常，但不是从
dependencies.bundle.js
加载依赖项，而是从
node\u 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>

脚本/dist system config.js

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({
    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' }
    }
});

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);
        });
});

gulpfile.js

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({
    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' }
    }
});

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（仅限相关版本）

在加载任何捆绑包之前配置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，因为捆绑包是通过规范化运行的，因此需要提供配置才能正确规范化

在加载任何捆绑包之前配置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，因为捆绑包是通过规范化运行的，因此需要提供配置才能正确规范化

'app'：{main:'./main.js'，defaultExtension:'js'}
在我的配置中是
{main:'app/boot.js'，defaultExtension:'js'}
所以如果你的启动文件名为
main.js
而不是
boot.js
，那么它应该是
{main:'app/main:'boot.js'，defaultExtension:'js，
。无需
'main'：'dist/app/main.js'，
（我猜）@AnkitSingh-谢谢你，我根据你的评论更新了
脚本/dist-system-config.js
，但仍然遇到相同的行为。@AnkitSingh-从angular引用
umd
捆绑包会有什么关系吗？（而不是另一个.js文件）@AnkitSingh-参见下面Louis的答案，加载/脚本标记顺序很重要。再次感谢您的帮助和之前在另一个线程上的回答（我投了赞成票）。当然，它工作起来没有太多麻烦。有关更多信息，请参见我对另一个问题的回答上方的已接受答案。或者您可以从@AngularClass
'app'：{main:'./main.js'，defaultExtension:'js'}
使用，在我的配置中是
{main:'app/boot.js'，defaultExtension:'js'}
所以如果您的启动文件名为
main.js而不是
boot.js
，那么它应该是
{main:'app/main.js'，defaultExtension:'js}，
。无需
'main'：'dist/app/main.js'，
（我猜）@AnkitSingh-谢谢你，我根据你的评论更新了
脚本/dist-system-config.js
，但仍然遇到相同的行为。@AnkitSingh-从angular引用
umd
捆绑包会有什么关系吗？（而不是另一个.js文件）@AnkitSingh-参见下面Louis的答案，加载/脚本标记顺序很重要。再次感谢您的帮助和之前在另一个线程上的回答（我投了赞成票）。当然，它工作起来没有太多麻烦。有关更多信息，请参见我对另一个问题的回答上方的已接受答案。或者您可以使用@AngularClass