angular-cli: 1.0.0-beta.11-webpack.8 compilation ERRORS

[edoardoVD]

I think its not an issue per se(say)...

Did a new project with angular-cli: 1.0.0-beta.11-webpack.8, followed the instructions for angularfire2:
https://github.com/angular/angularfire2/blob/master/docs/1-install-and-setup.md

ng serve ( or ng build) ....
BAM !!!:

ERROR in [default] \node_modules\angularfire2\angularfire2.d.ts:16:65
Cannot find namespace 'firebase'.
ERROR in [default] \node_modules\angularfire2\angularfire2.d.ts:18:45
Cannot find namespace 'firebase'.
ERROR in [default] \node_modules\angularfire2\auth\auth.d.ts:14:39
Cannot find namespace 'firebase'.
ERROR in [default] \node_modules\angularfire2\auth\auth.d.ts:15:51
Cannot find namespace 'firebase'.
ERROR in [default] \node_modules\angularfire2\auth\auth.d.ts:15:91
Cannot find namespace 'firebase'.
ERROR in [default] \node_modules\angularfire2\auth\auth.d.ts:16:50
Cannot find namespace 'firebase'.
ERROR in [default] \node_modules\angularfire2\auth\auth.d.ts:16:118
Cannot find namespace 'firebase'.
ERROR in [default] \node_modules\angularfire2\auth\auth.d.ts:19:55
Cannot find namespace 'firebase'.

Even though the output looks scary, my app is being served and I can use it.

I ended up putting the following reference to the firebase.d.ts file on

file: YOURDISK:\YOUR PROJECT FOLDER\node_modules\angularfire2\angularfire2.d.ts
reference path="../firebase/firebase.d.ts" /

ng serve ( or ng build) .... no more scary bloody red messages.... all good now.

So I guess the newest angular cli and webpack , need to have all of the typing files/ref in order to avoid the nasty messages.

If anyone out there knows more about the magic behind angular-cli: 1.0.0-beta.11-webpack.8 , on how it builds, what files does it look for settings/directions**, I would appreciate it : D**

Cheers,
edo@rdo

[terencewhitenz]

Hi @edoardoVD, I had the same problem on the weekend past, the fix that I did is in #461 (comment)

[edoardoVD]

Hi @terencewhitenz thanks for the tip

So I tried the following on .../src/tsconfig.json

"target": "es5",
"typeRoots": [
"../node_modules/@types"
],
"types": [
"firebase"
]

Terminal still screams bloody murder (error messages), I'm running
tsc -v
Version 2.0.0

Apparently "types" indicates to the TSC (version 2 or above) to include certain files when compiling, **which makes me think, for our scenario, it will look for "typeRoots"./firebase/firebase.d.ts ?**

Anywho.. . . it's still not working for me, no biggy (since the app works), I'll just temper with the angular2.d.ts file to have the reference of reference path="../firebase/firebase.d.ts" to get rid of the messages.. .. .

NOTE: if I leave the above reference as well the setting on the tsconfig.json, I get the following error, when webpack is done:
Cannot find type definition file for 'firebase'. (I'm guessing this is an error from TSC).
Makes me wonder whats the lookup mechanism of TSC with the above settings (does it look at the firebase folder?, or in it for a index.d.ts, firebase.d.ts...)

: D ...................

[vekexasia]

not working for me either. this is stressfull. console is fully crowded with "cannot find namespace firebase" errors

[dmastag]

@edoardoVD could you share how to add

reference path="../firebase/firebase.d.ts" /

into firebase2.d.ts ?

[dmastag]

I think I got what you mean, so I'll have to add

/// <reference path="../firebase/firebase.d.ts"/>

into node_modules\angularfire2\angularfire2.d.ts

To get rid of all the
Cannot find namespace 'firebase'

[dmastag]

Tried it out with a fresh Angular CLI (1.0.0-beta.14) and got it working by either adding

import * as firebase from 'firebase';

or

/// <reference path="../firebase/firebase.d.ts"/>

on top of node_modules\angularfire2\angularfire2.d.ts
This seems much more a hack than a solution. I bet a better solution/fix is being worked on by the Dev team.

[edoardoVD]

@dmastag , yep that's correct, thanks for letting me know that it also works like: import * as firebase from 'firebase', makes sense since typescript is configured to look under folder npm modules
tsconfig.json

"typeRoots": [
      "../node_modules/@types"
    ], 

thing is that even though we get those errors, the app should work, from what I can infer is, that webpack is smart enough to know that a certain namespace/dependency is missing and reports "errors".
I also have observed this with css imports, and resources as dependencies (images, svns, fonts, etc), webpack is kind enough to scream bloody death errors/issues on the output screen when something is missing.

The map of the problematic (muse song) is that npm packages don't always come with all of the typescript definition files or proper referencing of external namespaces. I had the same issue with underscore, which I just downloaded from https://github.com/DefinitelyTyped/DefinitelyTyped