Angular-cli: Using services in providers, Build got failed while using 'ng build ---aot'

[KumaresanDevi]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [x] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

yes

Description

I have set "target": "es6", when i try to serve my application using below command

ng serve ---aot

It throws below error:

If i change target to "es2015" and try to run using below commands

ng serve --prod

ng serve --aot

it throws a same error.

Working fine

When using "ng serve" with target es2015 and es6

And all commands are working fine with target as es5

🔬 Minimal Reproduction

1. Download sample- issueSample.zip

2. Run "npm i"

3. The give anyone command from below list:

• ng serve --aot
• ng build --aot
• ng serve --prod
• ng build --prod

🔥 Exception or Error

🌍 Your Environment

"@angular-devkit/build-angular": "^0.800.2",
"@angular-devkit/build-optimizer": "^0.800.2",
"@angular/cli": "~8.0.0",
"@angular/compiler-cli": "~8.0.0",

Anything else relevant?

Reported issue occurs only when i use services in providers like below:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { GridModule } from '@syncfusion/ej2-angular-grids';
// have to below service
import { PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 GridModule
 ],
 providers: [PageService,
 SortService,
 FilterService,
 GroupService],
 bootstrap: [AppComponent]
})
export class AppModule { }

When i add service like below it doesn't throws error even service also not get injected.
https://github.com/angular/angular-cli/issues/4043#issuecomment-283055330

i have used above reference like below:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
const providers = [];
providers.push({ PageService });
providers.push({ SortService });
providers.push({ FilterService });
providers.push({ GroupService });
@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 GridModule
 ],
 providers: [providers],
 bootstrap: [AppComponent]
})
export class AppModule { }

It wont throw error and also my service not injected.

[alan-agius4]

@kumaresan-subramani, can you please provide a link with the most possible code to get that error?

Thanks.

[kumaresan-subramani]

Hi @alan-agius4 ,

Repo steps

Please find issue reproducing steps here:

Step1: download sample -
issueSample.zip

step2: Run below commands:

npm i

ng serve --prod

You will see an error,When you set"target" to "es5" it works fine.

I think, class expression got tree-shaken away

Old Issue - https://github.com/angular/angular-cli/issues/14577#issue-450183303

[kumaresan-subramani]

HI @alan-agius4 ,

Due to this https://github.com/angular/angular-cli/issues/14577,

Description

TypeScript ClassExpression are not being treeshaken away.

Example codes:

let ChipList = class ChipList extends Component {
  constructor(options, element) {
        super(options, element);
    }
};
__decorate$4([
    Property([])
], ChipList.prototype, "chips", void 0);
ChipList = __decorate$4([
    NotifyPropertyChanges
], ChipList);

Anything else relevant?

14263

you have added this fix . i think this causes issue now.

Thanks in advance

[alan-agius4]

I think I found the problem, I will land a PR soon.

[kumaresan-subramani]

Hi @alan-agius4 ,

Could you please update when the fix will be moved to npm, which will helpful for me to proceed further.

Please add release notes, if you have made any major changes related to tree-shaking which will be helpful for me to work at my end.

[clydin]

Release notes are located here: https://github.com/angular/angular-cli/releases

[kumaresan-subramani]

Thanks @clydin ,

https://github.com/angular/angular-cli/releases/tag/v8.2.2

https://github.com/angular/angular-cli/pull/15303

https://github.com/angular/angular-cli/issues/15301

[kumaresan-subramani]

@alan-agius4 ,

is this fix got published?. if yes, please tell me @angular-devkit/build-optimizer version.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}