Angular2 无法使用 javascript 导入 FormsModule

Posted 2023-03-13

【中文标题】Angular2 无法使用 javascript 导入 FormsModule

【英文标题】：Angular2 unable to import FormsModule with javascript

【发布时间】：2017-01-25 15:53:46

【问题描述】：

我正在做 Angular2 英雄教程： https://angular.io/docs/ts/latest/tutorial/toh-pt1.html 在纯 javascript（不是 Typescript）中，我无法导入前面提到的表单模块：（描述仅适用于 Typescript）：

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

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 未捕获错误：模块“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

【问题讨论】：

你能把内容贴出来吗：console.dir(ng);和 console.dir(ng.forms); ?

@IvRRimUm : 我把上面的内容贴出来了。

你用什么做服务器？代码看起来正确。

我正在使用 MAMP 版本 3.5 (3.5)。奇怪的是“平台浏览器”节点模块正在正确加载。

【参考方案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);再次（使用此代码）。

【讨论】：

你能用纯javascript翻译吗？我尝试将“ng.common.FORM_DIRECTIVES”添加到导入数组，但没有奏效。

更新答案。

这段代码还在打字稿中吧？我正在使用普通的 javascript。

导入在 typescript 中和在 javascript 中是一样的。

我在我的问题中更新了我的 javascript 文件 app.module.js，并从“ng.forms.FormsModule”更改为“ng.common.FORM_DIRECTIVES”。我不能使用答案中的代码，因为它是打字稿。

【参考方案2】：

对不起，我发现了错误。通常它与打字稿或角度无关，我只需要在 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 ]
)

【讨论】：

我遇到了同样的错误。但是通过包含forms.umd.js，我得到了错误：无法读取属性'core_private' of undefined(...)

啊...我发现我的错误：在 index.html 文件中加载主模块脚本后，我必须加载 forms.umd.js 脚本。