angularjs - Angular2 unable to import FormsModule with javascript - Stack Overflow

admin管理员组

文章数量:1315811

I am doing the Angular2 Heroes Tutorial: .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 './appponent';
@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, ngmon.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 "ngmon.FORM_DIRECTIVES" from the imports array, no error is thrown.

The Content of console.dir(ng) is:

Object
    mon:Object
    piler: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

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.ponent';
@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.mon.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.mon.FORM_DIRECTIVES" from the imports array, no error is thrown.

The Content of console.dir(ng) is:

Object
    mon:Object
    piler: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

• javascript
• angularjs

Share Improve this question Follow edited Sep 18, 2016 at 18:54 makkus asked Sep 17, 2016 at 14:44 makkusmakkus 40355 silver badges1111 bronze badges 4

• Can you post the content of: console.dir(ng); and console.dir(ng.forms); ? – IvRRimUm Commented Sep 17, 2016 at 14:51
• @IvRRimUm : i posted the content above. – makkus Commented Sep 17, 2016 at 20:16
• What are you using for a server? The code looks right. – IvRRimUm Commented Sep 18, 2016 at 15:22
• i am using MAMP Version 3.5 (3.5). Strange Thing is that the "platform-browser" node_module is loading correctly. – makkus Commented Sep 18, 2016 at 15:59

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 ]
})

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

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/mon';
import { AppComponent }  from './app.ponent';
@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 ).

本文标签： angularjsAngular2 unable to import FormsModule with javascriptStack Overflow