Module '"/node_modules/angularfire2/angularfire2"' has no exported member 'AngularFireModule'. #425

DMPS · 2016-08-12T14:40:57Z

I am trying to use the latest version of AngularFire with the webpack 2 angular-cli and RC.5. However when I try to setup my firebase I get this error:

Module '"C:/Users/dalto/Documents/Deadspot/node_modules/angularfire2/angularfire2"' has no exported member 'AngularFireModule'.

I have checked angularFire but I do not see any AngularFireModule exported.

The text was updated successfully, but these errors were encountered:

davideast · 2016-08-12T15:45:30Z

Haven't released the RC5 version yet. Should have it out today.

It's also worth noting we haven't experimented with AngularFire2 and the Webpack version of the CLI.

lfarroco · 2016-08-12T16:14:59Z

@DMPS if you are on a hurry you can pull the repo from github instead of npm using
npm install git+https://github.com/angular/angularfire2.git
And then import from the src folder:
import { AngularFireModule } from 'angularfire2/src/angularfire2';
(worked for me)

davideast · 2016-08-12T16:16:42Z

@lfarroco @DMPS While that will work, installing from master is a risky business. Proceed cautiously :)

davideast · 2016-08-13T00:06:20Z

@lfarroco @DMPS Can you try the pre-release version?

npm install firebase angularfire2@next --save

vladotesanovic · 2016-08-13T00:17:15Z

@davideast

I am getting this errors:

[1] node_modules/angularfire2/auth/auth.d.ts(11,20): error TS1112: A class member cannot be declared optional.
[1] node_modules/angularfire2/database/firebase_object_observable.d.ts(6,17): error TS1112: A class member cannot be declared optional.

davideast · 2016-08-13T00:25:29Z

@vladotesanovic What version of Typescript are you on? This requires 2.0+

vladotesanovic · 2016-08-13T00:40:02Z

@davideast Yes i see now in package.json "typescript": "next" it is good now 👍

lfarroco · 2016-08-13T00:56:13Z

My application is running fine, though I still have few reading and saving operations.

danielgek · 2016-08-13T17:53:54Z

@davideast can you give us some tips to get it working with the webpack version of the angular-cli?

danielgek · 2016-08-13T18:44:28Z

well adding "firebase" to tsconfig.json in types array seem to work!

RedFour · 2016-08-16T02:53:15Z

I'm using the same angular-cli@webpack and still having the same issues after following the suggested solutions. I'm still getting the error of cannot find namespace 'firebase'.

These are the steps I took:

npm install firebase angularfire2@next --save
npm install [email protected] --save-dev

package.json imgur link

import { AngularFireModule } from 'angularfire2';

What am I missing?

lfarroco · 2016-08-16T14:36:17Z

@RedFour You might try copying the firebase3.d.ts to your typings folder, or typings install firebase.

RedFour · 2016-08-16T22:38:00Z

I've tried both your suggestions and still get the same error of can't find firebase.

davideast · 2016-08-16T22:46:47Z

@RedFour Can I see your tsconfig.json file?

RedFour · 2016-08-16T22:50:52Z

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ],
    "types": [
      "jasmine"
    ]
  }
}

danielgek · 2016-08-16T22:51:54Z

@RedFour add "firebase" to types array

RedFour · 2016-08-16T22:53:29Z

like this?

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ],
    "types": [
      "jasmine",
      "firebase"
    ]
  }
}

danielgek · 2016-08-16T22:54:18Z

yup

RedFour · 2016-08-16T22:54:44Z

I'm still getting the same errors.

danielgek · 2016-08-16T22:56:26Z

@RedFour run npm list at the root of the project and send a gist or pastbin with the output

RedFour · 2016-08-16T22:59:46Z

here it is

danielgek · 2016-08-16T23:04:05Z

@RedFour i see you installed typescript globally ? can you npm -g list and confirm the is in the version 2.0.0, i actually have typescript installed on the project but i don't think that is the problem.

RedFour · 2016-08-16T23:06:29Z

C:\GitHub\hair-web>npm -g list
C:\Users\yanda\AppData\Roaming\npm
`-- (empty)

danielgek · 2016-08-16T23:08:31Z

@RedFour try to install typescript locally in the project, i think something is wrong with your node/npm installation

danielgek · 2016-08-16T23:10:55Z

run npm install [email protected] --save-dev and see if npm throws any errors

RedFour · 2016-08-16T23:12:16Z

C:\GitHub\hair-web>npm install [email protected] --save-dev
[email protected] C:\GitHub\hair-web
`-- [email protected]

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN @angular/[email protected] requires a peer of typescript@^1.9.0-dev but none was installed.
npm WARN [email protected] requires a peer of typescript@^1.8.0 || ^1.9.0-dev but none was installed.

danielgek · 2016-08-16T23:22:33Z

@RedFour run typings install if that doesn't work, then it's out of my scope, try to see why fsevents is not supported on windows but i don't know if its related or not

migueldiganchi · 2016-08-16T23:36:00Z

hey @danielgek, I am having the same error, but I am on Ubuntu 16.04. If you get the solution, can you post it on this room https://gitter.im/angular/angularfire2? I will do the same if I get the solution.

RedFour · 2016-08-16T23:42:22Z

I ran typings install and it still didn't work.

I created a brand new project just to see if I made any mistakes in the old project. Here are my steps:

ng new af-test
cd af-test
npm install -g typings
npm install firebase angularfire2@next --save
*skipped steps 3-6 of the Installation and Setup guide, since I'm using the angular-cli@webpack version
bootstrapped to app.module.ts
ng build

and I get the "Cannot find namespace 'firebase' errors.

Am I missing steps? Or did it fail because I didn't do certain things in the install guide?
I'm pretty sure I did things correctly since my service that depends on AngularFire2 still works in my old project. I can read/edit/delete fine. I just get a lot of these Cannot find namespace 'firebase' errors on every build.

danielgek · 2016-08-16T23:48:38Z

@migueldiganchi @RedFour
i have successfully installed this way:

make sure that you are in the lastest version of angular-cli-webpack
update your app to rc5
make sure you install typescript 2.0.0 npm install [email protected] --save
install angularfire with npm install angularfire2@next -- save
add "firebase" to types array in tsconfig
import in the module

import { AngularFireModule } from 'angularfire2';

@NgModule({
  declarations: [...],
  imports: [
    ...,
    AngularFireModule.initializeApp(firebaseConfig, firebaseAuthConfig),
  ],
...

You may need to run typings install

danielgek · 2016-08-16T23:52:43Z

yes, its a typo, fixed

RedFour · 2016-08-17T00:02:48Z

I ran npm install [email protected] --save and got the following?

c:\GitHub\af-test>npm install [email protected] --save
[email protected] c:\GitHub\af-test
`-- UNMET PEER DEPENDENCY [email protected]

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN @angular/[email protected] requires a peer of typescript@^1.9.0-dev but none was installed.
npm WARN [email protected] requires a peer of typescript@^1.8.0 || ^1.9.0-dev but none was installed.
npm ERR! code 1

is that normal?

I also added firebase to tsconfig.json. When I do typings install, it says typings.json is missing. I'm still getting the same errors.

Maybe it is a Windows/iOS issue. I'm going try your steps again tonight when I get a hold of a mac.

RedFour · 2016-08-17T02:58:11Z

It's looking to be Windows/iOS related. I did all the steps to create a new project on a Mac. It gave the "namespace firebase" error until I added "firebase" to the tsconfig.json file. So version on Mac works, while the same version on my PC doesn't. I've made sure both the versions of dependencies are the same: firebase:3.30, typescript:2.0, angular-cli:1.0.0-beta.11-webpack.2, angularfire2:2.0.0-beta.3-pre2.

Can other people chime in whether they are experiencing this issue on a Mac or PC?

thehashrocket · 2016-08-17T03:01:36Z

So I followed the instructions that @danielgek laid out for @migueldiganchi & @RedFour, and I feel that I'm precariously close to having it right.

I three all my code up here.

here's a snippet of package.json:

"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",
    "@angular/router": "3.0.0-rc.1",
    "angularfire2": "^2.0.0-beta.3-pre2",
    "core-js": "^2.4.0",
    "firebase": "^3.3.0",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "ts-helpers": "^1.1.1",
    "typescript": "^2.0.0",
    "zone.js": "0.6.12"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "@types/protractor": "^1.5.16",
    "angular-cli": "1.0.0-beta.11-webpack.2",
    "codelyzer": "0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "0.13.22",
    "karma-chrome-launcher": "0.2.3",
    "karma-jasmine": "0.3.8",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "3.3.0",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "^2.0.0"
  }

tsconfig.json:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ],
    "types": [
      "firebase",
      "jasmine"
    ]
  }
}

and app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AngularFireModule.initializeApp(firebaseConfig, firebaseAuthConfig),
    BrowserModule,
    CommonModule,
    FormsModule
  ],
  providers: [],
  entryComponents: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {

}

Here's the error I'm getting:

Version: webpack 2.1.0-beta.18
Time: 6212ms
              Asset       Size  Chunks             Chunk Names
     main.bundle.js    2.84 MB    0, 2  [emitted]  main
polyfills.bundle.js     228 kB    1, 2  [emitted]  polyfills
          inline.js    4.96 kB       2  [emitted]  inline
           main.map    3.33 MB    0, 2  [emitted]  main
      polyfills.map     295 kB    1, 2  [emitted]  polyfills
         inline.map    5.13 kB       2  [emitted]  inline
         index.html  480 bytes          [emitted]  

ERROR in [default] /Users/jasonshultz/Projects/test-app/src/app/app.module.ts:13:36 
Cannot find name 'firebaseConfig'.

ERROR in [default] /Users/jasonshultz/Projects/test-app/src/app/app.module.ts:13:52 
Cannot find name 'firebaseAuthConfig'.
Child html-webpack-plugin for "index.html":
         Asset    Size  Chunks       Chunk Names
    index.html  2.4 kB       0       
webpack: bundle is now VALID.

I've had this working under RC4 with no problems, but I'm trying to get it going on RC5 with the new ngModule and webpack so I can be up to date. :/

RedFour · 2016-08-17T03:24:07Z

@thehashrocket you need to set firebaseConfig before NgModule.

const firebaseConfig = {
  apiKey: "<your-key>",
  authDomain: "<your-project-authdomain>",
  databaseURL: "<your-database-URL>",
  storageBucket: "<your-storage-bucket>"
}

angularfire2 install and setup

You don't need firebaseAuthConfig necessarily.

Btw, are you using a Mac or PC?

thehashrocket · 2016-08-17T03:26:17Z

Hey, @RedFour , thanks for the fast response! I wasn't expecting anything until tomorrow. lol. I'm on Mac (OSX Sierra). Trying your solution right now.

thehashrocket · 2016-08-17T03:28:58Z

You were right! That was it. Oh, it was so obvious I looked right over it. How often is it such a simple solution and I always think it's something more complex. Ugh. Thank you, that's exactly what I needed. 👍

RedFour · 2016-08-17T17:17:15Z

#431 I guess I didn't try all the available solutions. yashmurty pointed out, in the other thread, that I should try import firebase into my app.module

import * as firebase from 'firebase';

And that fixed the issue for me.

yashmurty · 2016-08-17T18:14:41Z

I'm glad it worked for you @RedFour.
The other solution is to import firebase in your app.module.ts file.
import * as firebase from 'firebase';

migueldiganchi · 2016-08-17T21:35:38Z

Hey @danielgek. I followed your steps and everything was ok!

Thank you very much!

And thanks to @RedFour and @thehashrocket too! Your comments was very helpful for me

vdatsko · 2017-10-04T09:38:17Z

@RedFour hi. Have you the same problem?

antoc0d3 · 2017-10-06T02:27:43Z

@bloodypastor
import { ... } from 'angularfire2/database-deprecated';
or
npm install angularfire2@next -- save

deepu105045 · 2017-10-12T17:42:57Z

I am getting same error as @bloodypastor

sarojrout · 2018-01-11T21:42:59Z

How to initialize firebase config with angularfire2 version 5 which is "angularfire2": "^5.0.0-rc.4"
Currently am using like this AngularFireModule.initializeApp(firebaseConfig)
after importing AngularFireModule from angularfire2.
am getting the error as Cannot find name 'AngularFireModule'. But when i look at the library angularfire2.d.ts, the class(AngularFireModule) is already exported there

bbmattieu9 · 2018-01-25T13:38:22Z

webpack: Failed to compile. webpack: Compiling... 90% chunk assets processingERROR in src/app/auth.service.ts(2,10): error TS2305: Module '"/Users/evendor/Desktop/Apps/angularApps/myauthapp/node_modules/angularfire2/angularfire2"' has no exported member 'AngularFireAuth'. src/app/email/email.component.ts(2,10): error TS2305: Module '"/Users/evendor/Desktop/Apps/angularApps/myauthapp/node_modules/angularfire2/index"' has no exported member 'AngularFire'. src/app/email/email.component.ts(2,23): error TS2305: Module '"/Users/evendor/Desktop/Apps/angularApps/myauthapp/node_modules/angularfire2/index"' has no exported member 'AuthProviders'. src/app/email/email.component.ts(2,38): error TS2305: Module '"/Users/evendor/Desktop/Apps/angularApps/myauthapp/node_modules/angularfire2/index"' has no exported member 'AuthMethods'. src/app/login/login.component.ts(2,10): error TS2305: Module '"/Users/evendor/Desktop/Apps/angularApps/myauthapp/node_modules/angularfire2/index"' has no exported member 'AngularFire'. src/app/login/login.component.ts(2,23): error TS2305: Module '"/Users/evendor/Desktop/Apps/angularApps/myauthapp/node_modules/angularfire2/index"' has no exported member 'AuthProviders'. src/app/login/login.component.ts(2,38): error TS2305: Module '"/Users/evendor/Desktop/Apps/angularApps/myauthapp/node_modules/angularfire2/index"' has no exported member 'AuthMethods'. src/app/members/members.component.ts(2,10): error TS2305: Module '"/Users/evendor/Desktop/Apps/angularApps/myauthapp/node_modules/angularfire2/index"' has no exported member 'AngularFire'. src/app/members/members.component.ts(2,23): error TS2305: Module '"/Users/evendor/Desktop/Apps/angularApps/myauthapp/node_modules/angularfire2/index"' has no exported member 'AuthProviders'. src/app/members/members.component.ts(2,38): error TS2305: Module '"/Users/evendor/Desktop/Apps/angularApps/myauthapp/node_modules/angularfire2/index"' has no exported member 'AuthMethods'. src/app/signup/signup.component.ts(2,10): error TS2305: Module '"/Users/evendor/Desktop/Apps/angularApps/myauthapp/node_modules/angularfire2/index"' has no exported member 'AngularFire'. src/app/signup/signup.component.ts(2,23): error TS2305: Module '"/Users/evendor/Desktop/Apps/angularApps/myauthapp/node_modules/angularfire2/index"' has no exported member 'AuthProviders'. src/app/signup/signup.component.ts(2,38): error TS2305: Module '"/Users/evendor/Desktop/Apps/angularApps/myauthapp/node_modules/angularfire2/index"' has no exported member 'AuthMethods'.

bbmattieu9 · 2018-01-25T17:01:51Z

bbmattieu9 · 2018-01-25T17:02:50Z

Im new to angular, firebase. I do not know the right thing to do. Kindly suggest how to debug. Thanks

samcfinan · 2018-01-25T20:30:08Z

angularfire2 splits its functionality into subfolders.

import { AngularFireAuth } from 'angularfire2/auth';

Check out the angularfire2 docs on authentication: https://github.com/angular/angularfire2/blob/master/docs/auth/getting-started.md

bbmattieu9 · 2018-01-25T21:41:18Z

@samcfinan thanks. i did import the line and followed the example on the github link but its still the same thing. I do not understand what i did wrong. I'm missing some other part of the flow

hamza-imran · 2018-07-25T21:53:11Z

I get this error while working on my project
Module '"d:/Tutorials/Angular 5/Work/myauthapp/node_modules/angularfire2/index"' has no exported member 'AngularFire'.
Module '"d:/Tutorials/Angular 5/Work/myauthapp/node_modules/angularfire2/index"' has no exported member 'AuthProviders'.
Module '"d:/Tutorials/Angular 5/Work/myauthapp/node_modules/angularfire2/index"' has no exported member 'AuthMethods'.

hamza-imran · 2018-07-25T21:53:45Z

Can someone help me to find out the solution??

danielgek mentioned this issue Aug 13, 2016

updating af2 and getting typing error #431

Closed

ericjim mentioned this issue Aug 23, 2016

Can't get it running after switching to angular-cli webpack #414

Closed

davideast closed this as completed Aug 24, 2016

Module '"/node_modules/angularfire2/angularfire2"' has no exported member 'AngularFireModule'. #425

Module '"/node_modules/angularfire2/angularfire2"' has no exported member 'AngularFireModule'. #425

Comments

DMPS commented Aug 12, 2016

davideast commented Aug 12, 2016 • edited Loading

lfarroco commented Aug 12, 2016 • edited Loading

davideast commented Aug 12, 2016

davideast commented Aug 13, 2016

vladotesanovic commented Aug 13, 2016

davideast commented Aug 13, 2016

vladotesanovic commented Aug 13, 2016 • edited Loading

lfarroco commented Aug 13, 2016

danielgek commented Aug 13, 2016

danielgek commented Aug 13, 2016

RedFour commented Aug 16, 2016

lfarroco commented Aug 16, 2016

RedFour commented Aug 16, 2016

davideast commented Aug 16, 2016

RedFour commented Aug 16, 2016 • edited by davideast Loading

danielgek commented Aug 16, 2016 • edited Loading

RedFour commented Aug 16, 2016 • edited Loading

danielgek commented Aug 16, 2016

RedFour commented Aug 16, 2016

danielgek commented Aug 16, 2016

RedFour commented Aug 16, 2016

danielgek commented Aug 16, 2016

RedFour commented Aug 16, 2016

danielgek commented Aug 16, 2016 • edited Loading

danielgek commented Aug 16, 2016

RedFour commented Aug 16, 2016

danielgek commented Aug 16, 2016

migueldiganchi commented Aug 16, 2016

RedFour commented Aug 16, 2016 • edited Loading

danielgek commented Aug 16, 2016 • edited Loading

danielgek commented Aug 16, 2016 • edited Loading

RedFour commented Aug 17, 2016

RedFour commented Aug 17, 2016

thehashrocket commented Aug 17, 2016

RedFour commented Aug 17, 2016 • edited Loading

thehashrocket commented Aug 17, 2016

thehashrocket commented Aug 17, 2016

RedFour commented Aug 17, 2016

yashmurty commented Aug 17, 2016

migueldiganchi commented Aug 17, 2016 • edited Loading

vdatsko commented Oct 4, 2017 • edited Loading

antoc0d3 commented Oct 6, 2017 • edited Loading

deepu105045 commented Oct 12, 2017

sarojrout commented Jan 11, 2018 • edited Loading

bbmattieu9 commented Jan 25, 2018

bbmattieu9 commented Jan 25, 2018

bbmattieu9 commented Jan 25, 2018

samcfinan commented Jan 25, 2018

bbmattieu9 commented Jan 25, 2018

hamza-imran commented Jul 25, 2018

hamza-imran commented Jul 25, 2018

davideast commented Aug 12, 2016 •

edited

Loading

lfarroco commented Aug 12, 2016 •

edited

Loading

vladotesanovic commented Aug 13, 2016 •

edited

Loading

RedFour commented Aug 16, 2016 •

edited by davideast

Loading

danielgek commented Aug 16, 2016 •

edited

Loading

RedFour commented Aug 16, 2016 •

edited

Loading

danielgek commented Aug 16, 2016 •

edited

Loading

RedFour commented Aug 16, 2016 •

edited

Loading

danielgek commented Aug 16, 2016 •

edited

Loading

danielgek commented Aug 16, 2016 •

edited

Loading

RedFour commented Aug 17, 2016 •

edited

Loading

migueldiganchi commented Aug 17, 2016 •

edited

Loading

vdatsko commented Oct 4, 2017 •

edited

Loading

antoc0d3 commented Oct 6, 2017 •

edited

Loading

sarojrout commented Jan 11, 2018 •

edited

Loading