Error: ReferenceError: cliSystemConfigPackages is

2019-07-24 18:53发布

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

0条回答
登录 后发表回答