使用 Angular 2 和 SystemJS-builder 捆绑 Live .. 尝试从 node_modules 加载？

Question

我在将 angular 2 应用程序投入生产时遇到问题。它一直在 node_modules 下寻找我的脚本。

我是 angular 2 的新手，但经过半天的搜索，我似乎无法弄清楚这个问题？

这里有错误：

> "XHR error:  (404 Not Found) loading http://olweb/node_modules/@angular/core/bundles/core.umd.js
  Instantiating http://olweb/node_modules/@angular/core/bundles/core.umd.js
  Loading http://olweb/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js
  Loading http://olweb/application/main.js
  Loading application/main.js"

这是index.html:

    <script src="~/scripts/angular2-dev.min.js?version=@version"></script>

    <!-- 2. Configure SystemJS -->
    <script src="~/systemjs.config.js"></script>
    <script>
        System.import('application/main.js').catch(function (err) { console.error(err); });
    </script>

这是我的 gulp 任务：

//
// the following series of tasks builds each component of angular 2 into a temp directory - for caching in development mode
//
gulp.task('@angular.js', 
    function () {
        var SystemBuilder = require('systemjs-builder');
        var builder = new SystemBuilder('./', 'systemjs.config.js');
        builder.bundle('@angular/core', appDevTemp + '/core.umd.js');
        builder.bundle('@angular/compiler', appDevTemp + '/compiler.umd.js');
        builder.bundle('@angular/forms', appDevTemp + '/forms.umd.js');
        builder.bundle('@angular/common', appDevTemp + '/common.umd.js');
        builder.bundle('@angular/http', appDevTemp + '/http.umd.js');
        builder.bundle('@angular/router', appDevTemp + '/router.umd.js');
        builder.bundle('@angular/platform-browser', appDevTemp + '/platform-browser.umd.js');
        builder.bundle('@angular/animations/browser', appDevTemp + '/animations-browser.umd.js');
        builder.bundle('@angular/animations', appDevTemp + '/animations.umd.js');

        builder.bundle('@angular/platform-browser/animations', appDevTemp + '/platform-browser-animations.umd.js');
        builder.bundle('@angular/platform-browser-dynamic', appDevTemp + '/platform-browser-dynamic.umd.js');
        return;

});
//
//  minify the development build for angular 2
//
gulp.task('buildForDevelopment', ["@angular.js"],
    function () {

        return gulp.src([ './node_modules/core-js/client/shim.min.js','./node_modules/zone.js/dist/zone.js','./node_modules/systemjs/dist/system.src.js', appDevTemp + '/*.js']).pipe(uglify()).pipe(concat('angular2-dev.min.js')).pipe(gulp.dest(appProd));
    }

);

这是我的 system.config.js:

(function (global) {
System.config({
warnings: true,
paths: {
    // paths serve as alias
    'npm:': 'node_modules/'
},

// map tells the System loader where to look for things
map: {
    'application': 'application', // 'dist',
    'moment': 'node_modules/moment/moment.js',
    'ng-block-ui': 'node_modules/ng-block-ui/bundles/umd',
    'angular2-notifications': 'node_modules/angular2-notifications',
    // angular bundles
    '@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/animations/browser': 'node_modules/@angular/animations/bundles/animations-browser.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',   
    '@angular/animations': 'npm:@angular/animations/bundles/animations.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',

    // angular testing umd bundles
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
    // other libraries
    'rxjs': 'npm:rxjs',
    'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',

},


// packages tells the System loader how to load when no filename and/or no extension
packages: {
    'application': { main: 'main.js', defaultExtension: 'js' },
    'rxjs': {
        defaultExtension: 'js'
    },
    'angular2-in-memory-web-api': {
        defaultExtension: 'js'
    },
    'moment': 'node_modules/moment/moment.js',
        'ng-block-ui': {
        main: 'index.js',
            defaultExtension: 'js'
    }
}

});})(this);

Answer 1

经过多次不同的尝试并成功了一半后，我意识到其他人也遇到了问题。我最终学习和使用 Webpack 的时间比尝试让 systemjs 工作所花的时间更少，而且它对我来说似乎工作得更好。以下是我所做更改的一些代码片段，如果您想让 systemjs 正常工作，这些代码片段可能会有所帮助，但我不推荐。

var ngpackageNames = [
  'core',
  'common',
  'compiler',
    'platform-browser',
  'animations',
  'platform-browser-dynamic',
  'http',
  'router',
  'forms'
];


//// these packages have different naming conventions.. manually specify them
packages['@angular/animations/browser'] = { main: '../bundles/animations-browser.umd.js', defaultExtension: 'js' };
packages['@angular/platform-browser/animations'] = { main: '../bundles/platform-browser-animations.umd.js', defaultExtension: 'js' };

//// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
ngpackageNames.forEach(function (pkgName) {
    packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
});

var bundles = {
    '/Scripts/Rx.min.js': [
        "rxjs/*",
        "rxjs/operator/*",
        "rxjs/scheduler/*",
        "rxjs/observable/*",
        "rxjs/add/operator/*",
        "rxjs/add/observable/*",
        "rxjs/symbol/*",
        "rxjs/util/*"
    ]
};
var config = {
    map: map,
    packages: packages,
    bundles: bundles,
    paths: paths
}
System.config(config);

这里有一些有用的信息和讨论 UMD Bundle with RxJs

使用 Angular 2 和 SystemJS-builder 捆绑 Live .. 尝试从 node_modules 加载？

Bundling for Live with Angular 2 and SystemJS-builder .. tries to load from node_modules?

javascript

angularjs

systemjs-builder