模块化的Angular2模块化系统中断

Question

我将向您展示以下代码：

https://plnkr.co/edit/xxNW1xAIPoGtTK84OxGq

注意:这不能工作，因为SystemJS，我只是不能配置。任何想要的人都可以自由地编辑它，使其工作。我一直在使用angular-cli和默认的webpack配置，这是可行的。

我的问题是关于显示“警告”所需的"AlertService“。它已经在核心模块中提取出来。但是，当我需要使用它时，为了注入它，我必须像dashboard.component.ts中的import { AlertService } from '../core/alert/alert.service'一样导入它。

这不是破坏了模块化方法吗?因为我必须给它提供通向类的路径。如果我更改了AlertService在CoreModule中的位置，我仍然需要更改DashboardComponent中的字符串。同样在这个例子中，如果AlertService不存在，DashboardComponent将不会触发...但是DashboardComponent是DashboardModule的一部分，它应该能够自己启动-否则，如果它们是静态耦合的，那么模块的意义何在，我可以把所有东西都放在一个地方。

我想要的是创建一个通用的警报组件，我只需要包括在整个应用程序中的一次，并能够在任何地方使用它。

但我认为我误解了模块的概念和/或如何使用它们。我已经多次阅读了Angular.io中的模块部分，并阅读了多个教程。

诚挚的问候

Answer 1

如果必须更改大量文件路径让您很困扰，一种可能的解决方案是添加另一个层-创建一个services.ts文件，然后将规范导入放在其中而不是每个组件中。这样，如果更改路径，您只需更新一个文件：

services.ts：

import { AlertService } from './alert.service';

// ES2015 shorthand property initializer
export default {
    AlertService
};

yourComponent.ts：

import { AlertService } from "../services";
...

如果你想让一个组件在服务不存在的情况下也能工作，你可以使用make it an optional dependency (如果它不存在，返回null )，但是TypeScript强制你仍然必须将服务导入到文件中，以获得代码完成/类型。对我来说，这总让我觉得有点不对劲。