Angular2: ngModule, BrowserModule, FormsModule are not exported members

Question

I am going through the Angular2 tutorial at https://angular.io/docs/ts/latest/tutorial/toh-pt5.html. All good to step Routing. Visual Studio Code shows the error at first 03 lines:

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';

as

[ts] 
Module '"c:/Users/ktran/Source/Repos/angular2-quickstart-ts/node_modules/@angular/core/index"' has no exported member 'NgModule'.

folder node_modules:

any idea please?

systemjs.config.js is copied from https://angular.io/docs/ts/latest/quickstart.html — beewest, Aug 10 '16 at 04:18
Then it could be a VS Code bug, as you can see in related wuestions, this with VS Code has already been asked. — Pablo Ivan, Aug 10 '16 at 04:25
Check http://stackoverflow.com/questions/32980405/module-angular2-angular2-has-no-exported-member-exceptionhandler?rq=1 — Pablo Ivan, Aug 10 '16 at 04:25
I have the same problem. I also have this error on `npm start`: app/app.module.ts(1,10): error TS2305: Module '"/Users/exclipy/Code/ng/angular2-quickstart/node_modules/@angular/core/index"' has no exported member 'NgModule'. — exclipy, Aug 10 '16 at 05:35

score 32 · Answer 1 · answered Aug 10 '16 at 08:19

32

As Kim Phung stated, this is because a new RC of Angular was just released. Change the following lines in packages.json:

// ...snip...
"dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",

// ...file continues...

Then run, in your console:

npm update

Good to go!

answered Aug 10 '16 at 08:19

MW.

12,550
9
36
65

6

For someone have trouble with `npm update` make sure you run this with root/administrator on Window. – Elec Aug 14 '16 at 15:43
2

Thanks for answer ```"@angular/forms": "0.3.0",``` solved my issue – styopdev Jan 22 '17 at 17:07
Or just run `npm i @angular/common@latest @angular/compiler@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/router@latest` to update them all – Elron Aug 09 '19 at 02:05

score 12 · Answer 2 · answered Nov 02 '16 at 08:43

12

If this solutions didn't help you, try to reopen VSCode. For me it was editor issue.

answered Nov 02 '16 at 08:43

Dias Abdraimov

1,027
12
11

just reopening won't change anything. But I can imagine that restarting the server may. On Windows: press Ctrl-C in the console window, to close the currently running command, and resend command `ng serve` – bvdb Jul 24 '17 at 09:27
3

Reopening solved the issue for me. Had the editor open during an upgrade. – mccainz Jun 11 '18 at 13:01
This is so obvious yet so useful reminder, i too had vs code open during update and it got fixed on reopen. Thanks! – Ankit Aug 04 '20 at 08:48
This should accepted answer :) I was wondering why it was showing me error thought it is compiling successfully!! – Pathik Vejani Feb 03 '22 at 06:07

score 11 · Accepted Answer · edited Feb 21 '17 at 06:54

11

Some modules just get added to the new version of Angular, so if you are not updating, you can not import it.

After about half an hour of search, got a solution:

Create a new folder and cd to your folder.

In command line, Type:

 git clone  https://github.com/angular/quickstart
 cd quickstart
 npm install

And copy your old code to the newly created project

edited Feb 21 '17 at 06:54

Kailas

7,350
3
47
63

answered Aug 10 '16 at 06:26

Kim Phung

152
1
4

1

With all the regards & thanks for posting it, to me personally it somehow looks more like a workaround – bevada Aug 10 '16 at 06:38
ha! This was a good suggestion from Kim - it can even be more lightweight, just 1) copy from the github/angular/quickstart only the package.json dependencies and devdependencies items and 2) in your own package.json file replace those entries and then 3) do "npm install" and 4) "npm start" (it still looks like a workaround - who has the real answer?) – bevada Aug 10 '16 at 06:50
Thansk Kim. These classes are in 2.0.0-rc.5 while I am declaring 2.0.0-rc.4 in package.json. – beewest Aug 10 '16 at 06:59

score 1 · Answer 4 · answered Jul 13 '17 at 15:27

1

if you have this type of error. import { NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; try this command:

npm update

answered Jul 13 '17 at 15:27

uday

11
1

score 0 · Answer 5 · answered Sep 30 '16 at 09:57

0

I just had a similar issue upgrading a sample app to 2.0.1 using the quickstart sample. I fixed it by updating not only the package.json, but also systemjs.config.js and typings.json

answered Sep 30 '16 at 09:57

Sebastian Castaldi

8,580
3
32
24

score 0 · Answer 6 · answered Dec 09 '16 at 09:28

0

Please make sure you have included the FormsModule to the ngModule imports

@NgModule({
    imports:      [ BrowserModule,**FormsModule** ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})

answered Dec 09 '16 at 09:28

john Smith

1,565
7
34
54

score 0 · Answer 7 · edited Mar 25 '19 at 04:51

0

You must import this symbol in the module file. I am pretty sure that you are importing it in the component file.

edited Mar 25 '19 at 04:51

Cody Gray - on strike

239,200
50
490
574

answered Mar 25 '19 at 04:22

jay rangras

135
1
1
11

Angular2: ngModule, BrowserModule, FormsModule are not exported members

7 Answers7

Linked