JS Optimization breaks the application, Dev mode works fine

Ionic Framework ionic-v3
#1

Description of the problem is an extract from the github issue created here

Short description of the problem:

Unable to use a 3rd party lib json2typescript in production mode ionic build --prod. When running the application in Dev mode it works fine (No issues with ionic serve)

What behavior are you expecting?

I should be able to use this 3rd party library json2typescript in production mode to take benefit of all the optimizations.

Steps to reproduce:

  1. Upon digging further I have found that the issue is with --optimizejs part of build.
  2. I am able to successfully run a sample blank ionic application which consumes the lib json2typescript using this build option
    ionic build --aot --minifyjs --minifycss
  3. As soon as I add --optimizejs option it fails when the application loads
    ionic build --aot --minifyjs --minifycss --optimizejs
  4. Here is the sample repo for the blank ionic application
    https://github.com/savanvadalia/IonicJson2TypescriptError
  5. Please download the repo and execute the app in dev and production mode to see the error
  6. All the code which consumes the 3rd party lib is in the home.ts

Which @ionic/app-scripts version are you using?

cli packages: (C:\Users\Laptop-Savan\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

local packages:

    @ionic/app-scripts : 2.1.3
    Ionic Framework    : ionic-angular 3.6.0

System:

    Node : v6.9.1
    npm  : 3.10.8
    OS   : Windows 10
#2

If you don’t get any better answers, I would ditch this library. IMHO it is a solution in search of a problem, and you will be better off simply using interfaces instead of classes, which require absolutely zero work or gnarly external libraries to animate from JSON.

#3

Thanks for you reply, I would be happy if I can find a solution without using any 3rd Party lib.

If a Web Api is returning JSON which has 20 properties and I use only 5 properties in my app, I think it make sense to create model a class and map stuff which I need for the app to keep things clean and eliminate the mundane property mapping job.

I am not sure how interfaces are going to solve this problem.
Did you mean to say using interfaces will automatically map the properties I have defined in my interface?

Do you have any example?

#4

If I’m understanding you correctly, yes. If your backend gives you a JSON object that looks like this:

[{
  "name": "Joe Blow",
  "age": "26"
}]

…and you have an interface that looks like this:

export interface Dude {
  name: string;
  age: number;
}

…and a service provider that does something like this:

allDudes(): Observable<Dude[]> {
  return this.http.get(url).map(rsp => rsp.json());
}

…then in my experience, everything just works. Remember, TypeScript is a fiction that only exists at compile time. You get all the type-checking benefits that are reasonably possible with this strategy, and are guided towards what I firmly believe is a good design paradigm.

Anything not defined in the interface will be blissfully ignored. You can use the ?: syntax for optional properties that may or may not be present.

2 Likes