Enable ivy in angular 8 - production build got failed

[kumaresan-subramani]

🐞 Bug report

Command (mark with an x)

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

Is this a regression?

Yes

Description

I have created an angular project with enabling ivy mode using below commands

ng new hello-ivy --enable-ivy

When I try to serve my application using below command

ng serve

it does not throw any compilation error but when I try to load this in browser [chrome] it throws below error:

When i try to take prod build using below command

ng build --prod

it throws below compilation error :

I don't know why this issue occurs

🔬 Minimal Reproduction

1. Download below sample -
   ivySample.zip

2. Give below command to install our third-party package

npm i @syncfusion/ej2-angular grids

Or Download this and place it inside node_modules folder

🌍 Your Environment

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


Angular CLI: 8.0.1
Node: 10.16.0
OS: win32 x64
Angular: 8.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.1
@angular-devkit/build-angular     0.800.1
@angular-devkit/build-optimizer   0.800.1
@angular-devkit/build-webpack     0.800.1
@angular-devkit/core              8.0.1
@angular-devkit/schematics        8.0.1
@angular/cli                      8.0.1
@ngtools/webpack                  8.0.1
@schematics/angular               8.0.1
@schematics/update                0.800.1
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

Anything else relevant?

Working fine angular 8 production build without ivy mode

[kumaresan-subramani]

HI @alan-agius4 ,

Can you check this out?

[alan-agius4]

This seems to be related to ngtsc, @petebacondarwin / @JoostK can you chime in?

I am seeing a different error though

ERROR in node_modules/@syncfusion/ej2-angular-grids/src/grid/grid-all.module.d.ts(27,22): error TS-996002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class

which typically means that ngcc was not run properly.

[petebacondarwin]

I notice that you are running Angular v8.0.1. This is not the correct version for trying out IVY. You should install the next version. E.g.

yarn add @angular/compiler-cli@next
...

[alexzuza]

@petebacondarwin

Just tried it with "@angular/compiler-cli": "next", which is 8.1.0-beta.0

Seems Esm5ReflectionHost looks for "decorators" static property of function declaration inside IIFE and will never find.

ej2-angular-grids.es5.js

var GridAllModule = /** @class */ (function () {
    function GridAllModule() { <========== at this level
    }
    return GridAllModule;
}());
GridAllModule.decorators = [ 
    { type: NgModule, args: [{...

From source code

angular/packages/compiler-cli/ngcc/src/host/esm5_host.ts

Lines 304 to 310 in 8154433

	protected getDecoratorsOfSymbol(symbol: ClassSymbol): Decorator[]|null {
	// The necessary info is on the inner function declaration (inside the ES5 class IIFE).
	const innerFunctionSymbol =
	this.getInnerFunctionSymbolFromClassDeclaration(symbol.valueDeclaration);
	if (!innerFunctionSymbol) return null;
	return super.getDecoratorsOfSymbol(innerFunctionSymbol);

[JoostK]

@alexzuza It's known, see #30795

[vgb1993]

What's the status of this? I get the same error:

ERROR in Unexpected value 'PostService in C:/myAngularApp/src/app/service/posts.
component.ts' declared by the module 'AppModule in C:/myAngularApp/src/app/app.m
odule.ts'. Please add a @Pipe/@Directive/@component annotation.

[kumaresan-subramani]

HI @JoostK ,

Can we get any update regarding this?

[petebacondarwin]

This should be fixed in v8.1.0-rc.0 - @kumaresan-subramani can you check?

[kumaresan-subramani]

HI @petebacondarwin , When should i expect this release?

[JoostK]

@kumaresan-subramani it's already on NPM

[JoostK]

@kumaresan-subramani Please update everything Angular related: all @angular packages together with @angular/angular-cli and also @angular-devkit

[kumaresan-subramani]

HI @JoostK ,

Still application not working in Angular IVY mode but working fine in normal mode.

Repo steps

1. sample -

sample.zip

2. Give below commands

npm i

npm i @syncfusion/ej2-angular-grids

3. Then give - "ng serve"

You will see below error:

[petebacondarwin]

The error is in the IVY compiler template type checker... It looks, from first glance, like the compiler is not recognizing the <esj-grid> tag as a component that has an input called dataSource.

I think this is because the ej2 components use a dynamic mixin approach to creating their components and this component doesn't statically declare dataSource as a property on the GridComponent class. See https://github.com/syncfusion/ej2-angular-ui-components/blob/2b12b0202728b6e634cb1c8adb9650b2843fdbd0/components/grids/src/grid/grid.component.ts

[petebacondarwin]

It would be interesting to see if this project can be compiled using the ngtsc compiler from source which could show that the problem is in the ngcc compiler.

[kumaresan-subramani]

HI @petebacondarwin ,

We haven't use dynamic mixin approach to create our component.

[petebacondarwin]

We haven't use dynamic mixin approach to create our component.

By dynamic mixin approach I am referring to this line of code:

@ComponentMixins([ComponentBase])

I accept that this might be a red herring in this case as the problem is more likely caused by the component not having the relevant input declared as a typed property on the class.

But it is likely to have an impact in the compiler knowing whether relevant lifecycle methods are available on the component.

[kumaresan-subramani]

HI @alxhub ,

Any update on this query?

Is this workaround for this since you fix this issue

#30114 (comment)

[kumaresan-subramani]

@alxhub ,

I am facing reported issue since angular-cli version 8.1.0-next. can I get any update regarding this issue?

[kumaresan-subramani]

Hi @alan-agius4 ,

Can you update on this? still, i am facing this error

[JoostK]

@kumaresan-subramani the issue with the type checker has not been resolved yet, as it's quite tricky to deal with properly. We are working on implementing additional "strict*" flags so that the type checking can be less strict for the time being, which we hope to land within the coming two weeks.

[kumaresan-subramani]

@JoostK , thanks

[kumaresan-subramani]

@JoostK ,

I am facing the same issue in latest version 8.3.12 while using command ng serve in IVY mode.

Working fine in normal mode

I thought issue occurs due to Ivy compilation. please refer below image:

While it goes refreshChildComponets ,ethod there is ejs-grid component but datasource property has not been included.

In detail - >

First it takes component property from app.compnent.ts file

After that, it goes ɵɵproperty() to update component property:

Here, the property [datasource] has not been updated correctly so that when it goes to elementPropertyInternal() method, it throws an error.

So that it throws error, due to validateAgainstUnknownProperties() method:

Error screenshot

HERE I HAVE ATTACHED SAMPLE FOR YOU REFERENCE:

ivy-8.3.12.zip

[kumaresan-subramani]

@JoostK || @alan-agius4 ,

at least, please provide a workaround for this.

[JoostK]

@kumaresan-subramani I have a feeling there's an issue with compiling the library that has ejs-grid using ngcc, which results in the ejs-grid element not representing a component. You are using Ivy in v8.x, which has not received relevant Ivy fixes for a very long time, so I would request you try Ivy with the latest 9.x next release.

[kumaresan-subramani]

@JoostK ,

In the latest v9.0.0-next.12 angular/CLI version, it won't throw any console and compilation error while using below command

ng serve

And control also not get rendered, refer below image:

[kumaresan-subramani]

Hi @JoostK ,

Is below relate to this issue:

#33131

And I am facing same issue in latest version which got released 23rd

[JoostK]

@syncfusion/ej2-ng-grids is not bootstrapping as its lifecycle methods are provided by a mixin mechanism that are not visible to the Ivy runtime, as they are bound too late. Related issue: #31495

[kumaresan-subramani]

@JoostK , This is deprecated package. Try @syncfusion/ej2-angular-grid, which is bootraped properly. And i have used ng-packagr to generate ej2-angular-grid package.

Our latest packages - https://github.com/syncfusion/ej2-angular-ui-components/blob/master/components/grids/src/grid/grid.component.ts#L29

[JoostK]

@kumaresan-subramani Ah, I'm super confused by all this, but it appears I did test @syncfusion/ej2-angular-grid and it's basically failing because of the same reason: the @ComponentMixins([ComponentBase]) is applied after the Ivy runtime has captured the component's details, so the overridden lifecycle hooks are never called.

[PritiMaurya]

ERROR in Failed to find exported name of node (class BsDatepickerDayDecoratorComponent {
})

I am getting this error

[kumaresan-subramani]

ERROR in Failed to find exported name of node (class BsDatepickerDayDecoratorComponent {
})

I am getting this error

@PritiMaurya , can you explain in detail please

[PritiMaurya]

my project is in angular 8 i want enable Ivy in my project but after enable that I am getting error in ngx bootstrap

[kumaresan-subramani]

@JoostK ,

Any update on this issue?

[kolkov]

@kumaresan-subramani try 9.0.0-rc.4, maybe this fixed in next versions.

[kumaresan-subramani]

@kolkov , i have already tried but same issue occurs.

[kolkov]

@kumaresan-subramani I use 9.0.0 beats and rcs versions for a long time, it's works as expected.

[kumaresan-subramani]

@kolkov ,

Refer below issue this is cause of problem #31495

[kolkov]

@kumaresan-subramani I think we need to fix all external packages that caused this issue.

[petebacondarwin]

Moving the discussion to #31495.

[angular-automatic-lock-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.}