Typescript Angular2-根相对导入

我对angular2/typescript中的导入有问题。我希望将导入与一些根目录（如“应用程序/组件/日历”）一起使用，而我能够使用的唯一方法是：

//app/views/order/order-view.ts
import {Calendar} from '../../components/calendar 

my-proj/
  README.md
  src/
    app/
      sidebar/
        sidebar.component.ts
      user.service.ts

其中日历的定义如下：

//app/components/calendar.ts
export class Calendar {
}

这显然会变得更糟，层次越低，最深的是“../....”，但它仍然非常糟糕和脆弱。有没有办法使用相对于项目根的路径

---

我在Visual Studio中工作，相对导入似乎是使VS能够识别这些导入的唯一因素。y

一种方法是让文件重新导出并以较短的路径捆绑这些文件

您可以在应用程序的根目录中使用components.ts文件夹

export {Calendar} from './components/calendar'
export {*} from './components/map'

并从组件导入它

import {Calendar, Map} from '../../components';

然而，这比构建项目的方式更适合导出模块，以便其他人可以使用它们

另一种选择是放弃使用导入语句，而是使用内部模块

calendar.ts

module Components {
    export class Calendar {}
}

您可以在项目中的任何文件中使用它，就像这样

new Components.Calendar();

或者使用别名导入它

import Calendar = Components.Calendar;
new Calendar();

更新 只是不要使用这个解决方案。拥抱。 社区建立在它之上，所以如果你不这样做，一切都会分崩离析。使用别名或其他提供的解决方案

简短回答 有办法，但你不应该这么做。 将编译器选项

“moduleResolution”

设置为

“classic”

长答案

您正在使用

tsconfig.json

？我想你是的。我一直在寻找一种方法来制作语句，例如

importsomemodule=require（“../../../../someModule”

到

importsomemodule=require（“src/path/to/someModule”）

。 在浪费了几个小时之后，我发现tsc可能会使用不同的算法进行模块解析。我使用atom，它创建了

tsconfig.json

，将compilerOption属性

moduleResolution

设置为

“node”

，并使用了node的shitty（请原谅我的法语）模块解析算法。我只放了“classic”然后开始以显而易见的方式工作。

回答 从TypeScript 2.0开始，您可以设置tsconfig.json属性

baseUrl

，如下所示：

{
  "compilerOptions": {
    "baseUrl": "app"
}

然后，您可以使用所需的方式导入组件，如：

附录 回退路径解析 一个重要的注意事项是，指定

baseUrl

选项会导致TypeScript编译器：

查找有关baseUrl的路径

在解决失败（未找到模块）时，查找有关

moduleResolution

选项的路径

SystemJS 由于SystemJS在Angular开发阶段大量使用，请确保相应地配置

SystemJS.config.js

，以便正确解析路径

---

---

来源和更多详细信息：

Tl；dr：您现在应该能够使用

src

作为根目录，它将“正常工作”

使用Angular 2.0，当您运行

ng new my proj

时，它会自动创建一个文件

my proj/src/tsconfig.app.json

。该文件包含一行

baseUrl

：

"baseUrl": "./",

因此，您不必更改有关配置的任何内容，您可以在

src

上定义所有导入的范围

//app/views/order/order-view.ts
import {Calendar} from '../../components/calendar 

my-proj/
  README.md
  src/
    app/
      sidebar/
        sidebar.component.ts
      user.service.ts

您可以通过以下方式导入文件：

import { Sidebar } from 'app/sidebar/sidebar.component';
import { UserService } from 'app/user.service';

编辑为添加：升华不读取

src/tsconfig.json

，但它只读取顶级tsconfig.json（请参阅）。如果您在升华中的导入行中遇到

找不到模块“app/…”

错误，您可以添加：

"baseUrl": "./src",

---

到顶级tsconfig.json文件。

基本上，在

Angular 6

中，您可以从顶部或底部启动

导入

我的两个选择
它们可通过
angular CLI生成的默认配置使用

从顶部开始

如果它离应用程序的根更近，我更喜欢这种方式

从“src/app/shared services/context/date.service”导入{DateService}；

自下而上

从“../../../../../../../../../shared services/context/date.service”导入{DateService}

背景：
类型脚本配置：tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}



角形堆栈

ng-v

Angular CLI: 6.0.8
Node: 8.9.0
OS: win32 x64
Angular: 6.0.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8

@angular-devkit/schematics        0.6.8
@angular/cli                      6.0.8
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.1
typescript                        2.7.2
webpack                           4.8.3

您无需更改Angular CLI生成的新Angular项目的默认配置。不确定以前的版本，但从版本6开始，我知道这是正确的。要执行根相对导入，请在导入开始时使用
src/
，如：

import { VideoPlayerComponent } from 'src/app/pages/shared/video-player/video-player.component';

这是一个比@MarekDulowski更好的解决方案，因为通过查询
“src/
，可以很容易地识别和查找根相对导入

我从这里的解决方案中学到了这一点：
“classic”选项完全破坏了angular2，你知道如何解决这个问题吗？将源文件放在名为“node\u modules”的文件夹中。答案如下：将所有代码放在名为“node\u modules”的文件夹中"…这是另一种选择这是我所听过的最可能最糟糕的选择@caeusDo目前为止投票支持@nottinhill的19个人中有谁有更好的解决方案吗？@MerekDulwski，我在一个问题中引用了你的解决方案，我对此有异议，TSLint：在我遇到问题后，我发现这不是理想的解决方案我在这里发布了我新的首选解决方案：请试一试。实际上这是相同的解决方案。只是设置到根项目目录的
baseUrl
选项使它与我的建议不同，我同意，这不是最好的。我会更新我的答案，很高兴你找到了完美的解决方案。
“baseUrl”
可能应该设置
“/src”
和与其相关的
路径
将使其工作，其原点为