Search code examples
intellij-ideatypescriptangularsystemjs

SystemJS, IntelliJ, and Module Includes?


Hoping someone can shed some light on how module includes and systemJS work.. I've got a skeleton Angular2 app, with a simple structure;

-app
|-lib (holds shims and other node libs)
|-components
 |-app
  |-app.ts/html

My bootstrap.ts imports app;

import {AppCmp} from './components/app/app';

Then I configure systemJS:

System.config({"defaultJSExtensions":true,"paths":{"bootstrap":"/bootstrap","*":"/lib/*"}})

This works great so far.. Then I create another folder called util:

-app
|-lib (holds shims and other node libs)
|-util
 |- index.ts and uuid.ts
|-components
 |-app
  |-app.ts/html

My index.ts for util is just an export;

export * from './uuid';

And uuid.ts exports a function;

export function uuid() {
    return "test";
}

This is where things get weird. My understanding is that I should now be able to do this in app.ts;

import {uuid} from '../../util';

IntelliJ barks on this that it can't resolve symbol 'uuid' and systemJS tries to get /util.js, which of course doesn't exist. So I tried;

import * as util from 'util';

Now IntelliJ barks about util.uuid() being unresolved. Almost as if it didn't parse the export in index.js. And SystemJS still tries to get /util.js and fails.

So I re-configure SystemJS:

System.config(
    {
        "defaultJSExtensions": true,
        "paths": {
            "bootstrap": "/bootstrap",
            "util": "/util/index",
            "*": "/lib/*"
        }
    }
);

This actually works in the browser, but IntelliJ is still unhappy. And I don't really think I should have to define every module in my app explicitly like this anyway -- or do I?

So I'm really stumped.. how do relative path modules and nested exports actually work? How does SystemJS handle them and why in the world does it have no problem resolving app.ts stuff, but can't resolve util?

Or put more simply; What's the right way to get both IntelliJ and SystemJS to be happy?


Solution

  • My SystemJS issues turned out to be a red herring -- I was setting up my module exports/imports incorrectly. SystemJS and IntelliJ both understand modules when done right. See here for reference to how import/export should be done in ES6: Re-exporting ES6 modules in TS 1.7?