Alex G Rice Alex G Rice - 5 months ago 384
Javascript Question

Angular2 RC2 - Quickstart project cannot generate 2 .umd.js files

When working through the quickstart tutorial today at https://angular.io/docs/ts/latest/tutorial/ when I got to the step

npm start


I saw two 404 missing errors:

404 GET /node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js
404 GET /node_modules/@angular/core/core.umd.js


I have copied the systemjs.config.js and other files directly from the tutorial (see below). This is using 2.0.0-rc.2. Do any Angular experts know what is wrong with the quickstart code at the present time? Should I try a webpack tooling instead?



/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);




Answer

Your packUmd function should be like:

// Bundled (~40 requests):
function packUmd(pkgName) {
  packages['@angular/' + pkgName] = { 
     main: '/bundles/' + pkgName + '.umd.js', <== bundles path
     defaultExtension: 'js' 
  };
}

Notice /bundles/

Comments