我的应用程序需要哪些 Angular 2 模块？

Question

我在我的 Angular 2 指令中添加了 @Input，我收到一个错误，让我相信我没有导入包含 @Input 元数据的 Angular 2 模块。

zone.js:1263 GET http://localhost:8880/vendor/@angular/core/bundles/core.umd.js/src/metadata/directives.js 404 (Not Found)

证明当我删除@Input 元数据时，应用程序不会产生任何错误。

在我使用@Input 元数据的模块中，我从@angular/core/src/metadata/directives 导入{Input}，我的IDE（IDEA 2016.2）自动为我添加了引用。

所以我需要通过@NgModule 导入正确的 Angular 2 模块 - 但我不知道如何确定它的名称或位置。

这是我的ApplicationModule（引导）模块定义：

import {NgModule} from '@angular/core';

import {BrowserModule, Title} from '@angular/platform-browser';
import {RouterModule} from '@angular/router';

import {UtilityModule} from '../utility/module';
import {I18NModule} from '../i18n/module';

import {FrameworkModule} from '../framework/module';

import {ApplicationComponent} from './application.component';
import {applicationRouting, applicationRoutingProviders} from './application.routing';

import {SandboxComponent} from './sandbox.screen/sandbox.component';
import {SpreadsheetComponent} from './spreadsheet.screen/spreadsheet.component';

@NgModule({
    imports: [BrowserModule, RouterModule, UtilityModule, I18NModule, applicationRouting, FrameworkModule],
    providers: [Title, applicationRoutingProviders],
    declarations: [ApplicationComponent, SandboxComponent, SpreadsheetComponent],
    bootstrap: [ApplicationComponent]
})
export class ApplicationModule {}

这是我的FrameworkModule，我尝试在其中使用@Input：

import {NgModule} from '@angular/core';

import {BrowserModule} from '@angular/platform-browser';

import {TUT_FRAMEWORK_DIRECTIVES} from './directives/index';
import {TUT_FRAMEWORK_COMPONENTS} from './components/index';

@NgModule({
    imports: [BrowserModule],
    providers: [],
    declarations: [TUT_FRAMEWORK_DIRECTIVES, TUT_FRAMEWORK_COMPONENTS],
    exports: [TUT_FRAMEWORK_DIRECTIVES, TUT_FRAMEWORK_COMPONENTS]
})
export class FrameworkModule {}

大概我需要将 Angular 2 模块导入添加到这些文件之一以提供 @Input 的实现

一般来说，Angular 2 提供的模块列表在哪里，我如何确定哪些模块对应于 Angular 2 的哪些功能？

进一步研究

来自 Angular 网站（API 文档）：

https://angular.io/docs/ts/latest/api/

@angular/core

Input

https://angular.io/docs/ts/latest/api/core/index/Input-interface.html

从@angular/core/index导出，定义在@angular/core/src/metadata/directives.ts

关于我需要在引导模块定义中包含的内容，我不确定如何解释上述任何信息......（也许我在叫错树）

Answer 1

要在您的组件中使用@Input()，您必须像这样从核心包中导入Input-

import { Input } from '@angular/core';

参考：https://angular.io/docs/ts/latest/cookbook/component-communication.html

看看这是否有帮助。

Answer 2

我发现了我的问题：

在我的指令中，我的 IDE 有用地导入了 Input 及其完整路径：

import {Input} from '@angular/core/src/metadata/directives';

Angular 2 的发行版本提供捆绑包，在我的 system.config.js 文件中，我在这个 sn-p 中引用这些：

System.config(
    {
        paths: {
            // paths serve as alias
            'npm:': 'vendor/'
        },
        // tell the SystemJS loader where to look for packages and components
        map: {
            'application': '.',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',

...

因为我的导入包含Input 的扩展 路径，系统加载程序将其附加到我的System.config map: 条目中的引用...导致加载路径错误Angular 2核心模块(404)：

zone.js:1263 GET http://localhost:8880/vendor/@angular/core/bundles/core.umd.js/src/metadata/directives.js 404 (Not Found)

注意 /src/metadata/directives.js 附加到 core.umd.js 捆绑包引用...

要解决我的问题，我需要做的就是引用core 模块而不是typings 文件，其中声明了Input 的export（如下）：

import {Input} from '@angular/core';