Angularfire: Module '"/node_modules/angularfire2/angularfire2"' has no exported member 'AngularFireModule'.

[DMPS]

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.

[davideast]

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]

@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]

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

[davideast]

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

npm install firebase angularfire2@next --save

[vladotesanovic]

@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]

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

[vladotesanovic]

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

[lfarroco]

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

[danielgek]

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

[danielgek]

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

[RedFour]

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:

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

package.json imgur link

import { AngularFireModule } from 'angularfire2';

What am I missing?

[lfarroco]

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

[RedFour]

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

[davideast]

@RedFour Can I see your tsconfig.json file?

[RedFour]

{
  "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]

@RedFour add "firebase" to types array

[RedFour]

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]

yup

[RedFour]

I'm still getting the same errors.

[danielgek]

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

[RedFour]

here it is

[danielgek]

@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]

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

[danielgek]

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

[danielgek]

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

[RedFour]

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]

@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]

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]

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:

1. ng new af-test
2. cd af-test
3. npm install -g typings
4. npm install firebase angularfire2@next --save
5. *skipped steps 3-6 of the Installation and Setup guide, since I'm using the angular-cli@webpack version
6. bootstrapped to app.module.ts
7. 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]

@migueldiganchi @RedFour
i have successfully installed this way:

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

import { AngularFireModule } from 'angularfire2';

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

You may need to run typings install

[danielgek]

yes, its a typo, fixed

[RedFour]

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]

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]

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]

@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]

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]

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]

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]

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]

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]

@RedFour hi. Have you the same problem?

[jersonjcnt]

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

[deepu105045]

I am getting same error as @bloodypastor

[sarojrout]

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]

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]

[bbmattieu9]

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

[samcfinan]

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]

@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]

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]

Can someone help me to find out the solution??