CODEWITHSUNDEEP
angulartypescriptsystemjs
Cox Szg
Cox Szg

Reputation: 245

How to add folder to SystemJS Config map?

I'm trying angular 2 with TS and SystemJS. I would like to map one of my folders in system.config.js.

|_ app
|   |_ standalone
|   |  |_ rest.service.js
|   |  |_ rest.service.js.map
|   |  |_ rest.service.ts
|   |_ app.module.ts
|_ node_modules
|_ system.config.js

This is a simplified version of what I have in system.config.js:

System.config({
        paths: {
            'npm:': 'node_modules/'
        },
        map: {           
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            'rxjs': 'npm:rxjs',
            'stalone': 'app/standalone'
        },
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            stalone: {
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

Two of my imports in app.module.ts are: 

import { RestService } from "stalone/rest.service";
import { NgModule }    from "@angular/core";

"@angular.core" does get imported without problems, but when importing "stalone/rest.service", I get the error:

Cannot find module 'stalone/rest.service'.

I've only included files, that I think are relevant in this matter. If I've missed any, please let me know.

Upvotes: 2

Views: 2783

Answers (3)

Ilya Chernomordik
Ilya Chernomordik

Reputation: 30185

Typescript is not using system.js during compilation. If I understand correctly, you get this error during compilation, so that really means that TypeScript cannot find your module, not system.js that will do that in runtime.

It really works with angular because typescript is looking for files under all node_modules folders where it finds it, but this does not work for you, since your module is not under node_modules.

That's why you need to tell the ts compiler where to find your modules, something like this:

{
  "compilerOptions": {
    "paths": {
      "stalone/*": ["app/standalone/*"]
    }
}

To understand how all this works in more details, you should really check the module resolution documentation for typescript here.

Upvotes: 1

vakho papidze
vakho papidze

Reputation: 465

Try Like this 'stalone': './app/standalone'

Upvotes: 0

Mariusz.v7
Mariusz.v7

Reputation: 2442

If you get this error during typescript compilation, then add:

"compilerOptions": {
   ...
    "paths": {
        "standalone/*": [ "app/standalone/*" ]
    }
}

to your tsconfig.json

Note: you need TypeScript version 2.0 or higher.

Upvotes: 0

Related Questions