Bundling for Live avec Angular 2 et SystemJS-Builder .. essaie de charger à partir de node_modules?

Question

J'ai du mal à déplacer mon application angulaire 2 en production. Elle continue de chercher mes scripts sous node_modules.

Je suis nouveau à angulaire 2 mais après une demi-journée de recherche, je n'arrive pas à comprendre cela?

Voici là une erreur:

> "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"

Voici le 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> 

Voici ma tâche engouffreur:

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

 
);

Et voici mon 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

Après de nombreuses tentatives et de le faire travailler la moitié j'ai réalisé d'autres personnes ont également avoir des problèmes. J'ai fini par apprendre et utiliser Webpack en moins de temps qu'il n'en fallait pour essayer de faire fonctionner systemjs, et cela semble fonctionner beaucoup mieux pour moi. Voici quelques extraits de code des modifications que j'ai apportées qui peuvent être utiles si vous essayez de faire fonctionner systemjs mais je ne recommanderais pas.

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

Voici quelques informations utiles et la discussion UMD Bundle with RxJs