ionic 2 serve issue #565

jtushar53 · 2016-09-27T06:25:03Z

Hello,

Getting below issue while serve with ionic beta 12

[11:53:15] lint finished in 1.72 s
[11:53:19] typescript compiler ready in 5.90 s
[11:53:19] bundle dev started ...
[11:53:27] bundle dev failed: Error: Module D:\Tushar\Projects\ionic-conferenc
e-app\node_modules\angularfire2\node_modules\firebase\firebase-browser.js does n
ot export initializeApp (imported by D:\Tushar\Projects\ionic-conference-app\nod
e_modules\angularfire2\angularfire2.js)
[11:53:27] sass started ...
[11:53:30] sass finished in 2.55 s

anyone know what could be the issue

followed steps from docs

jtushar53 · 2016-09-28T06:52:30Z

just now upgraded to ionic rc 2.0.0 which has angular 2.0.0 (stable). still getting same error.

[12:19:33] Error: Module D:\Tushar\Projects\ionic2Sample\node_modules\angularfi
re2\node_modules\firebase\firebase-browser.js does not export initializeApp (imp
orted by D:\Tushar\Projects\ionic2Sample\node_modules\angularfire2\angularfire2.
js)
at Module.trace (D:\Tushar\Projects\ionic2Sample\node_modules\rollup\dist\ro
llup.js:7677:29)
at ModuleScope.findDeclaration (D:\Tushar\Projects\ionic2Sample\node_modules
\rollup\dist\rollup.js:7300:22)
at Scope.findDeclaration (D:\Tushar\Projects\ionic2Sample\node_modules\rollu
p\dist\rollup.js:5351:39)
at CallExpression.bind (D:\Tushar\Projects\ionic2Sample\node_modules\rollup
dist\rollup.js:5826:28)
at D:\Tushar\Projects\ionic2Sample\node_modules\rollup\dist\rollup.js:5151:5
0
at ReturnStatement.eachChild (D:\Tushar\Projects\ionic2Sample\node_modules\r
ollup\dist\rollup.js:5168:5)
at ReturnStatement.bind (D:\Tushar\Projects\ionic2Sample\node_modules\rollup
\dist\rollup.js:5151:7)
at BlockStatement.bind (D:\Tushar\Projects\ionic2Sample\node_modules\rollup
dist\rollup.js:5617:9)
at FunctionDeclaration.bind (D:\Tushar\Projects\ionic2Sample\node_modules\ro
llup\dist\rollup.js:6405:13)
at ExportNamedDeclaration.bind (D:\Tushar\Projects\ionic2Sample\node_modules
\rollup\dist\rollup.js:6223:44)

app.module.ts
export const firebaseConfig = {
apiKey: 'xxx',
authDomain: 'xxx',
databaseURL: 'xxx',
storageBucket: 'xxx'
};
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
BrowserModule,
AngularFireModule.initializeApp(firebaseConfig),
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
providers: []
})
export class AppModule { }

is this something to do with ionic so that i can report there?
any help

drantunes · 2016-09-28T07:59:04Z

Same error.

chrste90 · 2016-09-28T10:36:28Z

I'm getting the same error. No idea what to do to fix it.

shlomiassaf · 2016-09-28T12:34:43Z

I get the same error as well.
This is related to the rollup bundling process in ionic beta12.

I'm don't know the cause, maybe its the ionic setup maybe it a problem with the way firebase is bundled.

To workaround this for the time being you can (based on ionic beta12):
Create a custom rollup config file and instruct the rollup-plugin-node-resolve to skip firebase

rollup.config.js

const ngTemplate = require('@ionic/app-scripts/dist/plugins/ng-template').ngTemplate;
const nodeResolve = require('rollup-plugin-node-resolve');
const commonjs = require('rollup-plugin-commonjs');

// https://github.com/rollup/rollup/wiki/JavaScript-API
module.exports = {
  /**
   * entry: The bundle's starting point. This file will
   * be included, along with the minimum necessary code
   * from its dependencies
   */
  entry: '.tmp/app/main.dev.js',

  /**
   * sourceMap: If true, a separate sourcemap file will
   * be created.
   */
  sourceMap: true,

  /**
   * format: The format of the generated bundle
   */
  format: 'iife',

  /**
   * dest: the output filename for the bundle in the buildDir
   */
  dest: 'main.js',

  /**
   * plugins: Array of plugin objects, or a single plugin object.
   * See https://github.com/rollup/rollup/wiki/Plugins for more info.
   */
  plugins: [
    ngTemplate(),
    commonjs(),
    nodeResolve({
      module: true,
      jsnext: true,
      main: true,
      browser: true,
      extensions: ['.js'],
      skip: [ 'firebase' ]
    })
  ]

};

This is a copy of the default config, just adding the skip.
To tell ionic to use this config set it up in package.json

  "config": {
    "ionic_rollup": "./config/rollup.config.js"
  },

Now firebase is not part of the bundle so we need to load it via script tags. In your index.html add: <script src="assets/firebase.js"></script>, I've added after the polyfill script.

Now we need to copy the firebase library to the assets library so it's available:
we will use a custom copy.config.js:

const orgCopyConfig = require('@ionic/app-scripts/config/copy.config');


orgCopyConfig.include.push(
  {
    src: 'node_modules/angularfire2/node_modules/firebase/firebase.js',
    dest: 'www/assets/firebase.js'
  }
);

module.exports = orgCopyConfig;

Here I use the original config, no need to rewrite it.

and again, adding it to the config section in package.json

  "config": {
    "ionic_rollup": "./config/rollup.config.js",
    "ionic_copy": "./config/copy.config.js"
  }

NOTE: Currently they ionic build does not support custom prod config. This means that in development everything is 💯 but when building a prod output the skip setup won't hold and ionic will take the custom file we setup (dev). I opened a tick for it ionic-team/ionic-app-scripts#25. For now I just change the file when I want to deploy, that's reasonable considering it's a new process (rollup) in the beta.

  entry: '.tmp/app/main.dev.js',

change to:

  entry: '.tmp/app/main.prod.js',

chrste90 · 2016-09-28T14:29:49Z

Hey, i'm trying to solve the problem with your config, but now i get the following error:
[16:18:37] rollup: Treating 'firebase' as external dependency
[16:18:40] rollup: No name was provided for external module 'firebase' in options.globals â€“ guessing 'firebase$1'

Any idea what i can do to solve the problem?

jtushar53 · 2016-09-28T14:37:56Z

thank you very much @shlomiassaf ,
@chris1308 me too getting that error
but successfully working realtime array.

@shlomiassaf ,i think something nasty going with watch script, try to change my code getting below error. then i have to restart ionic serve

Running 'serve:before' npm script before serve
`> ionic-hello-world@ watch D:\Tushar\Projects\ionic2Sample

ionic-app-scripts watch
[20:06:29] ionic-app-scripts 0.0.23
[20:06:29] watch started ...
[20:06:30] build dev started ...
[20:06:30] clean started ...
[20:06:30] clean finished in 20 ms
[20:06:30] copy started ...
[20:06:30] typescript compiler started ...
[20:06:30] lint started ...
[20:06:30] copy finished in 97 ms
[20:06:31] lint finished in 1.15 s
[20:06:35] typescript compiler ready in 5.33 s
[20:06:35] bundle dev started ...
[20:06:40] rollup: Treating 'firebase' as external dependency
[20:06:45] rollup: No name was provided for external module 'firebase' in optio
ns.globals - guessing 'firebase'
[20:06:47] bundle dev finished in 12.20 s
[20:06:47] sass started ...
[20:06:49] sass finished in 2.17 s
[20:06:49] build dev finished in 19.72 s
[20:06:49] watch ready in 19.80 s
Running live reload server: http://localhost:35729
Watching: www//*, !www/lib//, !www/__/.map
√ Running dev server: http://localhost:8100
Ionic server commands, enter:
restart or r to restart the client app from the root
goto or g and a url to have the app navigate to the given url
consolelogs or c to enable/disable console log output
serverlogs or s to enable/disable server log output
quit or q to shutdown the server and exit
ionic $ [20:07:06] typescript compilation started ...
[20:07:09] bundle dev update started ...
[20:07:11] Error: Could not load firebase (imported by D:\Tushar\Projects\ionic
2Sample\node_modules\angularfire2\angularfire2.js): ENOENT: no such file or dire
ctory, open 'D:\Tushar\Projects\ionic2Sample\firebase'
at D:\Tushar\Projects\ionic2Sample\node_modules\rollup\dist\rollup.js:8742:1
0
at process._tickCallback (node.js:369:9)
[20:07:11] sass started ...
[20:07:11] sass finished in 17 ms
[20:07:11] typescript compilation finished in 5.11 s
[20:07:11] bundle dev update started ...
[20:07:11] RangeError: Maximum call stack size exceeded
at isArray (native)
at deepClone (D:\Tushar\Projects\ionic2Sample\node_modules\rollup\dist\rollu
p.js:157:7)
at deepClone (D:\Tushar\Projects\ionic2Sample\node_modules\rollup\dist\rollu
p.js:165:18)
at deepClone (D:\Tushar\Projects\ionic2Sample\node_modules\rollup\dist\rollu
p.js:165:18)
at deepClone (D:\Tushar\Projects\ionic2Sample\node_modules\rollup\dist\rollu
p.js:165:18)
at deepClone (D:\Tushar\Projects\ionic2Sample\node_modules\rollup\dist\rollu
p.js:165:18)
at deepClone (D:\Tushar\Projects\ionic2Sample\node_modules\rollup\dist\rollu
p.js:165:18)
at deepClone (D:\Tushar\Projects\ionic2Sample\node_modules\rollup\dist\rollu
p.js:165:18)
at deepClone (D:\Tushar\Projects\ionic2Sample\node_modules\rollup\dist\rollu
p.js:165:18)
at deepClone (D:\Tushar\Projects\ionic2Sample\node_modules\rollup\dist\rollu
p.js:165:18)
[20:07:11] sass started ...
[20:07:11] sass finished in 17 ms`

shlomiassaf · 2016-09-28T15:36:02Z

@chris1308 this is a message not a warning I get that to, you can remove it by supplying globals to rollup.

@jtushar53 yes this is a known error forgot to warn about it (: too many error in the app-scripts build, it's new.

You can't fix that without some hard changes, you need to open the package and edit bundle.js , comment out the part that assigns cache.

The caching can't handle skipped modules in an update.
I've opened and issue on that too

chrste90 · 2016-09-28T15:48:14Z

Hey,

thanks for your help.
Do you know how i can supply globals to rollup?
The project isn't working for me, when i open the page, i get an error message:
Uncaught ReferenceError: firebase$1 is not defined main.js

Anything else i could do?

jtushar53 · 2016-09-28T15:50:35Z

thanks @shlomiassaf , you saved my days. i'm assuming it's not angularfire2 issue so closing this issue.

shlomiassaf · 2016-09-28T16:07:24Z

@chris1308

globals: {
    backbone: 'Backbone',
    underscore: '_'
  }
`

see the [Rollup API](https://github.com/rollup/rollup/wiki/JavaScript-API)

dmastag · 2016-09-30T10:40:31Z

Thanks @shlomiassaf
I got it working with your solution.

Question would be, is this a temporary hack or something that I will always have to do on all of my angularfire projects in teh future?

adirzoari · 2016-10-09T11:49:15Z

i have this problem and didn't get solution for it..

bundle dev failed: Module C:\Users\XXX\node_modules\angularfire2\node_modules\firebase\firebase-browser.js does not export initializeApp (imported by C:\Users\XXX\node_modules\angularfire2\angularfire2.js)

this is my rollup.config.js
`var nodeResolve = require('rollup-plugin-node-resolve');
var commonjs = require('rollup-plugin-commonjs');
var globals = require('rollup-plugin-node-globals');
var builtins = require('rollup-plugin-node-builtins');
var json = require('rollup-plugin-json');

// https://github.com/rollup/rollup/wiki/JavaScript-API

var rollupConfig = {
  useStrict: false,
  /**
   * entry: The bundle's starting point. This file will
   * be included, along with the minimum necessary code
   * from its dependencies
   */
  entry: 'src/app/main.dev.ts',

  /**
   * sourceMap: If true, a separate sourcemap file will
   * be created.
   */
  sourceMap: true,

  /**
   * format: The format of the generated bundle
   */
  format: 'iife',

  /**
   * dest: the output filename for the bundle in the buildDir
   */
  dest: 'main.js',

  /**
   * plugins: Array of plugin objects, or a single plugin object.
   * See https://github.com/rollup/rollup/wiki/Plugins for more info.
   */
  plugins: [
    builtins(),
    commonjs({
      include: [
        'node_modules/rxjs/**', // firebase depends on rxjs and needs this to avoid build errors
        'node_modules/firebase/**' // here is firebase
      ],
      namedExports: {
        'node_modules/firebase/firebase.js': ['initializeApp', 'auth', 'database']
      }
    }),
    nodeResolve({
      module: true,
      jsnext: true,
      main: true,
      browser: true,
      extensions: ['.js']
    }),
    globals(),
    json()
  ]
};

if (process.env.IONIC_ENV == 'prod') {
  // production mode
  rollupConfig.entry = '/app/main.prod.ts';
  rollupConfig.sourceMap = false;
}

module.exports = rollupConfig;`

jtushar53 · 2016-10-09T12:03:14Z

opening this issue as i am still getting issues while creating new projects, currently workaround by @shlomiassaf made it work i am ignoring side effects. waiting for angularfire2 team to comment on this

adirzoari · 2016-10-09T12:05:06Z

@jtushar53 no solution for it yet?

jtushar53 · 2016-10-09T12:19:09Z

@adirzoari , didn't got any proper solution but you can here https://javebratt.com/ionic2rc0-firebase-angularfire2/ or https://javebratt.com/ionic2rc0-firebase-angularfire2/

I am currently on beta 11 as of now

flamesoft · 2016-10-18T07:05:16Z

I am also have the save problem both in ionic2rc0 and rc1. I used the rollup in package.json. But it can only work in the browser. When I run "ionic build ios", it gives "ngc error" during building and the exported app just freezes in the iOS simulator and mobiles.

 Error: Error encountered resolving symbol values statically. Calling function 'defaultFirebase', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /Users/yan/MyApp/.tmp/app/app.module.ts, resolving symbol AppModule in /Users/yan/MyApp/.tmp/app/app.module.ts
    at simplifyInContext (/Users/yan/MyApp/node_modules/@angular/compiler-cli/src/static_reflector.js:469:23)

Do you have any workaround solution? Thanks!

niklasravnsborg · 2016-10-18T13:30:43Z

I have the same problem... Anyone with an idea? :)

Sethles · 2016-10-18T18:32:33Z

I used this fix: firebase-browser build issue #24
https://github.com/ng-be/app-ng-be-org/pull/24/files

jtushar53 · 2016-11-08T10:27:19Z

updating to angularfire2 2.0.0-beta.6 and ionic rc2, it is working as expected without rollupconfig.js as ionic rc2 has webpack by default now.

stocks09 · 2016-11-11T21:52:42Z

@dmastag can you please share your solution to @chris1308 error above? What are your values for rollup.config.js globals:{...}

I'm getting the same error:

[16:18:37] rollup: Treating 'firebase' as external dependency
[16:18:40] rollup: No name was provided for external module 'firebase' in options.globals â€“ guessing 'firebase$1'

dmastag · 2016-11-12T01:15:18Z

Sure @stocks09 , I set it up like this:

In package.json, you have to add:

  "config": {
    "ionic_rollup": "./config/rollup.config.js",
    "ionic_copy": "./config/copy.config.js"
  },

And these are the actual files:
https://gist.github.com/dmastag/c04d5a7eef8f230c69393f41b80c0500

As @jtushar53 said though, RC2 is using webpack by default though I prefer rollup since I like to torture myself 😄

stocks09 · 2016-11-13T20:39:04Z

Thanks @dmastag for sharing your code. I think I like to torture myself too 😄

jtushar53 changed the title ~~ionic 2 build issue~~ ionic 2 serve issue Sep 27, 2016

shlomiassaf mentioned this issue Sep 28, 2016

Using CommonJS modules with rollup ionic-team/ionic-app-scripts#16

Closed

jtushar53 closed this as completed Sep 28, 2016

AwsmOli mentioned this issue Sep 29, 2016

Ionic 2.0.0-rc.0 support #578

Closed

chrste90 mentioned this issue Sep 29, 2016

Use of unexported auth property #545

Closed

jtushar53 mentioned this issue Sep 30, 2016

Updating AngularFire/Firebase project to new RC - @types issue ionic-team/ionic-app-scripts#53

Closed

jtushar53 reopened this Oct 9, 2016

SamVerschueren mentioned this issue Oct 10, 2016

fix firebase-browser build issue ng-be/2016-app-ng-be-org#24

Merged

davideast added the comp: ionic label Oct 26, 2016

jtushar53 closed this as completed Nov 8, 2016

gauntface mentioned this issue Apr 23, 2018

Possible Mismatch with Typings and Browser Bundles? firebase/firebase-js-sdk#716

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ionic 2 serve issue #565

ionic 2 serve issue #565

jtushar53 commented Sep 27, 2016

jtushar53 commented Sep 28, 2016 •

edited

Loading

drantunes commented Sep 28, 2016

chrste90 commented Sep 28, 2016

shlomiassaf commented Sep 28, 2016 •

edited

Loading

chrste90 commented Sep 28, 2016

jtushar53 commented Sep 28, 2016 •

edited

Loading

shlomiassaf commented Sep 28, 2016

chrste90 commented Sep 28, 2016

jtushar53 commented Sep 28, 2016

shlomiassaf commented Sep 28, 2016

dmastag commented Sep 30, 2016

adirzoari commented Oct 9, 2016 •

edited

Loading

jtushar53 commented Oct 9, 2016

adirzoari commented Oct 9, 2016

jtushar53 commented Oct 9, 2016

flamesoft commented Oct 18, 2016

niklasravnsborg commented Oct 18, 2016

Sethles commented Oct 18, 2016

jtushar53 commented Nov 8, 2016

stocks09 commented Nov 11, 2016

dmastag commented Nov 12, 2016

stocks09 commented Nov 13, 2016

ionic 2 serve issue #565

ionic 2 serve issue #565

Comments

jtushar53 commented Sep 27, 2016

jtushar53 commented Sep 28, 2016 • edited Loading

drantunes commented Sep 28, 2016

chrste90 commented Sep 28, 2016

shlomiassaf commented Sep 28, 2016 • edited Loading

chrste90 commented Sep 28, 2016

jtushar53 commented Sep 28, 2016 • edited Loading

shlomiassaf commented Sep 28, 2016

chrste90 commented Sep 28, 2016

jtushar53 commented Sep 28, 2016

shlomiassaf commented Sep 28, 2016

dmastag commented Sep 30, 2016

adirzoari commented Oct 9, 2016 • edited Loading

jtushar53 commented Oct 9, 2016

adirzoari commented Oct 9, 2016

jtushar53 commented Oct 9, 2016

flamesoft commented Oct 18, 2016

niklasravnsborg commented Oct 18, 2016

Sethles commented Oct 18, 2016

jtushar53 commented Nov 8, 2016

stocks09 commented Nov 11, 2016

dmastag commented Nov 12, 2016

stocks09 commented Nov 13, 2016

jtushar53 commented Sep 28, 2016 •

edited

Loading

shlomiassaf commented Sep 28, 2016 •

edited

Loading

jtushar53 commented Sep 28, 2016 •

edited

Loading

adirzoari commented Oct 9, 2016 •

edited

Loading