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

Hi!

I don’t know why, for some reason, after update my project to the new Beta.9 the CLI is not compiling and buidling a new app.bundle.js, so my app is always showing an empty screen.

Please, I really need to solve this.

I’ve tried to update everything and to create a new project, but when I add new pages and/or firebase to the project, again no app.bundle.js…

Any help?

Have you ran

ionic serve

and checked the developer console for error messages?

Yes @matheo, and the error:

Failed to load resource: the server responded with a status of 404 (Not Found)  http://localhost:8100/build/js/app.bundle.js

Your system information:

Cordova CLI: 6.2.0
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: v6.2.0
Xcode version: Xcode 7.3 Build version 7D175

Before update Ionic it was working…:frowning:

I think is something to do with typescript.

Edit your package.json

Change "ionic-gulp-browserify-typescript": "^1.1.0", to "ionic-gulp-browserify-typescript": "1.1.0",

The error messages will still appear but it’ll still compile the webpack bundle

Thank you for your help @3m2vinatohr04!

But now I have a new issue:

Uncaught Invalid provider - only instances of Provider and Type are allowed, got: [object Object]    
reflective_provider.js:163

It seems to be related with angular2

Yes, I think you are right.

But how to adapt the provider? :frowning:

ionicBootstrap(MyApp, [
  ANGULAR2_GOOGLE_MAPS_PROVIDERS,
  provide(LazyMapsAPILoaderConfig, {
useFactory: () => {
  let config = new LazyMapsAPILoaderConfig();
  config.apiKey = 'KEY';
  return config;
}
  })
], {
mode: 'ios',
menuType: "overlay",
scrollAssist: true,
autoFocusAssist: false
});

Pretty sure we talked about this yesterday on slack…
This seems to be related to firebase and angularfire .

As for the browserify-plugin, there shouldn’t be any issue with that.

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…

Ok, I found the issue, give me 10 mins, and I’ll fix

1 Like

Awesome!

How will you post a fix for the issue? :grinning:

I got same issue…Upgrade to beta9. It doesn’t compile even after downgrading to beta8. It was working. Both has some package.json and npm install was ran.

Not sure why package list is different

I ran npm compare it with another folder (working)

NOT WORKING

C:\ionic\mapleapp-bak>npm outdated
Package               Current                     Wanted         Latest  Location
@angular/router    2.0.0-rc.2                 2.0.0-rc.2  3.0.0-alpha.8  maplecity-app
del                     2.2.0                      2.2.0          2.2.1  maplecity-app
ionic-angular    2.0.0-beta.9  2.0.0-beta.9-201606241930   2.0.0-beta.9  maplecity-app
run-sequence            1.1.5                      1.1.5          1.2.1  maplecity-app

WORKING:

> Package                                 Current                     Wanted         Latest  Location
> gulp-watch                                4.3.6                      4.3.8          4.3.8  maplecity-app
> @angular/common                      2.0.0-rc.1                 2.0.0-rc.3     2.0.0-rc.3  maplecity-app
> @angular/compiler                    2.0.0-rc.1                 2.0.0-rc.3     2.0.0-rc.3  maplecity-app
> @angular/core                        2.0.0-rc.1                 2.0.0-rc.3     2.0.0-rc.3  maplecity-app
> @angular/http                        2.0.0-rc.1                 2.0.0-rc.3     2.0.0-rc.3  maplecity-app
> @angular/platform-browser            2.0.0-rc.1                 2.0.0-rc.3     2.0.0-rc.3  maplecity-app
> @angular/platform-browser-dynamic    2.0.0-rc.1                 2.0.0-rc.3     2.0.0-rc.3  maplecity-app
> @angular/router                      2.0.0-rc.1                 2.0.0-rc.2  3.0.0-alpha.8  maplecity-app
> body-parser                              1.15.1                     1.15.2         1.15.2  maplecity-app
> del                                       2.2.0                      2.2.0          2.2.1  maplecity-app
> express                                  4.13.4                     4.14.0         4.14.0  maplecity-app
> gulp-watch                                4.3.6                      4.3.8          4.3.8  maplecity-app
> ionic-angular                      2.0.0-beta.9  2.0.0-beta.9-201606241930   2.0.0-beta.9  maplecity-app
> ionic-gulp-browserify-typescript          1.1.0                      1.1.1          1.1.1  maplecity-app
> ionic-gulp-scripts-copy                   2.0.0                      2.0.1          2.0.1  maplecity-app
> run-sequence                              1.1.5                      1.1.5          1.2.1  maplecity-app
> rxjs                               5.0.0-beta.8               5.0.0-beta.9   5.0.0-beta.9  maplecity-app

should be taken car of now

Created a new project to test and it is fixed indeed! Thanks!

Is there a way I can update my current project (which broke) to include the fix?

1 Like

There must be a better way to deal with this, but it looks like tsify is blasting through errors and allowing watchify to look like things worked even when the bundle doesn’t get made.

Commenting out this line in ionic-gulp-browserify-typescript/index.js causes the build to break on errors:

.on('error', options.onError)

The problem with third party libraries seems to be fixed, however I am getting one of those Typescript ‘errors’ still which isn’t really an error… Property 'cordova' does not exist on type 'Window'.

This is causing the app.bundle.js to still not be created which wasn’t happening before the update

@mbrookson you should just have to bump the version of the browserify plugin to 2.0.0, you should be good after that.

The other change would be with any existing typings. You might need to reinstall any other typings and update tsconfig.json to match the new version

1 Like

Not that anybody should care what I think, but errors are errors and should not be silently ignored. I realize that TypeScript made emitOnError the default in order to increase acceptance, but it undermines much of the point of using TypeScript in the first place. There are simple ways to work around things like Property 'cordova' does not exist on type 'Window' in the source code, and we should be encouraging doing that instead of allowing tsc to cry wolf into the void.

How do I fix the said error then?

I have tried adding the following to the app.ts file which I thought would work

interface Window {
  cordova: any;
}

You could use object syntax:

window['cordova']

…or cast window to any:

(<any>window).cordova

1 Like