New build system - support AOT

[sebholstein]

WORK IN PROGRESS

TODO list ✍🏽:

• Linting via node binary
• Remove gulp and use NPM scripts
• Use the ngc for compiling
• Add yarn lockfile/support
• Copy TS files into dist folder
• Tests via Webpack + Karma
• Move spec files in src folder
• Use yarn in TravisCI builds
• AOT build with angular-cli
• AOT build with Ionic 2 (To fix this bug from Ionic 2: http://stevemichelotti.com/integrate-angular-2-google-maps-into-ionic-2/ )

[sebholstein]

Related to #629

[elekzalan]

Hello, any news here? I saw that you already had a good progress on this feature. Keep up the good work!

[sebholstein]

@elekzalan thanks! I have some problems with Webpack/Karma right now. I always get errors like this:

Error: Can't resolve all parameters for SebmGoogleMapPolyline: (?)

When that is solved, it's nearly done.

[sebholstein]

I don't know why the Unit tests fail with webpack. (The dependencies are mocked but are undefined when the constructor gets called). If anyone has an idea why this happens - help is really appreciated.

TypeError: Cannot read property 'createPolyline' of undefined
          at PolylineManager.addPolyline (webpack:///src/core/services/managers/polyline-manager.ts:24:48 <- karma-test-shim.js:54212:11437)

Steps to reproduce:

1. Checkout this branch
2. run yarn
3. run npm run ci

[sebholstein]

Problem solved, emitDecoratorMetadata was missing

[sebholstein]

So now everything looks fine:

• AOT build for angular CLI works
• Ionic 2 Bug fixed (http://stevemichelotti.com/integrate-angular-2-google-maps-into-ionic-2/)
• Server Side Rendering should work also (angular-universal support #668)

[TaiPhamD]

Update - If I recompile without declaring any markers, google map info, google map poly line in my html then it compiles successfully but that makes it not very useful :)

When doing AOT build on my own project using this branch i get these errors :(Without AOT the build works fine)
ERROR in [default] XXXXXXXXX/node_modules/angular2-google-maps/core/directives/google-map-marker.ngfactory.ts:101:19
Property 'fitBounds' does not exist on type 'SebmGoogleMapMarker'.

Then in my class I am getting these errors.
Property '_infoWindow' is private and only accessible within class 'SebmGoogleMapMarker'
Property '_points' is private and only accessible within class 'SebmGoogleMapPolyline'.

                        <sebm-google-map-info-window [disableAutoPan]="true">
                          <strong>Deveui: </strong>{{device.Deveui}}<br>
                          <strong>GPS: </strong>({{device.Lat}}, {{device.Long}})<br>
                          <strong>Time: </strong>{{device.Timestamp | date:"MM/dd/yy hh:mm:ss a" }}<br>
                          <strong>Rssi: </strong>{{device.Rssi}}<br>
                          <strong>Snr: </strong>{{device.Snr}}<br>
                          <button md-raised-button color="primary" (click)="showHistory(i)">{{device.showall? 'Hide history':'Show history'}}</button>
                        </sebm-google-map-info-window>
                        <sebm-google-map-polyline geodesic="true" strokeColor="green" *ngIf="device.showall">
                          <sebm-google-map-polyline-point *ngFor="let loc of device.Historicals"[latitude]="loc.Lat" [longitude]="loc.Long">
                          </sebm-google-map-polyline-point>
                        </sebm-google-map-polyline>

[sebholstein]

@rushstrike you are right - but I'm wondering why the ngc doesn't complain when I compile the whole project. Do you have an idea?

[TaiPhamD]

One important point in using aot is this "Inputs, Outputs, View or Content Child(ren), Hostbindings, and any field you use from the template or annotate for Angular should be public". I'll have a closer look at the actual code tomorrow but I would the guidelines below as a start when reviewing the code.

This is copied from the aot guide from:https://github.com/qdouble/angular-webpack2-starter/blob/master/README.md

"The following are some things that will make AOT compile fail.

Don’t use require statements for your templates or styles, use styleUrls and templateUrls, the angular2-template-loader plugin will change it to require at build time.
Don’t use default exports.
Don’t use form.controls.controlName, use form.get(‘controlName’)
Don’t use control.errors?.someError, use control.hasError(‘someError’)
Don’t use functions in your providers, routes or declarations, export a function and then reference that function name
Inputs, Outputs, View or Content Child(ren), Hostbindings, and any field you use from the template or annotate for Angular should be public"

[sebholstein]

@rushstrike thx for the detailed explanation.

Inputs, Outputs, View or Content Child(ren), Hostbindings, and any field you use from the template or annotate for Angular should be public

This is the broken rule but I'm wondering why the ngc doesnt complain at build time.

[PickRelated]

@SebastianM thanks for your great work! You are sort of helping me release to production!

So any updates on this?

[sebholstein]

@elekzalan I will release a new version today (because there are so many people asking for it)

[PickRelated]

@SebastianM you are the best! Thank you so much for your work!