Support AoT compilation

[jensstruemper]

Chartist working great now. However I finally wanted to migrate my code to the latest Ionic 2 RC1 (angular 2 final) and immediately bumped into a problem.

MacBook-Pro:~/Development/Ionic/ble_reflow_rc1$ ionic run android

Running 'run:before' npm script before run

> ionic-hello-world@ build /Users/jens/Development/Ionic/ble_reflow_rc1
> ionic-app-scripts build --dev

[14:33:55]  ionic-app-scripts 0.0.36 
[14:33:55]  build dev started ... 
[14:33:55]  clean started ... 
[14:33:55]  clean finished in 3 ms 
[14:33:55]  copy started ... 
[14:33:55]  transpile started ... 
[14:33:55]  lint started ... 
[14:33:57]  lint finished in 1.45 s 
[14:33:59]  transpile finished in 3.51 s 
[14:33:59]  bundle started ... 
[14:33:59]  copy finished in 3.56 s 
[14:34:05]  bundle failed: 'ChartistModule' is not exported by node_modules/angular2-chartist/dist/angular2-chartist.js 
            (imported by src/app/app.module.ts). For help fixing this error see https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module 
[14:34:05]  ionic-app-script task: "build" 
[14:34:05]  Error: 'ChartistModule' is not exported by node_modules/angular2-chartist/dist/angular2-chartist.js 
            (imported by src/app/app.module.ts). For help fixing this error see https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module 

Not sure but it might be related to the module bundler ionic is using in context with AoT compiler Link. However if I use the --dev argument the JiT compiler should be used and the issue is supposed to go away for the price of a larger and slower app - but it doesn't. Some people suggest that external modules need to be made compliant for AoT....that's why I am raising it here again.

My app.modules.ts:

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { Main } from '../pages/main/main';
import { Scan } from '../pages/scan/scan';
import { BleComms } from '../providers/blecomms';
import { ChartistModule } from 'angular2-chartist';
import { Chart } from '../pages/main/chart';

@NgModule({
  declarations: [
    Main,
    Scan,
    Chart, 
  ],
  imports: [
    ChartistModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    Main,
    Scan,
  ],
  providers: [BleComms]
})
export class AppModule {}

Any idea?

[willsoto]

What version of angular2-chartist are you on?

[jensstruemper]

[email protected]

[willsoto]

This is basically #48. As of now, I am not sure how to fix it.

If you can point me to a module that works correctly, I can see what I am missing. Otherwise, I am not sure what I can do right now.

[jensstruemper]

Ah, sorry, I didn't look at the closed issues. Yes, that's the problem. Not sure if it is of any help but danbuchholz shares are list of working and non working libraries on his github. 3rd party libs mega test

[victorcarvalhosp]

Maybe this could help:

gevgeny/angular2-highcharts#75

[victorcarvalhosp]

"every core angular package has an index.metadata.json file which is utilized by ngc during compilation.

If you reference to this issue angular/angular#11262

They say that these metadata files are auto-generated by ngc.
So if you try to compile this library with ngc, I believe the metadata file will be autogenerated."

Maybe this comment above can help...

[jensstruemper]

I gave it a try on local copy of the module using the following tsconfig.json.

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },

  "files": [
    "src/chartist.component.ts"
  ],

  "angularCompilerOptions": {
   "genDir": "aot",
   "skipMetadataEmit" : false
 }
}

Compile is successfull, aot directory created including the *.ngfactory.ts but no metadata.json. I guess we need to wait until Will has time to look into this.

[victorcarvalhosp]

@Paradox41 any news on this?

[willsoto]

Same as #48. I was unable to reproduce with a project of my own, the ngModule is being exported correctly. Until I can repro locally, not much I can do

[victorcarvalhosp]

start a new ionic2 project and you will can reproduce this error

[willsoto]

I did that. Brand new, from scratch, no errors.

[victorcarvalhosp]

What are the steps?

You just start a new ionic2 project with RC2, and did a:

npm install angular2-chartist chartist --save

after:
npm install @types/chartist --save-dev

and import as a module:

import {
  ChartistModule
} from 'angular2-chartist';

import {
  NgModule
} from '@angular/core';

import {
  ChartistModule
} from 'angular2-chartist';

import {
  MyAppComponent
} from './my-app';

@NgModule({
  imports: [
    ChartistModule,
  ],
  bootstrap: [MyAppComponent]
})
export class AppModule { }

only this? Any step more to work with ionic2?

[willsoto]

Literally copy and pasting from the docs and I get 0 errors. I even get type completion.

[victorcarvalhosp]

with ionic serve work's here too. The problem is when you run with' ionic run android or ionic build android

[willsoto]

I get a different error in that case:

cutePuppyPics → ionic run android

Running 'run:before' npm script before run

> ionic-hello-world@ build /Users/will/Projects/cutePuppyPics
> ionic-app-scripts build

[11:02:40]  ionic-app-scripts 0.0.39
[11:02:40]  build prod started ...
[11:02:40]  clean started ...
[11:02:40]  clean finished in 4 ms
[11:02:40]  copy started ...
[11:02:40]  ngc started ...
[11:02:40]  copy finished in 34 ms
[11:02:40]  lint started ...
[11:02:41]  lint finished in 881 ms
[11:02:41]  Error: Unexpected value 'ChartistModule' imported by the module 'AppModule'
[11:02:41]  ngc failed
[11:02:41]  ionic-app-script task: "build"
[11:02:41]  Error: Error

Even then, that doesn't seem like a bug here, that seems like a bug with ionic run android.

[victorcarvalhosp]

I have the exact same error as you

[willsoto]

I was just going by the title of the thread. I would raise this with ionic if I were you.

[victorcarvalhosp]

I think you need to change something in you lib structure to work with AoT Compilation... I don't know
what yet

"Dan from Ionic here. We're going to provide some instructions to Angular library creators (and really any library creators) on how to distribute their dist directory with commonjs modules AND es2015 modules and link them up in the package.json using the main and module fields.

Once this library follows the Angular convention, everything will just work.

Expect that in the coming week or so.

Thanks,
Dan"

[willsoto]

Until that happens, nothing I can really do. I can make an update once those guidelines are released.

[jensstruemper]

Actually I don't think this is an Ionic specific issue but rather a generic Angular 2 one. I assume the current angular2-chartist module won't work in a pure Angular 2 AoT setup either. As far as I understand it would require changes to the angular2-chartist webpack configuration so it uses ngc to create the required .metadata.json. I tried to follow the examples given on webpack github but wasn't really able to incorporate the necessary changes. webpack/webpack#2918

[willsoto]

Thanks for the link @jensstruemper. I will take a look.

[jensstruemper]

Seems that similar issues popping up in many other angular libraries since arrival of AoT. One blog post is mentioned in many conversations: angular-2-library-ready-for-aot

[jensstruemper]

While trying to fix this locally I stumbled over highcharts angular 2 wrapper which already fixed their AoT issues. Bigous/ng2-highcharts@ca85d35
I tried to apply their changes but with not much luck. Anyways might be helpful as the starting position seems to be similar.

[edemirkan]

Hi All,
Any update regarding this? I am unable build my app with --aot. --dev works fine though as it uses JIT but unfortunateley adds 10-15 seconds on startup. ionic-team/ionic-framework#9686

npm run ionic:build --aot

[05:40:35]  build prod failed: Unexpected value 'ChartistModule' imported by the module 'AppModule' 
[05:40:35]  ionic-app-script task: "build" 
[05:40:35]  Error: Unexpected value 'ChartistModule' imported by the module 'AppModule' 

[willsoto]

@demirk4n been really busy lately, so I haven't had a chance to really dig in. I'll try and make some time this week or next. PRs are always welcome of course.

[edemirkan]

@Paradox41 Thank you for your time.
Yesterday I worked on this and managed to compile to the code with ngc. Compilation completed without any apparent issues with *.metadata.json files in place but unfortunately didn't work. They were generated with the following errors, which I couldn't find any reference on internet.

[{"__symbolic":"module","version":3,"metadata":{"ChartistComponent":{"__symbolic":"error","message":"Reference to a local symbol","line":36,"character":13,"context":{"name":"ChartistComponent"}}}},{"__symbolic":"module","version":1,"metadata":{"ChartistComponent":{"__symbolic":"error","message":"Reference to a local symbol","line":36,"character":13,"context":{"name":"ChartistComponent"}}}}]

I believe the issue revolves around the usage of
import * as Chartist from 'chartist';
which might not be supported any more.

[willsoto]

@demirk4n you mind opening a PR with that work in progress?

[edemirkan]

Sure, I hope it helps somehow.

[willsoto]

Note to self: https://github.com/blacksonic/angular2-aot-webpack/tree/v4

[A-Industry]

Any progress on this issue? I am also running into this. --dev works fine. When trying to do a ionic build with AoT I get this error:
build prod failed: Unexpected value 'ChartistModule' imported by the module 'AppModule'
ionic-app-script task: "build"
Error: Unexpected value 'ChartistModule' imported by the module 'AppModule'
Error: Unexpected value 'ChartistModule' imported by the module 'AppModule'

[willsoto]

Still no progress on this. Just haven't had a chance. I'll try and take a look this week (as always, PRs welcome). Someone started something in #77 but hit a wall I think...might be worth taking a look.

[willsoto]

I just released 0.12.0 with an initial attempt at fixing this. Can anyone let me know if it works?

[jensstruemper]

just gave it a try by upgrading to latest Ionic 2.0.1 and angular-chartist-0.12.0 including most recent typings. No changes to source code. It won't compile: Cannot find name 'ChartType'. If I go back the the last angular-chartist version I was using (0.10.1) it is working again. - of course in JiT / DEV mode only. Excerpt of package.json for reference:

"dependencies": { "@angular/common": "2.2.1", "@angular/compiler": "2.2.1", "@angular/compiler-cli": "2.2.1", "@angular/core": "2.2.1", "@angular/forms": "2.2.1", "@angular/http": "2.2.1", "@angular/platform-browser": "2.2.1", "@angular/platform-browser-dynamic": "2.2.1", "@angular/platform-server": "2.2.1", "@ionic/storage": "1.1.7", "ionic-angular": "^2.0.1", "ionic-native": "2.2.11", "ionicons": "3.0.0", "rxjs": "5.0.0-beta.12", "sw-toolbox": "3.4.0", "zone.js": "0.6.26" }, "devDependencies": { "@ionic/app-scripts": "1.0.0", "@types/chartist": "^0.9.34", "angular2-chartist": "^0.12.0", "chartist": "^0.10.1", "typescript": "^2.0.9" },

[A-Industry]

Hi, I sort of fixed this myself by copying chartist.component.ts into my project and directly importing it into the app.module.

I had to change class ChartistComponent to export class ChartistComponent and remove all the exports at the bottom of the file. I believe the whole problem with the AoT compiler is in this construction:
export {
ChartistComponent,
ChartistModule
};

// for angular-cli
export default {
directives: [ChartistComponent]
};

This is probably fixed in Angular 2.4.0: angular/angular#13473
But it might take some time for the Ionic team to catch up with the latest version of Angular2.

[willsoto]

@jensstruemper @bswg Typings were no longer being generated with @ngtools/webpack. Could you try again with 0.12.1?

[jensstruemper]

definitely some change - the ionic build process passes but I get a white screen of death:

main.js:33203 Uncaught Error: Unexpected value 'ChartistModule' imported by the module 'AppModule'

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { Main } from '../pages/main/main';
import { Scan } from '../pages/scan/scan';
import { BleComms } from '../providers/blecomms';
import { bleData } from '../providers/bleData';
import { ChartistModule } from 'angular2-chartist';
import { ReflowChart } from '../pages/main/reflow-chart.component';

@NgModule({
  declarations: [
    MyApp,
    Main,
    Scan,
    ReflowChart 
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    ChartistModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Main,
    Scan,
    ReflowChart
  ],
  providers: [BleComms, bleData, {provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

[willsoto]

Track #94 for updates please