How to Get TypeScript to work in Ionic View App?

Ionic Framework ionic-v3
1

I’ve been testing my application in FireFox, but now that I am trying to demo it on my device via the Ionic View app none of my content is displaying. Instead, I just get the header bar from my HomePage and a blank side menu. The content is a ion-slide, an ion-list, and and ion-side-menu. Are any of these not compatible with the app?

I’ve tried updating cordova and searching everywhere online, however every instance of this problem seemed to be in versions 1 or 2, and specifically dealt with using the ionic run/emulate command. Has anyone seen this problem before or know where I can find a resource to resolve it?? Let me know if you’d like me to post some code, but I’m not sure which part of my code would be relevant.

My system version is:
Ionic 3.4.0, Cordova 7.0.1, Angular 4.1.3, Typescript 2.3.3, NodeJS 8.1.0

<UPDATE>
I’ve pretty much determined that no typescript gets processed when using the Ionic View app, and the only content displayed is the pure HTML from the app.html file (hence why the ion-menu is there but not the items inside of it, since it populates with data from a JSON file). Currently looking for a solution as to why. Anyone know if the parameters in the app.component.ts constructor could have any impact on this? Mine are:

constructor(public platform: Platform, private http: Http, private translate: TranslateService, private config: Config) {

Other than that I’m comparing my implementation to the super template implementation since that works fine on the Ionic View app. This means it’s not an environment issue but I’m guessing I’m missing something core to the bootstrap or something like that.

</UPDATE>

2

If you are using Ionic View the local version of Cordova is not relevant.
The Ionic version you are using also is not really relevant at all.

Are you using any native functionality in your app via Cordova plugins?
Have you build your app locally using ionic cordova build?

3

No, I am only using ionic components. I am using ng directives but I believe this are ionic as well? And no, I do not have cordova CLI installed so I haven’t built the app locally with it. My intent is to build a progressive web app, not a hybrid mobile app, so I am limiting myself to UI elements and no native Ionic components either.

4

But ionic serve is working fine?
How did you upload the app for Ionic View?

5

Yes, I tested via browser with ionic serve, then used ionic upload. Cleared app data in Ionic View and then opened it up.

Edit: I went through my application and found one cordova plugin, along with several mentions of cordova all of which I removed. The app no longer has any cordova dependencies but the problem persists. Really thought I was on to something there.

Also removed Ionic Native dependencies, but still doesn’t work

6

Post your ionic info output and package.json content please.
Also run ionic cordova plugin list please.

7

Ionic info:
global packages:

@ionic/cli-utils : 1.4.0
Ionic CLI        : 3.4.0

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-ionic-angular : 1.3.1
Ionic Framework                 : ionic-angular 3.4.0

System:

Node       : v8.1.0
OS         : OS X El Capitan
Xcode      : Xcode 7.3.1 Build version 7D1014
ios-deploy : not installed
ios-sim    : not installed
npm        : 5.0.3

I’m assuming it has to do with the ios-deploy and ios-sim? How would I go about installing those?

Package.json contents:
{ "name": "blue-hill-mobile", "version": "0.0.1", "author": "Ionic Framework", "homepage": "http://bluehilldata.com", "private": true, "scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "lint": "ionic-app-scripts lint", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve" }, "dependencies": { "@angular/common": "4.1.3", "@angular/compiler": "4.1.3", "@angular/compiler-cli": "4.1.3", "@angular/core": "4.1.3", "@angular/forms": "4.1.3", "@angular/http": "4.1.3", "@angular/platform-browser": "4.1.3", "@angular/platform-browser-dynamic": "4.1.3", "@ionic-native/core": "3.10.2", "@ionic/storage": "2.0.1", "ionic-angular": "3.4.0", "ionicons": "3.0.0", "rxjs": "5.4.0", "sw-toolbox": "3.6.0", "zone.js": "0.8.12" }, "devDependencies": { "@ionic/app-scripts": "1.3.7", "@ionic/cli-plugin-cordova": "1.4.0", "@ionic/cli-plugin-ionic-angular": "1.3.1", "typescript": "2.3.3" }, "description": "An Ionic project" }

Ionic cordova plugin list:
> cordova plugin ls ✔ Running command - done! No plugins added. Use 'cordova plugin add <plugin>'.

8

Update: Installed ios-deploy & ios-sim, app still does not display in Ionic View but ionic info now returns:

local packages:
@ionic/app-scripts : 1.3.7
@ionic/cli-plugin-cordova : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms : none
Ionic Framework : ionic-angular 3.4.0

System:
Node : v8.1.0
OS : OS X El Capitan
Xcode : Xcode 7.3.1 Build version 7D1014
ios-deploy : 1.9.1
ios-sim : 6.0.0
npm : 5.0.3

9

No, those are only needed if you want to build locally for iOS via Cordova.

If you only want to build a progressive web app - then doesn’t it not matter if it doesn’t work in Ionic View?

10

then isn’t it whatever if it doesn’T work in Ionic View?

Not sure what you mean here.

I started a new Ionic project with the super template. It works fine on the Ionic View app which makes me think it’s something in the configuration of my app, not the environment. I’m currently going through my config files and comparing them to the super template’s.

11

<UPDATE>
I’ve pretty much determined that no typescript gets processed when using the Ionic View app, and the only content displayed is the pure HTML from the app.html file (hence why the ion-menu is there but not the items inside of it, since it populates with data from a JSON file). Currently looking for a solution as to why. Anyone know if the parameters in the app.component.ts constructor could have any impact on this? Mine are:

constructor(public platform: Platform, private http: Http, private translate: TranslateService, private config: Config) {

</UPDATE>