Angular2无法使用javascript导入FormsModule

时间:2016-09-17 14:44:56

标签: javascript angularjs

我在做Angular2 Heroes教程: https://angular.io/docs/ts/latest/tutorial/toh-pt1.html  在普通的Javascript(而不是Typescript)中,如上所述,我无法导入表单模块:(描述仅适用于Typescript):

  

在我们可以对表单输入使用双向数据绑定之前,我们需要在Angular模块中导入FormsModule包。我们将它添加到NgModule装饰器的导入数组中。该数组包含我们的应用程序使用的外部模块列表。

nameForTicket2

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

  

zone.js:129未捕获错误:意外值'未定义'由模块' class2'

导入

这是我的app.module.js:

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 { }

在我的node_modules文件夹中,Forms模块存在。如果我删除" ng.common.FORM_DIRECTIVES"从imports数组中,不会抛出任何错误。

console.dir(ng)的内容是:

(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 = {}));

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

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

2 个答案:

答案 0 :(得分:4)

对不起,我发现了错误。因为它经常与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 ]
})

答案 1 :(得分:1)

尝试使用import { FORM_DIRECTIVES } from 'angular2/common';

来源:Angular 2 two way binding using ngModel is not working

编辑:

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

如果这不起作用,请发布console.dir(ng);再次(使用此代码)。