Can't import FormsModule nor ReactiveFormsModule

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I'm trying to import and inject the form modules...

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        FormsModule,
        ReactiveFormsModule,
        AppRoutingModule,
        CampaignModule,
        SharedModule
    ],
    declarations: [
        AppComponent,
        NavMenuComponent,
        HomeComponent
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule {}

Error Message:

forms.umd.js:5596 --- Uncaught TypeError: _angular_core.Version is not a constructor

Expected behavior

Working.
Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

Node.js

Angular version: 2.3.0

Browser: [all]

Language: [TypeScript 2.1]
Node (for AoT issues): node --version =
6.9.1

Looks similar to #13342 (comment)

@DzmitryShylovich

@DzmitryShylovich I don't have @angular/compiler-cli as an npm dependency.

I added it and it didn't resolve the issue. I've included my ng2 dependencies below. Also, it is only when importing the @angular/forms module that it breaks my app and displays that error message. If I don't import ng2/forms my application works fine.

    "@angular/common": "~2.3.0",
    "@angular/compiler": "~2.3.0",
    "@angular/compiler-cli": "2.2.4",
    "@angular/core": "~2.3.0",
    "@angular/forms": "~2.3.0",
    "@angular/http": "~2.3.0",
    "@angular/platform-browser": "~2.3.0",
    "@angular/platform-browser-dynamic": "~2.3.0",
    "@angular/platform-server": "2.3.0",
    "@angular/router": "~3.3.0",
    "@angular/upgrade": "~2.3.0",

Thanks for your help,
Michael

@iglesias-soltech

@iglesias-soltech We released 2.3.1. Can you test against it, restoring your compiler-cli dependency to ~2.3.0?

@chuckjaz

@chuckjaz I'm going to close this issue. Ended up migrating our application to an angular-cli generated one. We are pretty early in the lifecycle of our project and decided to switch to a clean slate. Thanks for your response.

Please re-open this issue, I am getting this as well with 2.4.0 and 2.4.1.

Hi, im new in angular 2. I started with the VS2015 .net core angular 2 template. http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/

After updating to a newer version of angular i got the error as well.

Uncaught TypeError: _angular_core.Version is not a constructor
at forms.umd.js:5653
at Object.defineProperty.get (forms.umd.js:7)
at Object. (forms.umd.js:10)
at webpack_require (bootstrap 2c60a49…:555)
at fn (bootstrap 2c60a49…:86)
at Object. (app.module.ts:4)
at webpack_require (bootstrap 2c60a49…:555)
at fn (bootstrap 2c60a49…:86)
at Object. (boot-client.ts:5)
at Object. (boot-client.ts:23)

While testing i tried to create a temporary workarround by changing the faulting line to something like that.

var /** @type {?} */ VERSION = '2.4.1'; //new _angular_core.Version('2.4.1');

This results in an other error:

Uncaught TypeError: ctorParameters.map is not a function
at ReflectionCapabilities.parameters (http://localhost:2491/dist/vendor.js?v=e4DMFwv9izN_RYiA_hPEc5wuZm80kh93azOB5-C86iw:12390:52)
at Reflector.parameters (http://localhost:2491/dist/vendor.js?v=e4DMFwv9izN_RYiA_hPEc5wuZm80kh93azOB5-C86iw:12591:53)
at CompileMetadataResolver.getDependenciesMetadata (http://localhost:2491/dist/vendor.js?v=e4DMFwv9izN_RYiA_hPEc5wuZm80kh93azOB5-C86iw:45630:82)
at CompileMetadataResolver.getTypeMetadata (http://localhost:2491/dist/vendor.js?v=e4DMFwv9izN_RYiA_hPEc5wuZm80kh93azOB5-C86iw:45595:29)
at CompileMetadataResolver.getDirectiveMetadata (http://localhost:2491/dist/vendor.js?v=e4DMFwv9izN_RYiA_hPEc5wuZm80kh93azOB5-C86iw:45368:31)
at http://localhost:2491/dist/vendor.js?v=e4DMFwv9izN_RYiA_hPEc5wuZm80kh93azOB5-C86iw:45437:52
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:2491/dist/vendor.js?v=e4DMFwv9izN_RYiA_hPEc5wuZm80kh93azOB5-C86iw:45430:47)
at http://localhost:2491/dist/vendor.js?v=e4DMFwv9izN_RYiA_hPEc5wuZm80kh93azOB5-C86iw:45443:60
at Array.forEach (native)

I don't know, but maybe it was caused by my dirty try to create a workarround or it is also related with the previeous error.

My packages:

    "@angular/common": "~2.4.1",
    "@angular/compiler": "~2.4.1",
    "@angular/core": "~2.4.1",
    "@angular/forms": "~2.4.1",
    "@angular/http": "~2.4.1",
    "@angular/platform-browser": "~2.4.1",
    "@angular/platform-browser-dynamic": "~2.4.1",
    "@angular/platform-server": "~2.4.1",
    "@angular/router": "~3.4.1",
    "@types/node": "^6.0.38",
    "angular2-platform-node": "~2.1.0-rc.1",
    "angular2-universal": "~2.1.0-rc.1",
    "angular2-universal-polyfills": "~2.1.0-rc.1",
    "aspnet-prerendering": "^1.0.6",
    "aspnet-webpack": "^1.0.26",
    "bootstrap": "^3.3.7",
    "css": "^2.2.1",
    "css-loader": "^0.25.0",
    "es6-shim": "^0.35.1",
    "expose-loader": "^0.7.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "^2.2.1",
    "preboot": "^4.5.2",
    "raw-loader": "^0.5.1",
    "rxjs": "^5.0.2",
    "style-loader": "^0.13.0",
    "to-string-loader": "^1.1.5",
    "ts-loader": "^0.8.2",
    "typescript": "^2.0.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.14",
    "webpack-externals-plugin": "^1.0.0",
    "webpack-hot-middleware": "^2.10.0",
    "webpack-merge": "^0.14.1",
    "zone.js": "^0.7.4",
    "lodash": "^4.17.4"

@tweichselbaumer

I have the same problem as @tweichselbaumer has.
A screen with the error: https://1drv.ms/i/s!AoHobQYmOKNGn7wRWD4DKZyP6Ksfig
Package list: http://pastebin.com/fBJt1msf

@tweichselbaumer

@tweichselbaumer @nabokov-ef This issue doesn't appear to be related to the original issue. Can one of you create a separate issue to track this problem?

After some research I think I have found the problem. I'm using Angular Universal. This module is currently not compartible with the newer versions of angular. 2.2.x will work with a workaround but 2.3.0+ not. I read somewhere that they want to merge angular universal into the main angular repository. Hopefully that will solve our problems.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

Can't import FormsModule nor ReactiveFormsModule #13432

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Can't import FormsModule nor ReactiveFormsModule #13432

Description

Activity

DzmitryShylovich commented on Dec 13, 2016

iglesias-soltech commented on Dec 13, 2016

chuckjaz commented on Dec 15, 2016

iglesias-soltech commented on Dec 15, 2016

dguisinger commented on Dec 27, 2016

tweichselbaumer commented on Jan 1, 2017

evgeni-nabokov commented on Jan 6, 2017

chuckjaz commented on Jan 6, 2017

tweichselbaumer commented on Jan 8, 2017

angular-automatic-lock-bot commented on Sep 10, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions