Error in systemjs using angular2-highcharts

Question

I get the following error when trying to configure angular2-highcharts with RC5

product:15 Error: TypeError: Cannot read property 'type' of null(…)(anonymous function) @ product:15ZoneDelegate.invoke @ zone.js:332Zone.run @ zone.js:225(anonymous function) @ zone.js:586ZoneDelegate.invokeTask @ zone.js:365Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:491ZoneTask.invoke @ zone.js:435

My systemjs is as follows

/**
 * 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',
    'angular2-highcharts':        'node_modules/angular2-highcharts/dist',
    'highcharts/highstock.src':   'node_modules/highcharts/highstock.js'
  };
  // 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' },
    'angular2-highcharts' :       { main: 'index', defaultExtension: 'js' }
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    '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: '/bundles/' + 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);

This is my app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { routing }       from './app.routing';
import { AppComponent }  from './app.component';
import { ProductDetail } from './detail.component';
import { CHART_DIRECTIVES } from 'angular2-highcharts';

@NgModule({
    imports:      [ BrowserModule, routing,FormsModule , CHART_DIRECTIVES],
    declarations: [ AppComponent,Detail ],
    exports:[Detail],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

This doesn't seem like a systemjs error, why do you think it is so? — AbdulRahman AlHamali
The google developer console showed error in the line <script>System.import('app').catch(function(err){ console.error(err); });</script> — user93
Yes but that's basically your whole app :) Could you provide the code of your main.ts? — AbdulRahman AlHamali
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule); — user93

AbdulRahman AlHamali AbdulRahman AlHamali · Accepted Answer · 2016-08-19T14:53:40

You are importing the CHART_DIRECTIVES inside the imports array. the imports array is there specifically to import modules, nothing else.

Thus, you either need to wait for angular2-highcharts to package their directives into an Angular2 RC5 module, you can then simply import that module, or you will need to move CHART_DIRECTIVES into your "declarations" array for now

Error in systemjs using angular2-highcharts

1 Answers