angular - 如何将文件夹添加到 SystemJS Config 映射？

Question

我正在尝试使用 TS 和 SystemJS 的 Angular 2。我想在 system.config.js 中映射我的文件夹之一。

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

这是我在 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);

我在 app.module.ts 中导入的两个是:

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

“@angular.core”确实可以毫无问题地导入，但是在导入“stalone/rest.service”时，出现错误:

Cannot find module 'stalone/rest.service'.

我只包含了我认为与此事相关的文件。如果我遗漏了任何内容，请告诉我。

Answer 1

Typescript 没有使用 system.js在编译期间。如果我理解正确的话，你会在编译过程中得到这个错误，所以这真的意味着 TypeScript找不到你的模块，不是 system.js这将在运行时完成。

它确实适用于 angular，因为 typescript 正在寻找所有 node_modules 下的文件它找到它的文件夹，但这对你不起作用，因为你的模块不在 node_modules 下.

这就是为什么你需要告诉 ts 编译器在哪里可以找到你的模块，就像这样:

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

要更详细地了解这一切是如何工作的，您应该真正检查 typescript 的模块解析文档 here .