angular - typescript:从外部路径导入模块

Question

我有以下结构(已编辑):

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)

我使用“npm start”在“thegame”路径中运行应用程序(Angular2)。

我应该在 thegame/src/tsconfig.json 中添加什么，以便我可以在 game.model.ts 中执行以下操作？

import { Engine } from 'game-engine';

我尝试将“游戏引擎”符号链接(symbolic link)到“thegame/node_modules”，但是当我使用 lightserve 运行该项目时，它给出“404 GET/game-engine”

我想开发与网络应用程序分离的引擎。我也对如何实现这一目标的任何其他提示感兴趣。

该项目基于 Angular 2 Quickstart，网址为 https://github.com/angular/quickstart

Answer 1

由于您使用的是以 SystemJS 和 NPM 作为基础的 Angular 快速入门工具包，并且鉴于您描述的目录布局，您将需要执行以下步骤。

在workspace/thegame中打开终端并运行

npm install --save ../game-engine

这将告诉 npm 从磁盘上的该位置安装软件包，作为 thegame 应用程序的标准依赖项。

现在我们只需要告诉SystemJS新添加的依赖项所在的位置即可。 SystemJS 使用显式配置(而不是递归目录遍历)来定位依赖项。这是一件好事，但由于我们使用的是 NPM 而不是 JSPM 之类的东西，因此我们需要手动设置它。

幸运的是，它相当于添加到 systemjs.config.js 文件中的一行，根据快速入门，该文件应位于 src 子目录中您的 thegame 目录的目录。

将以下内容添加到配置对象的“map”属性中:

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

最终该文件将如下所示

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.
});