Angularfire: npm source map pointing to non existent files

[doovers]

It seems source maps are pointing to the ../src directory (as shown in the example below) which doesn't exist. This throws multiple 'cannot find source file warnings'.

{"version":3,"file":"angularfire2.js","sourceRoot":"","sources":["../src/angularfire2.ts"] ...

[FredMichel]

I am experiencing same issues. I am trying to integrate _angularfire2_ with angular2-webpack-starter

[jeffbcross]

@doovers and @FredMichel which files are you seeing this in? And in what release version?

[jeffbcross]

Nevermind, I see the problem.

[doovers]

@jeffbcross Unfortunately I'm still getting warnings despite the path having changed... (2.0.0-beta.0)

WARNING in ./~/angularfire2/angularfire2.js
Cannot find source file './/angularfire2.ts'

[awwong1]

Perhaps it's because the ts files aren't there?

WARNING in ./~/angularfire2/angularfire2.js
Cannot find source file './/angularfire2.ts': Error: Cannot resolve 'file' or 'directory' .//angularfire2.ts in //node_modules/angularfire2

$ ls node_modules/angularfire2/
README.md       angularfire2.js     database        package.json        tokens.d.ts     tokens.js.map
angularfire2.d.ts   angularfire2.js.map es6         providers       tokens.js       utils

[dalesbit]

change the config file:
webpack.common.js -> module -> preLoaders -> exclude
add: helpers.root('node_modules/angularfire2'),

this will cause angularfire2's source map to be ignored

[beckmeindia]

@doovers Could you please tell me how you solved this problem? I am getting the exact same warning for my webpack project with angularfire2.

Cheers,
Rahul

[doovers]

@beckmeindia I never solved it sorry!

[dalesbit]

@doovers @beckmeindia

Are you guys using webpack?
Change the webpack.common.js in the config folder. Note the change is:
exclude: [ ... helpers.root('node_modules/angularfire2'), ... ]

module: {

    /*
     * An array of applied pre and post loaders.
     *
     * See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
     */
    preLoaders: [

      /*
       * Tslint loader support for *.ts files
       *
       * See: https://github.com/wbuchwalter/tslint-loader
       */
       // { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },

      /*
       * Source map loader support for *.js files
       * Extracts SourceMaps for source files that as added as sourceMappingURL comment.
       *
       * See: https://github.com/webpack/source-map-loader
       */
      {
        test: /\.js$/,
        loader: 'source-map-loader',
        exclude: [
          // these packages have problems with their sourcemaps
          helpers.root('node_modules/rxjs'),
          helpers.root('node_modules/@angular'),
          helpers.root('node_modules/angularfire2'),
          helpers.root('node_modules/@ngrx'),
          helpers.root('node_modules/@angular2-material'),
        ]
      }

    ],
...

[beckmeindia]

hey @eisenmaxx
Thanks a lot for replying back. I am currently using angular-universal-starter from https://github.com/angular/universal-starter
I am trying to find a way to integrate angularfire2 with this project.

While running npm start I am getting warnings for almost all angularfire2 map files.
Also I could not find any documentation to integrate angularfire2 with webpack (the present one has angular-cli)
Could you please help?

Cheers,
Rahul

[dalesbit]

@beckmeindia
https://github.com/angular/universal-starter/blob/master/webpack.config.js#L18 (Line 18)

add: exclude: [ 'full path for your node_modules/angularfire2' ] :) dont forget to change it to reflect your project.

If you install af2 with npm, it should work just fine otherwise if you are using jspm its the same if you use jspm install instead of npm :)

if you have any specific questions the go ahead and ask :) futher more i can not help you with the integration without more info. I suggest, you should try to install af2 to a starter kit with no additional changes and try to get it work, meanwhile if you need help you can ask any time ;)

[beckmeindia]

Hi @eisenmaxx
I have been able to work around the previous problem by commenting the entire line.
But there is a different problem with angularfire2 running on server side. Apparently the setup for webpack seems to be fine but it says, no provider for Angularfire while running.

I have added the repository I am working on, here: https://github.com/beckmeindia/universal-angularfire2

Also I have discussed about the issue in the angularfire2 webpack repository added by @r-park here:
https://github.com/r-park/todo-angular2-firebase/issues/77#issuecomment-234967193

Could you please tell me where I am possibly going wrong?

Also I would like to ask @jeffbcross & @gdi2290 if angularfire2 cannot be run in angular-universal's environment.

Thanks,
Rahul