I was trying to get a cerialize package to show in the vendor directory of the dist directory when I start getting the following error message, although ng build and ng server cmds work. The error shows up when I try localhost:4200 in the browser
Edit 2
This error might not be dependent on cerialize, because after removing all reference to cerialize in the app, performing an ng build and ng-serve, the problem still persist
error (edit 1 for full output)
zone.js:323 Error: ReferenceError: cliSystemConfigPackages is not defined(…)
ZoneDelegate.invoke
@ zone.js:323Zone.run
@ zone.js:216(anonymous function)
@ zone.js:571ZoneDelegate.invokeTask
@ zone.js:356Zone.runTask
@ zone.js:256drainMicroTaskQueue
@ zone.js:474ZoneTask.invoke @ zone.js:426
// The actual zone.js line referenced
ZoneDelegate.prototype.invoke = function (targetZone, callback, applyThis, applyArgs, source) {
return this._invokeZS
? this._invokeZS.onInvoke(this._invokeDlgt, this.zone, targetZone, callback, applyThis, applyArgs, source)
: callback.apply(applyThis, applyArgs);
};
// zone popup error (popup on red x at zone error position in trace)
Error: ReferenceError: cliSystemConfigPackages is not defined
at barrels.forEach (http://localhost:4200/system-config.js:79:5)
at Array.forEach (native)
at eval (http://localhost:4200/system-config.js:78:9)
Evaluating http://localhost:4200/system-config.js
Error loading http://localhost:4200/system-config.js
system-config.ts
/** Map relative paths to URLs. */
const map: any = {
'@angular2-material': 'vendor/@angular2-material',
'cerialize': 'vendor/cerialize/dist/serialize.js',
'immutable': 'vendor/immutable',
'lodash': 'vendor/lodash/lodash.js'
};
/** User packages configuration. */
const materialPackages: string[] = [
'core',
'button',
'card',
'checkbox',
'grid-list',
'icon',
'input',
'list',
'progress-bar',
'progress-circle',
'radio',
'sidenav',
'slide-toggle',
'tabs',
'toolbar',
];
/** User packages configuration. */
const packages: any = createCustomConfig(materialPackages);
function createCustomConfig(packages: string[]): any {
return packages.reduce(
(packageConfig: any, packageName: string) => {
packageConfig[`@angular2-material/${packageName}`] = {
format: 'cjs',
defaultExtension: 'js',
main: packageName
};
return packageConfig;
}, {});
}
////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
* Everything underneath this line is managed by the CLI.
**********************************************************************************************/
const barrels: string[] = [
// Angular specific barrels.
'@angular/core',
'@angular/common',
'@angular/compiler',
'@angular/http',
'@angular/router',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
// Thirdparty barrels.
'rxjs',
// App specific barrels.
'app',
'app/shared',
'app/shared/side-nav',
'app/+new-patient',
'app/registration/name',
'app/registration/patient',
'app/registration/age',
'app/registration/gender',
'app/registration/marital-status',
'app/registration/religion',
'app/registration/language',
/** @cli-barrel */
];
const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
cliSystemConfigPackages[barrelName] = { main: 'index' };
});
/** Type declaration for ambient System. */
declare var System: any;
// Apply the CLI SystemJS configuration.
System.config({
map: {
'@angular': 'vendor/@angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js'
},
packages: cliSystemConfigPackages
});
// Apply the user's configuration.
System.config({ map, packages });
angular-cli-build.js
/* global require, module */
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function (defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(js|js.map)',
'rxjs/**/*.+(js|js.map)',
'@angular/**/*.+(js|js.map)',
'@angular2-material/**/*',
'angularfire2/**/*.js',
'core-js/client/core.js',
'cerialize/**/*',
'firebase/lib/*.js',
'immutable/**/*.js',
'lodash/lodash.js'
]
/* sassCompiler: {
includePaths: [
'src/app/style' <-- directory for SASS reference files
] */
});
};
Prior to my attempt to use cerialize package, my app worked fine. It is the first time I am actually seeing this error.
Cheers and thanks