Question

导入不在同一文件夹内或周围的模块非常麻烦。你必须继续计算'../'。如下例所示：

import {AnswersService, AddAnswerModel, Answer} from '../../../../../../../BackendServices/AnswersService';

通过修改我的System.config到下面的示例，我可以解决所有这些'../'并且代码在浏览器上完美运行。

System.config({
        packages: { 
            'app': { defaultExtension: 'js' },
            'rxjs': { defaultExtension: 'js' }
        },
        paths: {
            'rxjs/*': 'node_modules/rxjs/*',
            'BackendServices/*': 'app/BackendServices/*'
        }
    });

它将import语句减少到下面的可管理命令。

import {AnswersService, AddAnswerModel, Answer} from 'BackendServices/AnswersService';

但是这种方法的问题在于我在Visual Studio Code中丢失了智能感知。我不确定这是打字稿问题，视觉工作室代码问题还是其他问题。

有没有人知道如何在不失去智能感的情况下使其工作？

Answer 1

您可以复制angular-cli实现的模式，方法是在目录级别通过index.ts导出其他所需组件。这样，您可以在更高级别公开嵌套组件。

以下是一个例子：

parent
├── child
│   ├── child.component.ts
│   └── index.ts
├── parent.component.ts
└── index.ts

内部child/index.ts只需导出相关组件。

export { ChildComponent } from './child.component';

然后parent/index.ts可以继续出口链。

export { ParentComponent } from './parent.component';
export { ChildComponent } from './child';

注意：请注意以上内容不是引用child.component文件，而是引用child 目录！

child目录的index.ts通过index.ts中的导出来展示这些组件。这可以通过深层嵌套组件来完成。

最后，如果parent/之外的其他组件想要消费parent/内的任何内容，则可以在最顶层轻松引用它。

import { ParentComponent, ChildComponent } from './parent';

Answer 2

Visual Studio只能解析位于node_modules中的相对路径和模块，如angular2/*或rxjs/*。

这是TypeScript默认的moduleResolution（节点）..您可以使用＆＃39; classic＆＃39;在tsconfig.json中更改它。 ..但VS Code将不再识别节点模块。

此故障单https://github.com/Microsoft/TypeScript/issues/5039

中讨论了此问题

有很多建议......但还没有实施。

Answer 3

您可以使用相对路径。看一下示例：https://github.com/angular/angular/tree/master/modules/playground/src/relative_assets

从深层嵌套的目录结构导入模块

3 个答案: