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

🐞 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.
#4043 (comment)

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 - #14577 (comment)

[kumaresan-subramani]

HI @alan-agius4 ,

Due to this #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.