使用相对路径解析导入失败答案

【问题标题】：Failed resolution of imports using relative path使用相对路径解析导入失败
【发布时间】：2016-10-27 22:07:15
【问题描述】：

我有以下文件夹结构：

我在 language.component.ts 中导入语言事件订阅者的尝试是这样的

import {LanguageEventSubscriber} from './language-event-subscriber'

但是，尽管该类似乎在 IDE 中已解决，但在运行时找不到该类作为无法打印其日志语句的证据。

但是，以下工作：

import './language-event-subscriber'

但在同一文件夹中，以下内容在运行时解析并运行

import {EventSubscriber, On} from "event-dispatch";
import {Language} from './language.model'

@EventSubscriber()
export class LanguageEventSubscriber {
    @On('onValidLanguage')
    onValidLanguage(language: Language) {
        console.log(language);
    }

    @On('onInvalidLanguage')
    onInvalidLanguage(status: string) {
        console.log("New status: ");
    }
}

为什么会出现这种不一致？

谢谢

【问题讨论】：

您能分享一下language-event-subscriber.ts 中的内容吗？没有看到它，我怀疑您没有在该文件中导出 LanguageEventSubscriber 类。不过只是猜测。

标签： angular typescript1.8 angular-cli

【解决方案1】：

根据来自event-dispatch package 的文档，即使您的定义中有export class LanguageEventSubscriber，这实际上并不是一个旨在以与其他模块相同的方式导入和使用的类。如果您要以更常见的方式执行此操作，则使用您的模块的代码将如下所示：

// This is NOT the way to use this package
import  {LanguageEventSubscriber} from './language-event-subscriber';

let les = new LanguageEventSubscriber();
// ... respond to events using your variable ...

但是，这不是这个包的用途。由于您的类定义中有@EventSubscriber() 装饰器，您的事件处理程序可用于EventDispatcher 类型的对象，并按如下方式使用：

import {EventDispatcher} from "event-dispatch";
import "./language-event-subscriber";

let ed = new EventDispatcher();
ed.dispatch("onInvalidLanguage", "Sorry. That language is unavailable.");
// ... etc. ...

基于the Typescript documentation，我猜您必须以这种方式导入模块的原因是因为它被视为副作用，在“仅为副作用导入模块”部分中进行了描述。

我认为这不一定不一致，但event-dispatch 包可能是以非标准方式编码的。它似乎是一个相对较新的包，下载量很少，所以这纯粹是猜测，但可能只是包的开发人员不知道或选择不遵循 Typescript 的标准习语。

【讨论】：