Relative paths for importing SystemJS & ES modules

Question

I had a problem importing Angular2 components when using SystemJS and ES import syntax.

Project Structure:

ROOT |_src |_client |_app |_frameworks |_il8n |_analytics |_main |_components |_pages |_utility 

Let's say I have a file: ROOT/src/client/app/frameworks/il8n/language-service.ts and another file: ROOT/src/client/app/main/pages/login/login.ts . In login.ts I want to import language.ts, so one way to do this is:

//login.ts import { LanguageService } from '../../../../frameworks/il8n/language-service';

Another way to do this using barrels is as follows:

//login.ts import { LanguageService } from '../../../../frameworks/index';

where frameworks/index.ts does export * from './il8n/language-service';

I do not want to do ../../../ etc. every time I need to import something; it would be nice if I could just do import { LanguageService } from 'frameworks';

So far, I have managed to get my build process to work using the SystemJS "map" option as follows:

 map: { frameworks: 'src/client/app/frameworks/index', components: 'src/client/app/main/components/index', pages: 'src/client/app/main/pages/index' } 

However, my IDE complains (all IntelliSense functionality is completely broken) anytime when I do something like:

 `import { LanguageService } from 'frameworks';` 

Here is my tsconfig.json file:

 { "compilerOptions": { "target": "es5", "module": "commonjs", "declaration": false, "removeComments": true, "noLib": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "sourceMap": true, "pretty": true, "allowUnreachableCode": false, "allowUnusedLabels": false, "noImplicitAny": true, "noImplicitReturns": true, "noImplicitUseStrict": false, "noFallthroughCasesInSwitch": true, "baseUrl": "./src", "paths": { "frameworks": ["client/app/frameworks"], "components": ["client/app/main/components"], "pages": ["client/app/main/pages"], "utility": ["client/app/main/utility"] } }, "compileOnSave": false } 

Is there a way to satisfy both my IDE and the SystemJS build configuration so that I can do "simple" imports?

Answer 1

So this question was based on the Angular2 Seed (Advanced) repo found here . I posted an issue there (where you can see the exact fix). In short:

You need TypeScript 2.0 to use the paths and baseUrl in the tsconfig file. Then, in the SystemJS configuration file, you need to add some configuration to the paths and packages parameters as follows:

 packages: { ... frameworks: { defaultExtension: js, main: index.js } ... }, paths: { ... frameworks: 'relative/path/to/frameworks/folder' ... } 

index.ts is the INSIDE file of your frameworks folder, which exports the modules to this directory. For example, if you have a language.component.ts file somewhere inside your framework directory, in frameworks/index.ts you would do:

export * from 'path/to/language.component'; .

This allows you to execute import {LanguageComponent} from 'frameworks'; in your project (until you are outside the frameworks directory).

Hope this helps!