System is not defined exception

[MurhafSousli]

Hi, I'm trying to use parallax directive in angular2-webpack-starter, and I'm getting this exception:

Uncaught ReferenceError: System is not defined - parallax-ts:1

here is the code:

import { Component } from 'angular2/core';
import { Parallax, ParallaxConfig } from 'ng2-parallax/parallax-ts';

@Component({
  selector: 'post',
  template: `
<md-card>
  <img *ngIf="post.featuredImage" parallax [src]="post.featuredImage" class="md-card-image">
  <md-card-title>
    <md-card-title-text>
      <span class="md-headline">{{post.title.rendered}}</span>
    </md-card-title-text>
  </md-card-title>
  <md-card-content [innerHTML]="post.excerpt.rendered">
  </md-card-content>
</md-card>
`,
  styles: [require('./post.css')],
  directives: [Parallax]
})
export class PostCmp {
  constructor() {
  }
}

Thank you

[cwadrupldijjit]

Thanks for reaching out @MurhafSousli . From what it looks like, the reason why it's not working is because the ng2-parallax plugin uses the System script loader. Since that project is built in webpack, System should not be used alongside it. Due to that, you can't use that particular file.

With that in mind, I will update the file name so that it's indicative that it's to be used with System instead. I'm also looking into that to see if I can get this working with webpack as well. I know with TypeScript, I can transpile to System, AMD, UMD, es6, es2015, and commonjs. I'll test it with doing just commonjs or umd and let you know how that goes.

[MurhafSousli]

Thank you @cwadrupldijjit

[cwadrupldijjit]

After a little over a week of working on this, I've found that the best solution (just simply requiring ng2-parallax/commonjs, the new commonjs module files I tried setting up) isn't currently attainable with my knowledge. However, when I transpiled the ng2-parallax to the commonjs module scheme, it works perfectly when requiring the file itself when copied into the working directory.

I'm afraid I don't understand webpack enough to be able to solve it just by doing this, but I would like to have some help with the configuration if someone is willing to help me.

In your case, @MurhafSousli, until there is a better option, you can simply copy the parallax.directive.js and paralax.directive.d.ts into a directives folder within your app or src folder, and it will work perfectly fine. I'll get updating the documentation on that, as well as add a note to the readme explaining that I'd like help.

If you would like to take a crack at it yourself, feel free to do that, and if you come to some conclusion about it, feel free to fork it/send in a pull request.