Angularfire: Can't get it running after switching to angular-cli webpack

Created on 6 Aug 2016  路  9Comments  路  Source: angular/angularfire

After upgrading my project following instructions in here, I get following errors from angularfire:

WARNING in ./~/angularfire2/angularfire2.js
Cannot find source file './/angularfire2.ts': Error: Can't resolve './/angularfire2.ts' in '/Users/ub/Playground/involve/node_modules/angularfire2'
 @ ./src/main.ts 4:0-115
 @ multi main

WARNING in ./~/angularfire2/tokens.js
Cannot find source file './/tokens.ts': Error: Can't resolve './/tokens.ts' in '/Users/ub/Playground/involve/node_modules/angularfire2'
 @ ./~/angularfire2/angularfire2.js 29:15-34 83:15-34
 @ ./src/main.ts
 @ multi main

WARNING in ./~/angularfire2/utils/firebase_list_observable.js
Cannot find source file './/utils/firebase_list_observable.ts': Error: Can't resolve './/utils/firebase_list_observable.ts' in '/Users/ub/Playground/involve/node_modules/angularfire2/utils'
 @ ./~/angularfire2/angularfire2.js 20:33-76
 @ ./src/main.ts
 @ multi main

WARNING in ./~/angularfire2/utils/firebase_object_observable.js
Cannot find source file './/utils/firebase_object_observable.ts': Error: Can't resolve './/utils/firebase_object_observable.ts' in '/Users/ub/Playground/involve/node_modules/angularfire2/utils'
 @ ./~/angularfire2/angularfire2.js 22:35-80
 @ ./src/main.ts
 @ multi main

WARNING in ./~/angularfire2/utils/firebase_list_factory.js
Cannot find source file './/utils/firebase_list_factory.ts': Error: Can't resolve './/utils/firebase_list_factory.ts' in '/Users/ub/Playground/involve/node_modules/angularfire2/utils'
 @ ./~/angularfire2/angularfire2.js 24:30-70
 @ ./src/main.ts
 @ multi main

WARNING in ./~/angularfire2/utils/firebase_object_factory.js
Cannot find source file './/utils/firebase_object_factory.ts': Error: Can't resolve './/utils/firebase_object_factory.ts' in '/Users/ub/Playground/involve/node_modules/angularfire2/utils'
 @ ./~/angularfire2/angularfire2.js 26:32-74
 @ ./src/main.ts
 @ multi main

WARNING in ./~/angularfire2/utils/utils.js
Cannot find source file './/utils/utils.ts': Error: Can't resolve './/utils/utils.ts' in '/Users/ub/Playground/involve/node_modules/angularfire2/utils'
 @ ./~/angularfire2/angularfire2.js 28:12-36
 @ ./src/main.ts
 @ multi main

WARNING in ./~/angularfire2/database/database.js
Cannot find source file './/database/database.ts': Error: Can't resolve './/database/database.ts' in '/Users/ub/Playground/involve/node_modules/angularfire2/database'
 @ ./~/angularfire2/angularfire2.js 34:17-47
 @ ./src/main.ts
 @ multi main

WARNING in ./~/angularfire2/providers/auth_backend.js
Cannot find source file './/providers/auth_backend.ts': Error: Can't resolve './/providers/auth_backend.ts' in '/Users/ub/Playground/involve/node_modules/angularfire2/providers'
 @ ./~/angularfire2/angularfire2.js 30:21-56
 @ ./src/main.ts
 @ multi main

WARNING in ./~/angularfire2/providers/firebase_sdk_auth_backend.js
Cannot find source file './/providers/firebase_sdk_auth_backend.ts': Error: Can't resolve './/providers/firebase_sdk_auth_backend.ts' in '/Users/ub/Playground/involve/node_modules/angularfire2/providers'
 @ ./~/angularfire2/angularfire2.js 33:34-82
 @ ./src/main.ts
 @ multi main

WARNING in ./~/angularfire2/providers/auth.js
Cannot find source file './/providers/auth.ts': Error: Can't resolve './/providers/auth.ts' in '/Users/ub/Playground/involve/node_modules/angularfire2/providers'
 @ ./~/angularfire2/angularfire2.js 15:13-40
 @ ./src/main.ts
 @ multi main

WARNING in ./~/angularfire2/utils/query_observable.js
Cannot find source file './/utils/query_observable.ts': Error: Can't resolve './/utils/query_observable.ts' in '/Users/ub/Playground/involve/node_modules/angularfire2/utils'
 @ ./~/angularfire2/utils/firebase_list_factory.js 5:25-54
 @ ./~/angularfire2/angularfire2.js
 @ ./src/main.ts
 @ multi main

ERROR in   TypeError: Cannot read property '0' of undefined

  - ExternalModuleFactoryPlugin.js:18 ExternalModuleFactoryPlugin.<anonymous>
    [involve]/[webpack]/lib/ExternalModuleFactoryPlugin.js:18:38

  - NormalModuleFactory.js:174 
    [involve]/[angular-cli]/[webpack]/lib/NormalModuleFactory.js:174:3

  - Tapable.js:123 NormalModuleFactory.applyPluginsAsyncWaterfall
    [involve]/[tapable]/lib/Tapable.js:123:70

  - NormalModuleFactory.js:158 NormalModuleFactory.create
    [involve]/[angular-cli]/[webpack]/lib/NormalModuleFactory.js:158:8

  - Compilation.js:349 Compilation.process [as _addModuleChain]
    [involve]/[angular-cli]/[webpack]/lib/Compilation.js:349:16

  - Compilation.js:417 Compilation.process [as addEntry]
    [involve]/[angular-cli]/[webpack]/lib/Compilation.js:417:7

  - SingleEntryPlugin.js:22 SingleEntryPlugin.<anonymous>
    [involve]/[webpack]/lib/SingleEntryPlugin.js:22:15

  - Tapable.js:156 Compiler.applyPluginsParallel
    [involve]/[tapable]/lib/Tapable.js:156:14

  - Compiler.js:431 Compiler.compile
    [involve]/[angular-cli]/[webpack]/lib/Compiler.js:431:7

  - Compiler.js:237 Compiler.runAsChild
    [involve]/[angular-cli]/[webpack]/lib/Compiler.js:237:7

  - compiler.js:70 
    [involve]/[html-webpack-plugin]/lib/compiler.js:70:19

  - debuggability.js:272 Promise._execute
    [involve]/[html-webpack-plugin]/[bluebird]/js/release/debuggability.js:272:9

  - promise.js:475 Promise._resolveFromExecutor
    [involve]/[html-webpack-plugin]/[bluebird]/js/release/promise.js:475:18

  - promise.js:77 new Promise
    [involve]/[html-webpack-plugin]/[bluebird]/js/release/promise.js:77:14

  - compiler.js:69 Object.compileTemplate
    [involve]/[html-webpack-plugin]/lib/compiler.js:69:10

  - index.js:47 Compiler.<anonymous>
    [involve]/[html-webpack-plugin]/index.js:47:40

  - Tapable.js:156 Compiler.applyPluginsParallel
    [involve]/[tapable]/lib/Tapable.js:156:14

  - Compiler.js:431 Compiler.compile
    [involve]/[angular-cli]/[webpack]/lib/Compiler.js:431:7

  - Compiler.js:47 Watching.<anonymous>
    [involve]/[angular-cli]/[webpack]/lib/Compiler.js:47:17

  - Tapable.js:81 next
    [involve]/[tapable]/lib/Tapable.js:81:11

  - middleware.js:80 Compiler.invalidAsyncPlugin
    [involve]/[webpack-dev-middleware]/middleware.js:80:3

  - Tapable.js:83 next
    [involve]/[tapable]/lib/Tapable.js:83:14



ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/database/database.d.ts:9:28 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/database/database.d.ts:10:30 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/providers/auth.d.ts:15:39 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/providers/auth.d.ts:16:51 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/providers/auth.d.ts:16:91 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/providers/auth.d.ts:17:50 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/providers/auth.d.ts:17:118 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/providers/auth.d.ts:20:55 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/providers/auth_backend.d.ts:6:81 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/providers/auth_backend.d.ts:8:48 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/providers/auth_backend.d.ts:13:45 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/providers/auth_backend.d.ts:41:10 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/providers/auth_backend.d.ts:61:54 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/utils/firebase_list_factory.d.ts:5:73 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/utils/firebase_list_factory.d.ts:5:103 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/utils/firebase_list_observable.d.ts:6:22 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/utils/firebase_list_observable.d.ts:7:25 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/utils/firebase_list_observable.d.ts:8:25 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/utils/firebase_list_observable.d.ts:9:34 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/utils/firebase_list_observable.d.ts:15:49 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/utils/firebase_list_observable.d.ts:15:79 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/utils/firebase_list_observable.d.ts:17:10 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/utils/firebase_list_observable.d.ts:17:40 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/utils/firebase_list_observable.d.ts:18:22 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/utils/firebase_list_observable.d.ts:18:52 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/utils/firebase_list_observable.d.ts:20:20 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/utils/firebase_list_observable.d.ts:21:52 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/utils/firebase_list_observable.d.ts:22:38 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/utils/firebase_list_observable.d.ts:23:82 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/utils/firebase_object_factory.d.ts:4:75 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/utils/firebase_object_observable.d.ts:7:101 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/utils/firebase_object_observable.d.ts:9:21 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/utils/firebase_object_observable.d.ts:10:27 
Cannot find namespace 'firebase'.

ERROR in [default] /Users/ub/Playground/involve/node_modules/angularfire2/utils/firebase_object_observable.d.ts:11:14 
Cannot find namespace 'firebase'.

No matter what I try I didn't get it working. Docs regarding to installation here are for broccoli version of angular-cli.

picture ubenzer
👍2

Most helpful comment

I had the same issue, I followed https://github.com/angular/angularfire2/issues/425, and added 'firebase' to my tsconfig.json file.

  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
{
  "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"
    ]
  }
}
picture ericjim on 23 Aug 2016
👍3

All 9 comments

I'm having the same issue and after looking through the angular-cli project tickets came across this possible solution. Haven't had a chance to actually try it myself yet but might fix the problem

Edit: @ubenzer having tried that solution i linked too I couldn't get rid of the errors, however, when I actually tried running my app everything looks to be working properly so... :confused:

Zyzle picture Zyzle on 7 Aug 2016

@ubenzer @Zyzle
Can you try with the latest version? Make sure you aren't using the manual typings.

davideast picture davideast on 23 Aug 2016

I had the same issue, I followed https://github.com/angular/angularfire2/issues/425, and added 'firebase' to my tsconfig.json file.

  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
{
  "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"
    ]
  }
}
ericjim picture ericjim on 23 Aug 2016
👍3

Closing with the fix by @ericjim. The new quickstart reflects these steps as well.

davideast picture davideast on 23 Aug 2016

@ericjim, @davideast hmmn, I've updated to angular-cli webpack.2 and angularfire2@next but I'm still seeing the same Cannot find namespace 'firebase'. errors every time webpack builds. Do I need to be on angular-cli master to resolve the problem?

Zyzle picture Zyzle on 23 Aug 2016

@Zyzle You are likely not on TypeScript 2.0.

Install both locally and globally for good measure.

npm install -g typescript@next
npm install typescript@next --save-dev
davideast picture davideast on 23 Aug 2016

@davideast Yeah I saw that in one of the linked issues here and tried installing typescript@next for both my project and globally, doesn't seem to have made any difference though. If anything it's made things a lot worse as I now get hundreds of these errors from webpack for all kinds of modules (although again with apparently no problem to how the app functions). I'm wondering if this is maybe a problem on the cli side rather than anything angularfire specific

Zyzle picture Zyzle on 23 Aug 2016

@davideast I found the issue, it wasn't my angularfire or typescript versions that were causing the problem but the version of firebase itself, after updating to 3.3.0 (over 3.1.0) everything is fine

Zyzle picture Zyzle on 24 Aug 2016

@davideast I am having a similar problem can you please help me fix. I am like struggling because of this.

[23:00:27] typescript: C:/Users/Harsha Varun/MyIonicProject/src/pages/third/third.ts, line: 4
Module '"C:/Users/Harsha Varun/MyIonicProject/node_modules/angularfire2/index"' has no exported member
'AuthProviders'.

   L3:  import {FourthPage} from '../fourth/fourth';
   L4:  import { AuthProviders, AuthMethods, AngularFire } from 'angularfire2';

[23:00:27] typescript: C:/Users/Harsha Varun/MyIonicProject/src/pages/third/third.ts, line: 4
Module '"C:/Users/Harsha Varun/MyIonicProject/node_modules/angularfire2/index"' has no exported member
'AuthMethods'.

   L3:  import {FourthPage} from '../fourth/fourth';
   L4:  import { AuthProviders, AuthMethods, AngularFire } from 'angularfire2';

[23:00:27] typescript: C:/Users/Harsha Varun/MyIonicProject/src/pages/third/third.ts, line: 4
Module '"C:/Users/Harsha Varun/MyIonicProject/node_modules/angularfire2/index"' has no exported member
'AngularFire'.

   L3:  import {FourthPage} from '../fourth/fourth';
   L4:  import { AuthProviders, AuthMethods, AngularFire } from 'angularfire2';

package.json
"name": "MyIonicProject",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/common": "4.1.0",
"@angular/compiler": "4.1.0",
"@angular/compiler-cli": "4.1.0",
"@angular/core": "4.1.0",
"@angular/forms": "4.1.0",
"@angular/http": "4.1.0",
"@angular/platform-browser": "4.1.0",
"@angular/platform-browser-dynamic": "4.1.0",
"@ionic-native/core": "3.7.0",
"@ionic-native/splash-screen": "3.7.0",
"@ionic-native/status-bar": "3.7.0",
"@ionic/storage": "2.0.1",
"angularfire2": "^4.0.0-rc.0",
"firebase": "^4.0.0",
"ionic-angular": "3.2.1",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.10"
},
"devDependencies": {
"@ionic/app-scripts": "1.3.7",
"@ionic/cli-plugin-cordova": "1.1.2",
"@ionic/cli-plugin-ionic-angular": "1.1.2",
"angularfire2": "^4.0.0-rc.0",
"typescript": "2.2.1"
},
"description": "An Ionic project"
}

Thanks in advance

harshavarun25 picture harshavarun25 on 20 May 2017
👎1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

aucevica picture aucevica  路  3Comments
fisherds picture fisherds  路  3Comments
jteplitz picture jteplitz  路  3Comments
harrylincoln picture harrylincoln  路  3Comments
adriandurran picture adriandurran  路  3Comments