ionic 2 serve issue

[jtushar53]

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]

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]

Same error.

[chrste90]

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

[shlomiassaf]

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]

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]

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]

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

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]

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

[shlomiassaf]

@chris1308

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

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