Cannot find source file '../src/ChartEvent.ts'

[CristyTarantino]

I am using Angular2 and Webpack from https://github.com/AngularClass/angular2-webpack-starter

I followed your readme instructions but I get:

Cannot find source file '../src/ChartEvent.ts': Error: Cannot resolve 'file' or 'directory' ../src/ChartEvent.ts in /Users/username/Dev/angular2-webpack-starter/node_modules/angular2-highcharts/dist

[gevgeny]

Just tried to run angular-highcharts@0.0.8 with angular2-webpack-starter and this works fine.
here is my how i changed the about.component.ts component

import {Component} from 'angular2/core';
import { CHART_DIRECTIVES } from 'angular2-highcharts';

/*
 * We're loading this component asynchronously
 * We are using some magic with es6-promise-loader that will wrap the module with a Promise
 * see https://github.com/gdi2290/es6-promise-loader for more info
 */

console.log('`About` component loaded asynchronously');

@Component({
  selector: 'about',
  directives: [CHART_DIRECTIVES],
  styles: [`
    h1 {
      font-family: Arial, Helvetica, sans-serif
    }
  `],
  template: `
  <chart [options]="options"></chart>
  <md-card>
    <h1>
      patrick@AngularClass.com
    </h1>
  </md-card>

  `
})
export class About {
  options: Object;
  constructor() {
    this.options = {
      title : { text : 'simple chart' },
      series: [{
        data: [29.9, 71.5, 106.4, 129.2],
      }]
    };
  }

  ngOnInit() {
    console.log('hello `About` component');
    // static data that is bundled
    // var mockData = require('assets/mock-data/mock-data.json');
    // console.log('mockData', mockData);
    // if you're working with mock data you can also use http.get('assets/mock-data/mock-data.json')
    // this.asyncDataWithWebpack();
  }
  asyncDataWithWebpack() {
    // you can also async load mock data with 'es6-promise-loader'
    // you would do this if you don't want the mock-data bundled
    // remember that 'es6-promise-loader' is a promise
    // var asyncMockDataPromiseFactory = require('es6-promise!assets/mock-data/mock-data.json');
    // setTimeout(() => {
    //
    //   let asyncDataPromise = asyncMockDataPromiseFactory();
    //   asyncDataPromise.then(json => {
    //     console.log('async mockData', json);
    //   });
    //
    // });
  }
}

[gevgeny]

Despite i had a lot of Cannot find name 'foo'. errors during bundling.

[gevgeny]

@CristyTarantino Could you provide more details ?

[ASK83]

Hi,
Just wondering if someone has found a way to configure webpack to get rid of all the cannot find source file ... . The chart is showing but lots of warnings!
Thanks

[jeckafedorov]

I just started to learn Angular and not an expert yet, but as I understand the problem is that when the plugin is installed via npm install angular2-highcharts --save or using package.json dependencies in the project, the src folder is missing. But there are some links to src folder in *.map files which cause warnings.

To solve the problem:

1. I have created the node_modules\angular2-highcharts\src folder
2. copied all *.ts files from node_modules\angular2-highcharts\dist folder
3. renamed all of them inside just created src folders in order to remove all ".d" at the end.

I understand that this is temporary solution and there should be some more officiant way to do it.