Ionic 2 Not Generating app.bundle.js

[tyshcr]

Hello -

When I run ionic serve or gulp build, my /www/build/ directory is being generated, along with several sub-directories. The /www/build/js directory is being generated and contains several files, but the app.bundle.js file is not there. When the app tries to run in my browser, I get a white screen and a 404 Error in my console.

Any ideas would be greatly appreciated.

[bea]

This may help:

Ionic-gulp-browserify-typescript v1.1.1 does not generate app.bundle.js

Hi, I finally found the problem. Package ionic-gulp-browserify-typescript version 1.1.1 do not output ‘app.bundle.js’ if an error is found, previous version does. My app compilation was showing for a long time an “error” due to the type definition of the Promise.all() function. Basically, the type file cannot specify the return type when the input is a vector of promises, and a “filler/dummy” return type is specified. Therefore, if you specify the actual return type, you get an error. The error…

[tyshcr]

Thank you, that worked!

We had "ionic-gulp-browserify-typescript": "^1.1.0", , I changed to "ionic-gulp-browserify-typescript": "1.1.0", (removed the caret) and ran npm install. Then things started working.

[Daveshirman]

Thanks, this worked for me too. Anyone know why this happened and how we can prevent it happening again?

[mhartington]

Hmm, I’m not seeing this with 1.1.1 installed of the browserify plugin. Testing against a clean install and new project, everything is building fine for me.

Are you getting any errors in your terminal when you build?

[mbrookson]

I think this only becomes a problem when adding additional third party libraries.

If I create a blank Ionic 2 project and run Ionic serve everything is as expected.

However, if I run npm install lodash --save then typings install lodash and run ionic serve, I get a Typescript compiler error saying cannot find module lodash. This then stops any app.bundle.js file from being generated.

I don’t think this was a problem before I updated my ionic-cli to the latest version

Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.9
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.2.4
Xcode version: Xcode 7.3 Build version 7D175

Just posted a comment on another forum post about this too:

Ionic 2 beta.9 - Not building app.bundle.js

There does seem to be an issue with this. I am getting errors on my project since I upgrade ionic-cli to 2.0.0-beta.32 Running ionic serve on a fresh project works, however adding third party typescript dependencies breaks the compiler. I am getting a ‘Cannot load module lodash’ error I cannot seem to fix this and cannot do any work at the moment! I’ve seen a couple of possibly related GitHub issues so I’ll link these below…

[zhengying]

This solved my problem!

[zhengying]

It probably only happen if there is error. I have this error and just ignore it was fine before. But this might become issue now

[16:59:03] Finished ‘sass’ after 2.28 s
TypeScript error: C:/ionic/mapleapp-bak/app/providers/connectivity/connectivity.ts(23,37): Error TS2339: Property ‘connection’ does not exist on type ‘Navigator’.
TypeScript error: C:/ionic/mapleapp-bak/app/providers/connectivity/connectivity.ts(25,36): Error TS2339: Property ‘connection’ does not exist on type ‘Navigator’.
TypeScript error: C:/ionic/mapleapp-bak/app/providers/connectivity/connectivity.ts(36,35): Error TS2339: Property ‘connection’ does not exist on type ‘Navigator’.
TypeScript error: C:/ionic/mapleapp-bak/app/providers/connectivity/connectivity.ts(38,36): Error TS2339: Property ‘connection’ does not exist on type ‘Navigator’.
11.6 MB bytes written (8.00 seconds)

[Lindstron1988]

I am still having issues with this, as @mbrookson said i noticed this when installing/uninstalling plugins. i started a brand new project and slowly started moving code across including latest angular fire and it started to work but a few saves later I’m getting errors out of angularfire so i back tracked through steps that once worked that now no longer do.

Updated browserify to 2.0.0,
typings install,
I ripped out angularfire2 from my app completely
and it STILL wont build app.bundle.js

[mbrookson]

Have you checked that your typings is set up correctly? The newer version uses “globalDependencies” rather than “ambientDependencies” now, and also the file ‘main.d.ts’ has been renamed to ‘index.d.ts’

Fixed here?

[Dimitrios]

This worked for me as well!
Had the same issue and even tried removing the “^”. The trick was to re-run npm install AFTER removing the caret.

[VinceOPS]

Same here, removing the caret in package.json & running npm install did the job.

[arlevi]

I have version 2.0.0 and also have error below, so to which version I need to lower it down to ?
Error TS2339: Property 'data' does not exist on type

> npm list ionic-gulp-browserify-typescript
my_project@ my/project/dir/
└── ionic-gulp-browserify-typescript@2.0.0

[rapropos]

@arlevi

Property ‘data’ does not exist on type

That appears to be an error in your code. You are referencing a “data” property that is undeclared.

[erg1]

This seems due to newly-added enforcement of TypeScript correctness in ionic-gulp-browserify-typescript 2.0.

By removing the caret as described above, it will use 1.1.1 specifically. With the caret, it will use the newest version >= 1.1.1, which is now 2.0 and fails to build on TS errors. Removing the caret is really not a long-term solution, but allows it to work for now. I faced this too; among other things I think it happens whenever one attempts to dereference generically-declared objects with dot notation. In that case it can be avoided by declaring them to be of type any or being sure to dereference with bracket notation

/**
var t = {};
Object.assign(t, tOrig);
delete t.prop; // TS Error, BUILD FAILS SILENTLY !!! */

var t:any = {}; // *note 'any' type
Object.assign(t, tOrig);
delete t.prop; // OK

When using generic objects as dictionaries (idiomatic JavaScript), one must dereference with bracket syntax (good JS practice anyway, IMO). Dot syntax will throw TypeScript errors, despite being valid JavaScript.

I’m somewhat new to TypeScript, but I don’t really like how this is failing silently. If it’s going to fail, there should at least be a message, e.g. “Build failed due to TypeScript error(s).”

[ciekawy]

Wonder if maybe there is a way to configure this behaviour of failing due to TS errors?

[ciekawy]

here is the change - there is an option only for fail on warnings

Propogate webpack errors

[arlevi]

I’ve copy-paste it from here

Ionic Framework

I thought it was -that- simple …

It’s my first project in V2, can you explain how to declare this variable ?

[ciekawy]

what variable? Note that this thread is regarding app.bundle.js being not generated. Now we know that the reason is failing due to TS compilation errors after upgrading ionic-gulp-browserify-typescript.

If there is any problem with the migration documetation this is either a bug or something to be possibly clarified. In either case you’ll have better chance finding an answer by looking for appropriate migration related thread or creating a new one

[developersourav2012]

Hi I am facing same issue for ionic-gulp-browserify-typescriptv2.0.0.0