IntelliJ（或Webstorm）无法识别从systemJs导入的内容

Question

I do not understand how I can make IntelliJ understand that my library was mapped with SystemJS. So I get a red wavy line under my import, like the following image illustrates:

However, the module is loaded correctly and I can use it, ie the website is working. The @angular/core seems to be recognised. I use the following mapping in system.config.js :

var map = {
    'app':                        '/ng2experiments/app', // 'dist',
    '@angular':                   '/ng2experiments/node_modules/@angular',
    'angular2-in-memory-web-api': '/ng2experiments/node_modules/angular2-in-memory-web-api',
    'rxjs':                       '/ng2experiments/node_modules/rxjs',
    'notifications':              '/ng2experiments/node_modules/angular2-notifications'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    'notifications':              { main: 'components.js', defaultExtension: 'js' }
};

Why is it @angular/core gets recognised but not notifications ?

I found the answer during writing the question. I'll post it anyways as Q&A because other people might find it useful.

Answer 1

It's because @angular/core is the actual folder name, while notifications is not (it's called angular2-notifications). IntelliJ / Webstorm knows nothing about SystemJs. An easy way to solve this is to change the mapping in SystemJs to use the same name as your folder. In this case:

var map = {
    'app':                        '/ng2experiments/app', // 'dist',
    '@angular':                   '/ng2experiments/node_modules/@angular',
    'angular2-in-memory-web-api': '/ng2experiments/node_modules/angular2-in-memory-web-api',
    'rxjs':                       '/ng2experiments/node_modules/rxjs',
    'angular2-notifications':     '/ng2experiments/node_modules/angular2-notifications'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    'angular2-notifications':     { main: 'components.js', defaultExtension: 'js' }
};

IntelliJ / Webstorm should check out of the box for all the folder names, so it then recognises the module: