Angular-cli: Webpack -- typings issue with firebase

Created on 6 Aug 2016 · 6Comments · Source: angular/angular-cli

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]

Source

bgauvey

👍1

Most helpful comment

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.

moneal on 7 Aug 2016

👍3

All 6 comments

 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'),
          ]
        }
      ],

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

moneal on 7 Aug 2016

👍3

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

5amfung on 8 Aug 2016

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