How to add folder to SystemJS Config map?

Question

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.

I'm having the same problem, no luck yet. I'll let you know if I find anything useful! — Anton Scotte
– Anton Scotte, Commented Oct 27, 2016 at 7:33
I'm not sure how the mapping would help as you are under app you can import into app.module.ts with import { RestService } from "./standalone/rest.service". SystemJS will be expecting a module. — JayChase
– JayChase, Commented Nov 2, 2016 at 5:44

Ilya Chernomordik · Accepted Answer · 2016-11-04 12:14:04Z

1

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.

answered Nov 4, 2016 at 12:14

Ilya Chernomordik

30.9k31 gold badges148 silver badges245 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mariusz.v7 · Accepted Answer · 2016-11-01 16:16:37Z

0

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.

answered Nov 1, 2016 at 16:16

Mariusz.v7

2,4622 gold badges20 silver badges28 bronze badges

Comments

vakho papidze · Accepted Answer · 2016-11-02 08:42:38Z

0

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

answered Nov 2, 2016 at 8:42

vakho papidze

4653 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to add folder to SystemJS Config map?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related