No Exported Member / Node Modules

Question

I am just starting Angular 2 / Typescript using the 5 Minute Quickstart found here. I've run into what looks to be a common problem, but maybe a bit different. I am encountering all sorts of "No Exported Member" problems. Examples:

From app.module.ts:

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

Returns

...node_modules/@angular2/core/index" has no exported member 'NgModule'.

and

...@angular/platform-browser/index" has no exported member 'BrowserModule'.

And from main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

throws:

...@angular/platform-browser-dynamic/index" has no exported member 'platformBrowserDynamic'.

I am running node version 4.4.7 and npm version 3.10.5.

I understand that these are probably resolvable in the context of the tutorial by rolling back node or npm to version relevant to the tutorial. I guess what I would prefer to have is an explanation of how to make the code from the tutorial relevant to the current versions of node.

ETA: These errors occur at compilation, not execution.

Solution 1

The NgModule class is exported from the node_modules/@angular/core/src/metadata.d.ts file through the node_modules/@angular/core/index.d.ts one.

I wonder if you specify correctly the moduleResolution property in your tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node", // <-----
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

Solution 2

For me it was VSCode editor issue. Simply reopening the editor resolved it

Solution 3

please update all your @angular dependencies in package.json to at least "2.0.0-rc.5"

after that verify your application bootstrap in main.ts.

according to changelog of 2.0.0-rc.5 there is a change of bootstrap your app. or see also updated tutorial guide https://angular.io/guide/quickstart.

import {NgModule} from '@angular/core';

@NgModule({
  declarations: […], // directives, components, and pipes owned by this NgModule
  imports: [BrowserModule],
  providers: […], // additional providers
  bootstrap: [MainComponent],
})
class MyAppModule {}

// Ahead of Time compile
import {platformBrowser} from ‘@angular/platform-browser’;

platformBrowser().bootstrapModuleFactory(MyAppModuleNgFactory);

// JIT compile long form
import {platformBrowserDynamic} from ‘@angular/platform-browser-dynamic’;

platformBrowserDynamic().bootstrapModule(MyAppModule);

Solution 4

Editor cache issue, its common in IDE's Android Studio,VS Code & Atom. Restarting the editor/IDE will help.

View more solutions