Ionic serve fails with app.bundle.js not found for TypeScript app


#1

Hi,

I’m considering migrating my app to Ionic 2 and TypeScript (from Ionic 1), so I’m just trying to get a basic tutorial / playground up and running with ionic start and ionic serve.

However, when I do ionic serve, the browser is just giving a blank screen and the console shows that it has failed to load app.bundle.js with a 404. Indeed, looking in the project directory there is no build directory.

As you can see from the session transcript below, there are no errors logged or any sign that anything has gone wrong from the CLI. Anyone know why this is not working and how to fix it?

Note: doing the same for a non-TypeScript project works fine. It’s only with the --ts option that it is broken.

~/tmp % ionic start playground blank --v2 --ts

One awesome Ionic app coming right up...

Downloading: https://github.com/driftyco/ionic2-app-base/archive/typescript.zip
[=============================]  100%  0.0s
Downloading: https://github.com/driftyco/ionic2-starter-blank/archive/typescript.zip
Installing Node Modules

♬ ♫ ♬ ♫  Your Ionic app is ready to go! ♬ ♫ ♬ ♫

Make sure to cd into your new app directory:
  cd playground

To run your app in the browser (great for initial development):
  ionic serve

To run on iOS:
  ionic run ios

To run on Android:
  ionic run android

To test your app on a device easily, try Ionic View:
  http://view.ionic.io

New! Add push notifications, update your app remotely, and package iOS and Android apps with the Ionic Platform!
https://apps.ionic.io/signup

New to Ionic? Get started here: http://ionicframework.com/docs/v2/getting-started

~/tmp % cd playground

~/tmp/playground % ionic serve
Running live reload server: undefined
Watching: 0=www/**/*, 1=!www/lib/**/*
√ 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 $ q

~/tmp/playground % find . -type d -name build
./node_modules/zone.js/build
./node_modules/isarray/build
./node_modules/babel-runtime/node_modules/core-js/build
./node_modules/core-js/build
./node_modules/webpack-core/node_modules/source-map/build

~/tmp/playground % ionic info

Your system information:

Cordova CLI: 6.0.0
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
OS: Distributor ID:     Ubuntu Description:     Ubuntu 15.10
Node Version: v5.5.0

#2

I had a similar issue and once I updated the CLI to the latest and it worked. You can try that


#3

I have the same problem with --ts option and without this option

The error

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

I don’t see any build folder in my project. No cordova plugins

Mi ionic info

Your system information:

Cordova CLI: 6.0.0
Ionic CLI Version: 2.0.0-beta.15
Ionic App Lib Version: 2.0.0-beta.8
OS:
Node Version: v5.7.0


#4

Well, I have upgraded to beta 19 (I was using beta 17) and the problem seems to have gone… although I’m not sure whether the problem was resolved by using b19 instead b17 or some side effect of whatever the hell npm install ionic@beta did under the covers.

There is certainly something flaky in there. ionic serve was simply not running gulp build. I could run it manually and it built fine, but the ‘serve’ task was not managing it and therefore not rebuilding when the code changed.

If this wasn’t a known fix in b19, then somebody with knowledge of how ‘serve’ works in ionic2 should really try to figure out what is going on here.


#5

Same issue here. No code added, just the --v2 --ts TAB starter app.

Cordova CLI: 6.0.0
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
OS:
Node Version: v5.7.0

Its worth to note that no issues are found with the JS file +ts code templates.
Do you think its safer to stay with the regular file type structure for --v2 projects?


#6

Please refer to this post and make sure you have the latest CLI:


#7

Sorry for the headache all, the starters come with the new package name, so if you have an old version of the CLI it will be looking for the wrong package and won’t know to run build.

Upgrading to beta.19 npm install -g ionic@beta should fix things.


#8

Facing the same issue , here is info about my environment :

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.31
Ionic App Lib Version: 2.0.0-beta.17
OS: Distributor ID:	Ubuntu Description:	Ubuntu 15.10 
Node Version: v6.0.0

#9

Same here:

Cordova CLI: 6.2.0
Gulp version:  CLI version 1.2.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10
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: v5.11.1
Xcode version: Xcode 7.3 Build version 7D175

#10

Same here:
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
OS: Distributor ID: Ubuntu Description: Ubuntu 16.04 LTS
Node Version: v4.4.3


#11

Check that you don’t have any TypeScript errors showing up in the CLI (these won’t show in the console, so everything might appear to be fine). In previous versions a TypeScript error wouldn’t stop your app from compiling and working, but now the app.bundle.js file won’t successfully compile if there are TypeScript errors.


#12

Is this new in Ionic beta 10 ? I am getting the same error… @joshmorony … If anyone has an idea about the TS for Firebase 3, I’d really appreciate the hint.


#13

Yes this affects beta 10, though it is by design, it’s not a bug. The team are looking into whether there is a better approach to this though.

In terms of getting rid of TypeScript errors, you can install the typings package:

npm install -g typings

and then install a particular package like this:

typings install source~name --global --save

to find the name and source of the typings you require, you can search in this format:

typings search [search term]

and it will show you any matches. If you just want to skip all this and get rid of the errors, you can usually just throw something like:

declare var whateverIsCausingProblems;

above the decorator in that class.


#14

@joshmorony Thank you that suppresses the typescript errors. Especially with Cordova plugins those errors were preventing the compile.

@joshmorony Josh did you run into this before:
Basically I have providerA referencing providerB to re-use some of the functions from providerB. However I am getting the following:

reflective_provider.js:233 Uncaught Cannot resolve all parameters for 'XXXX'(Http, Events, undefined). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'XXXX' is decorated with Injectable.

My provider is decorated with Injectable yet I still get that error. Any idea ?


#15

I’m not sure the problem comes with beta 10. I rolled back to version 9 and I’m still facing the same issue.

Cordova CLI: Not installed
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.28
Ionic App Lib Version: 2.0.0-beta.16
OS: Distributor ID: Ubuntu Description: Ubuntu 16.04 LTS
Node Version: v4.4.3

It’s working when I get rid of TypeScript errors. But should ionic be working with plain JavaScript ?


#16

That “undefined” looks like a gigantic red flag. Whatever is in that position in the list after those other two things is your problem.


#17

That’s when I try to reference providerB from providerA… so providerB is being shown as undefined although in beta 8 it was fine…


#18

I was having the same issue (app.bundle.js not generated).
Please try to refer to this thread: Ionic 2 Not Generating app.bundle.js

Removing the carret for ionic-gulp-browserify-typescript in package.json solved the problem for me :slight_smile: (CLI: ionic 2 beta 32, framework: ionic 2 beta 10)