angular-cli with SystemJS integration

[razvanmitre]

Hello,

I am using angular-cli with SystemJS, and I have the following issue when trying to use raven-js.

In main.ts I have
import Raven from 'raven-js';
but the compiler throws:
Module '"ncr-angular/node_modules/raven-js/typescript/raven"' has no default export.

In system-config.ts I have:

/** Map relative paths to URLs. */
const map: any = {
  'raven-js': 'vendor/raven-js'
};

/** User packages configuration. */
const packages: any = {
  'raven-js': {
    main: 'dist/raven.js'
  }
};

Am I doing something wrong?

Thanks

[benvinegar]

@razvanmitre – try the following:

import Raven = require('raven-js');

This seems to work for most people, but in my AngularJS project with dynamic SystemJS loading, I need the original statement. Would love it if someone from SystemJS could chime in on this.

cc @guybedford

[razvanmitre]

Yes it is working. Thank you.

[Sija]

@benvinegar See http://stackoverflow.com/questions/33305954/typescript-export-vs-default-export & https://basarat.gitbooks.io/typescript/content/docs/tips/defaultIsBad.html for reference

[benvinegar]

@Sija – I've read all these pages before, I understand the difference, and I am convinced using the require keyword is how it ought to work. It's how it works with loaders like Webpack and others. See #645.

The issue is that I cannot get my sample app, a complete "Angular 2 Tour of Heroes" example, to load raven-js via SystemJS dynamic loader without using a regular ES6-style import.

If someone can help me understand what's going on in that repo, I would be extremely grateful and I can update the docs accordingly.

[Sija]

@benvinegar did you try:

declare module 'raven-js' {
  // ...
  export = Raven
}

and later on:

import * as Raven from 'raven-js';
// or
import Raven = require('raven-js');

as per microsoft/TypeScript#5565 (comment)?

[benvinegar]

I definitely tried that. I think TypeScript said something to the effect of, "raven-js is not a module".

Sorry, I don't have time atm to mess around with this again or I'd explore more. Perhaps next week.

[guybedford]

import Raven from 'raven-js'; is the correct syntax here. Did you try running TypeScript with the synthetic default exports flag - microsoft/TypeScript#5577. Also for the best SystemJS support always use the system module format output of TypeScript compilation which will provide this integration path anyway.

[benvinegar]

@guybedford – I wasn't familiar with this flag, thanks. I'll start experimenting with it.

(And thanks for chiming in 🤘)

[kamilogorek]

Our TypeScript typings change quite a lot since this was reported. Please feel free to reopen this issue if it's still relevant in any way.