Angular2 unable to import FormsModule with javascript

Question

I am doing the Angular2 Heroes Tutorial: https://angular.io/docs/ts/latest/tutorial/toh-pt1.html in plain Javascript (not Typescript) and i am having trouble to Import the Forms Module as mentioned: (description is only for 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 { }

When i am adding the Forms module to my app.module.js import array, it fails to find the module:

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

Here is my 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 = {}));

in my node_modules folder the Forms module exists. If i remove "ng.common.FORM_DIRECTIVES" from the imports array, no error is thrown.

The Content of console.dir(ng) is:

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

The content of console.dir(ng.forms) is:

undefined

Can you post the content of: console.dir(ng); and console.dir(ng.forms); ? — IvRRimUm, Sep 17 '16 at 14:51
i am using MAMP Version 3.5 (3.5). Strange Thing is that the "platform-browser" node_module is loading correctly. — makkus, Sep 18 '16 at 15:59

score 5 · Accepted Answer · answered Sep 19 '16 at 15:52

5

I am sorry, i found the error. As so often it was nothing having to do with typescript or angular, i just had to add the script tag in the index.html file to load the forms.umd.js:

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

now i can import the Forms Module with the following code and i can use the ngModule functionality:

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

answered Sep 19 '16 at 15:52

makkus

383
4
11

I had the same error. But by including forms.umd.js, I get the error: Cannot read property '__core_private__' of undefined(…) – Kokodoko Nov 22 '16 at 14:21
Ah... I found my error: I had to load the forms.umd.js script AFTER loading the main module scripts in the index.html file. – Kokodoko Nov 22 '16 at 14:26

score 2 · Answer 2 · edited May 23 '17 at 12:13

2

Try using import { FORM_DIRECTIVES } from 'angular2/common';

Source: Angular 2 two way binding using ngModel is not working

EDIT:

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

If this doesn't work, post the console.dir(ng); again( with this code in use ).

edited May 23 '17 at 12:13

Community

1
1

answered Sep 18 '16 at 17:53

IvRRimUm

1,724
3
21
40

could you translate that in plain javascript? i tried adding "ng.common. FORM_DIRECTIVES" to the import array, but that didn´t work. – makkus Sep 18 '16 at 18:25
Updated answer. – IvRRimUm Sep 18 '16 at 18:28
this code is still in typescript right? i am using plain javascript. – makkus Sep 18 '16 at 18:37
Import is the same in typescript as in javascript. – IvRRimUm Sep 18 '16 at 18:41
i updated my javascript file app.module.js in my question and changed from "ng.forms.FormsModule" to "ng.common.FORM_DIRECTIVES". I cannot use your code from the answer because it is typescript. – makkus Sep 18 '16 at 19:00

Angular2 unable to import FormsModule with javascript

2 Answers2