在 Angular2 (TS) 中导入模块的选项答案

【问题标题】：Options for importing modules in Angular2 (TS)在 Angular2 (TS) 中导入模块的选项
【发布时间】：2016-04-26 00:33:10
【问题描述】：

我知道有一些进展或至少计划（#5093、#5728）来改进 typescript 的模块路径映射，但我想知道目前我们有哪些选择（Angular2 beta.1、TypeScript 1.7、VS Code 0.10.5，nodejs 5.4，systemjs 0.19）。

为了让每个人开心（编译器、编辑器和浏览器），我使用以下语法来导入模块：

// C:/~somepath~/project_name/src/scripts/app/components/search/search.component.ts
import {Component} from 'angular2/core';
import {EmitterService} from '../../../core/services/emitter/emitter.service';
import {SearchService} from '../../../app/services/search/search.service';

编译成

System.register(['angular2/core', '../../../core/services/emitter/emitter.service'], function(exports_1) {

当我使用以下选项时

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node"
    ...
  }  
}

我想使用不带这些点的导入：

import {EmitterService} from 'core/services/emitter/emitter.service';

因为它变得非常丑陋，追踪起来很疯狂，并且移动模块是一场噩梦。由于systemjs 配置，它可以在浏览器中运行：

// system.conf.js
System.config({
  map: {
    app: "/scripts/app",
    core: "/scripts/core",
  }
}

我可以通过将"isolatedModules": true 添加到 tsconfig.json 来“欺骗”编译器（没有这个会引发错误），但是在Visual Studio Code 中，Cannot find module 错误仍然存在，并且我失去了代码提示。我听说node_modules 文件夹中有一些解决方案，但找不到任何工作示例。

任何人都知道如何配置所有这些以优雅地协同工作？

谢谢。

【问题讨论】：

angular2 如何知道从哪里导入 angular2/core ？谁能给我解释一下。
@PardeepJain 如果您查看angular bundle 的源代码，您会看到System.register("angular2/core", .... 并告诉systemjs 该做什么。你可以find more here
也许你可以把常用的服务放到不同的应用程序中，你可以参考node_modules。另外，也许您不需要一个应用程序中的关卡……（如果您删除了核心关卡，您可能已经保存了一个）。此外，如果您将结构更实用，那么您将不需要 services 文件夹...
就像@eesdil 所说，您应该将服务移动到一个单独的包中，并将其作为依赖项添加到该项目中。或者在 node_modules/custom_p 下创建一个文件夹，并添加 combine.ts 文件，通过在其中引用它们来导出所有服务模块。例如：export * from '../../app/services/search/search.service' export * from '../../core/services/emitter/emitter.service' 在我们的组件中，导入 {EmitterService, SearchService} 来自“custom_P/combined”。完全不推荐，因为我们必须在 node_modules 中单独维护这个文件夹。

标签： typescript angular systemjs visual-studio-code

【解决方案1】：

只是为了跟进未来的访问者，这应该在 TypeScript 2.0 中修复。您正在寻找的配置是在您的tsconfig.json 中设置baseUrl 或paths 属性。如果您无条件地希望将所有内容与scripts 中的某个路径匹配，请使用类似：

{
    "baseUrl": "./src/scripts"
}

如果只有core和app要专门使用，请使用

{
    "baseUrl": "./src/scripts",
    "paths": {
        "app/*": ["app/*"],
        "core/*": ["core/*"]
    }
}

【讨论】：