Webpack -- typings issue with firebase

[bgauvey]

OS:

   Windows10

Versions:

  angular-cli: 1.0.0-beta.11-webpack
  node: 6.3.0
  os: win32 x64

Previously the build worked fine. Went through the steps to migrate to webpack and build cant find firebase. Here are the deps from my project

  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "^0.2.0",
    "@angular/http": "^2.0.0-rc.4",
    "@angular/platform-browser": "^2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "^2.0.0-rc.4",
    "@angular/router": "^3.0.0-beta.2",
    "@angular2-material/button": "^2.0.0-alpha.6-2",
    "@angular2-material/card": "^2.0.0-alpha.6-2",
    "@angular2-material/checkbox": "^2.0.0-alpha.6-2",
    "@angular2-material/core": "^2.0.0-alpha.6-2",
    "@angular2-material/grid-list": "^2.0.0-alpha.6",
    "@angular2-material/icon": "^2.0.0-alpha.6-2",
    "@angular2-material/input": "^2.0.0-alpha.6-2",
    "@angular2-material/list": "^2.0.0-alpha.6-2",
    "@angular2-material/progress-bar": "^2.0.0-alpha.6",
    "@angular2-material/progress-circle": "^2.0.0-alpha.6-2",
    "@angular2-material/radio": "^2.0.0-alpha.6-2",
    "@angular2-material/sidenav": "^2.0.0-alpha.6-2",
    "@angular2-material/tabs": "^2.0.0-alpha.6",
    "@angular2-material/toolbar": "^2.0.0-alpha.6-2",
    "angularfire2": "^2.0.0-beta.2",
    "firebase": "^3.1.0",
    "firebase-tools": "^3.0.4",
    "core-js": "^2.4.0",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "ts-helpers": "^1.1.1",
    "zone.js": "0.6.12"
  },

Console output:

Version: webpack 2.1.0-beta.18
Time: 7918ms
              Asset     Size  Chunks             Chunk Names
     main.bundle.js  3.52 MB    0, 2  [emitted]  main
polyfills.bundle.js   230 kB    1, 2  [emitted]  polyfills
          inline.js  4.96 kB       2  [emitted]  inline
           main.map  3.98 MB    0, 2  [emitted]  main
      polyfills.map   292 kB    1, 2  [emitted]  polyfills
         inline.map  5.13 kB       2  [emitted]  inline
         index.html  2.77 kB          [emitted]
         .npmignore  0 bytes          [emitted]
chunk    {0} main.bundle.js, main.map (main) 3.39 MB {1} [initial] [rendered]
chunk    {1} polyfills.bundle.js, polyfills.map (polyfills) 194 kB {2} [initial] [rendered]
chunk    {2} inline.js, inline.map (inline) 0 bytes [entry] [rendered]

WARNING in ./~/angularfire2/angularfire2.js
Cannot find source file './/angularfire2.ts': Error: Can't resolve './/angularfire2.ts' in 'E:\Source\service-tracker-webpack\node_modules\angularfire2'
 @ ./src/app/core/firebase/index.ts 2:0-100
 @ ./src/main.ts
 @ multi main

...

ERROR in [default] E:\Source\service-tracker-webpack\node_modules\angularfire2\utils\firebase_object_observable.d.ts:7:101
Cannot find namespace 'firebase'.

ERROR in [default] E:\Source\service-tracker-webpack\node_modules\angularfire2\utils\firebase_object_observable.d.ts:9:21
Cannot find namespace 'firebase'.

ERROR in [default] E:\Source\service-tracker-webpack\node_modules\angularfire2\utils\firebase_object_observable.d.ts:10:27
Cannot find namespace 'firebase'.

ERROR in [default] E:\Source\service-tracker-webpack\node_modules\angularfire2\utils\firebase_object_observable.d.ts:11:14
Cannot find namespace 'firebase'.

Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  4.86 kB       0
    chunk    {0} index.html 2.8 kB [entry] [rendered]

[moneal]

I had this exact issue and couldn't find a cleanly documented way to fix it. For the missing source warning you need to add path.resolve(projectRoot, 'node_modules/angularfire2'), to the excludes for the source-map-loader in node_modules/angular-cli/addon/ng2/models/webpack-build-common.ts. It should look like this:

 module: {
      preLoaders: [
        {
          test: /\.js$/,
          loader: 'source-map-loader',
          exclude: [
            path.resolve(projectRoot, 'node_modules/rxjs'),
            path.resolve(projectRoot, 'node_modules/@angular'),
            path.resolve(projectRoot, 'node_modules/angularfire2'),
          ]
        }
      ],

For the namespace problem you need to add the typings file for firebase like documented in the angularfire2 docs. I also needed to edit src/typings.d.ts to include /// <reference path="../typings/index.d.ts" />.

I know editing webpack-build-common.ts is bad but it fixed the annoying warnings.

[5amfung]

I had the same warning when using another npm dependency. I hope to see a solution to this soon.

[hansl]

@TheLarkInn: I'm going to assign this to you. Even though this is Firebase's fault (to release sourcemaps without inline source), we will encounter many more libraries that make that mistake. I suggest we ignore all node_modules sourcemaps.

What do you think?

[TheLarkInn]

I think we can do that. Do we have an issue to tie this too so we can track it on Firebase's side too?

CC @davideast

[lbecker34]

@moneal update, this worked perfectly. Thank you.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}