javascript - Angular2 无法使用 javascript 导入 FormsModule

Question

我正在做 Angular2 英雄教程: https://angular.io/docs/ts/latest/tutorial/toh-pt1.html 在纯 Javascript(不是 Typescript)中，我在导入表单模块时遇到了问题:(描述仅适用于 Typescript):

Before we can use two-way data binding for form inputs, we need to import the FormsModule package in our Angular module. We add it to the NgModule decorator's imports array. This array contains the list of external modules used by our application.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { AppComponent }  from './app.component';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

当我将 Forms 模块添加到我的 app.module.js 导入数组时，它找不到该模块:

zone.js:129 Uncaught Error: Unexpected value 'undefined' imported by the module 'class2'

这是我的 app.module.js:

(function(app) {
  app.AppModule =
    ng.core.NgModule({
      imports: [ ng.platformBrowser.BrowserModule, ng.common.FORM_DIRECTIVES],
      declarations: [ app.AppComponent],
      bootstrap: [ app.AppComponent ]
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

在我的 node_modules 文件夹中存在 Forms 模块。如果我从导入数组中删除“ng.common.FORM_DIRECTIVES”，则不会引发任何错误。

console.dir(ng) 的内容是:

Object
    common:Object
    compiler:Object
    core:Object
    coreTokens:Object
    platformBrowser:Object
    platformBrowserDynamic:Object
    probe
    :
    inspectNativeElement(element /** TODO #9100 */)
    __proto__:Object

console.dir(ng.forms) 的内容是:

undefined

Answer 1

对不起，我发现了错误。通常它与 typescript 或 Angular 无关，我只需要在 index.html 文件中添加脚本标签来加载 forms.umd.js:

<script src="../node_modules/@angular/forms/bundles/forms.umd.js"></script>

现在我可以使用以下代码导入表单模块，并且可以使用 ngModule 功能:

ng.core.NgModule({
  imports: [ ng.platformBrowser.BrowserModule, ng.forms.FormsModule],
  declarations: [ app.AppComponent],
  bootstrap: [ app.AppComponent ]
})