Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpack -- typings issue with firebase #1578

Closed
bgauvey opened this issue Aug 6, 2016 · 6 comments · Fixed by #1673
Closed

Webpack -- typings issue with firebase #1578

bgauvey opened this issue Aug 6, 2016 · 6 comments · Fixed by #1673
Assignees

Comments

@bgauvey
Copy link

bgauvey commented Aug 6, 2016

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
Copy link

moneal commented Aug 7, 2016

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
Copy link

5amfung commented Aug 8, 2016

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

@hansl
Copy link
Contributor

hansl commented Aug 8, 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?

@TheLarkInn
Copy link
Member

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
Copy link

lbecker34 commented Aug 9, 2016

@moneal update, this worked perfectly. Thank you.

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants