AOT compiler changing the order of imports

Versions

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.6.5
Node: 6.9.5
OS: win32 x64
Angular: 5.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.1.0
@angular/cli: 1.6.5
@angular/flex-layout: 2.0.0-beta.12
@angular/material: 5.1.0
@angular-devkit/build-optimizer: 0.0.41
@angular-devkit/core: 0.0.28
@angular-devkit/schematics: 0.0.51
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.5
@schematics/angular: 0.1.16
typescript: 2.4.2
webpack: 3.10.0

Repro steps

• Installs ng2-charts module and chart.js library:

npm install ng2-charts --save npm install chart.js --save

• Installs chart.piecelabel.js plugin for chart.js:

npm install chart.piecelabel.js --save

• Imports both libraries in app.modules.ts:

import {ChartsModule} from 'ng2-charts';
// ...
import 'chart.piecelabel.js';

chart.piecelabel.js is a chartjs plugin which overlays the labels on pie/donut charts.

• Develop with ng serve and see everything works as expected.
• Deploy with ng build --prod and see chart.piecelabel.js plugin not working anymore.

Observed behavior

As this is my first Angular project, my apology if it doesn’t qualify an issue report.

My investigation is that the behavior difference (working in dev but not in prod) is caused by a different default compilation strategy: --aot is default to be on when building for production (ng build --prod). When I tried developing with AOT on (ng serve --aot), the same problem is observed.

Note that there is no compilation error. For the prod (AOT) build, chart.piecelabel.js complains not being able to locate the Chart object to inject new behaviors in the console log. But the chart is working properly, just that no label overlay is shown. I think the best guess is that both chart.piecelabel.js and chartjs are loaded, but the loading order is incorrect - the AOT compiler did some tricks causing chart.piecelabel.js being loaded before the Chartjs plugin, and thus the problem.

So it sounds like an import order issue. For now I am inclined to think this is not an expected behavior, so I am reporting here. Again, sorry if this is a false alarm. Any advise or guidance would be greatly appreciated. Thank you!

[tamcy]

For what it’s worth, I was able to work around the issue by manually importing the chart.js library and console.log it before importing the chart.piecelabel.js plugin, as suggested by @filipesilva in https://github.com/angular/angular-cli/issues/9058#issuecomment-355021360.

import {ChartsModule} from 'ng2-charts';
import * as Chart from 'chart.js'; // NEW
console.log(Chart); // NEW
import 'chart.piecelabel.js';

[clydin]

@tamcy you may be able to simplify that to:

import {ChartsModule} from 'ng2-charts';
import 'chart.js'; // NEW
import 'chart.piecelabel.js';