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
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.
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?
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.
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.
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.
@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 ?
(CLI: ionic 2 beta 32, framework: ionic 2 beta 10)