typescript: Importing modules from outside path

Question

I have following structure (redacted):

workspace
|- thegame
 |- node_modules
 | package.json
 | bs-config.json
 |- src
  | tsconfig.json
  |- app
   | game.model.ts (<--  here I would like to import game-engine)
|- game-engine
 |- dist (after the local build)
 | package.json
 | tsconfig.json
 |- lib
  | index.ts (the actual engine module)

I run the application (Angular2) in the "thegame" path with "npm start".

What should I add to the thegame/src/tsconfig.json so that I could do following in the game.model.ts?

import { Engine } from 'game-engine';

I have tried to symlink the "game-engine" to "thegame/node_modules" but when I run the project with lightserve it gives "404 GET /game-engine"

I want to develop the engine separated from the web application. I am also interested in any other hints how to achieve this.

The project is based on Angular 2 Quickstart at https://github.com/angular/quickstart

What you should add depends on your loader or bundler. What do you use? SystemJS? Webpack 2? Also, what package manager are you using? NPM? JSPM? Yarn? — Aluan Haddad
– Aluan Haddad, Commented Jul 20, 2017 at 11:08
Boo, I hate that quickstart. Anyway, what you need to do is run cd workspace\thegame -> npm install ../game-engine — Aluan Haddad
– Aluan Haddad, Commented Jul 20, 2017 at 11:21
Thanks for updating answer, but tsc is not a loader it is the TypeScript compiler's command line interface. Based on the link, your loader is SystemJS, an excellent module loader. — Aluan Haddad
– Aluan Haddad, Commented Jul 20, 2017 at 11:24
Sorry, I'm stupid. It needs to be "game-engine": "npm:game-engine/dist/index.js" in the "map" configuration — Aluan Haddad
– Aluan Haddad, Commented Jul 20, 2017 at 11:43
Yes, it works, thank you! Can you format these steps as an answer, so that I can give you credit? — Juho Rutila
– Juho Rutila, Commented Jul 20, 2017 at 11:45

Aluan Haddad · Accepted Answer · 2018-05-24 19:20:24Z

Since you are using an Angular Quick Start kit that uses SystemJS and NPM as its foundation, and given how you have described your directory layout, you will want to take the following steps.

Open a terminal in workspace/thegame and run

npm install --save ../game-engine

this will tell npm to install the package from that location on disk as a standard dependency of your thegame application.

Now we just need to tell SystemJS where the newly added dependency is located. SystemJS uses explicit configuration (as opposed to a recursive directory walk) to locate dependencies. This is a good thing, but since we are using NPM instead of something like JSPM, we need to manually set this up.

Fortunately, it amounts to a single line added to the systemjs.config.js file which, as per the Quick Start, should be located in the src sub-directory of your thegame directory.

Add the following to the "map" property of the configuration object:

"game-engine": "npm:game-engine/dist/index.js"

Ultimately the file will look like

SystemJS.config({
  paths: {
    "npm:": "node_modules/"
  },
  map: {
    "game-engine": "npm:game-engine/dist/index.js",
    "@angular/core": "npm:@angular/core/bundles/core.umd.js",
    // etc.
  }
  // etc.
});

Collectives™ on Stack Overflow

typescript: Importing modules from outside path

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related