SystemJs忽略Angular依赖包 [英] SystemJs Ignores Angular Dependency Bundle
问题描述
我正在尝试将我的角度应用程序分发到可以分发的地步，我设法创建了2个包，一个用于我的角度应用程序，一个用于我的依赖项(，其中包括角度框架和rxjs框架).我正在使用 systemjs构建器进行捆绑，并使用gulp运行该构建器.这两个捆绑包均已生成，并且我的自定义捆绑包(包含我的代码)已由前端加载，但是供应商/依赖性捆绑包将被忽略，并且依赖项仍从 node_modules 文件夹中加载.
I am trying to get my angular application to the point where it is ready for distribution and I have managed to create 2 bundles, one for my angular application and one for my dependencies (which include the angular framework and the rxjs framework). I am using systemjs builder to do the bundling and using gulp to run the builder. Both bundles are produced and my custom bundle (which contains my code) is loaded by the front end but the vendor/dependency bundle is ignored and the dependencies are still loaded from the node_modules folder.
我认为是我在最终发行版中使用的 dist-system-config.js 文件存在问题.
I'm thinking that it is an issue with my dist-system-config.js file that I use in the final distribution.
我的解决方案主要基于此先前的答案，但有一些例外，例如不包括/插入我的html模板和将 node_modules 添加到依赖项的排除路径.
My solution is based mostly on this previous answer with a couple of exceptions like not including/inlining my html templates and adding node_modules to the exclusion path of the dependencies.
我将包括我认为与该问题有关的所有内容，如果需要更多内容，请告诉我.
I will include everything I believe is relevant to the problem, if more is needed please let me know.
只需重申一下，该应用程序会加载并运行正常，但不是从 dependencies.bundle.js 加载依赖项，而是从 node_modules 中的原始位置加载它们.代码>文件夹. app.bundle.js 已加载，没有任何问题.
Just to reiterate, the application loads and runs OK but instead of loading the dependencies from dependencies.bundle.js they are loaded from the original location(s) in the node_modules folder. The app.bundle.js is loaded without any issues.
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);
脚本/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",
推荐答案
在加载任何捆绑包之前配置SystemJS.
我能够重现您的问题.我发现的是，如果捆绑软件是在配置SystemJS之前加载的，则SystemJS会忽略已加载的捆绑软件.如果在配置SystemJS之后加载捆绑软件，那么一切都很好.因此，您应该按以下顺序使用脚本:
I was able to reproduce your problem. What I found is that if the bundles are loaded before SystemJS is configured, then SystemJS ignores the bundles that have been loaded. If load the bundles after configuring SystemJS then everything is fine. So you should have your scripts in this order:
<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)的评论解释原因:
Here's a comment by SystemJS' author (Guy Bedford) explaining why:
您需要在加载捆绑软件之前先配置SystemJS，因为捆绑软件会通过规范化运行，因此需要进行配置才能正确规范化.
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依赖包的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
