angular: Enable ivy in angular 8 - production build got failed

šŸž 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:

Screenshot (259)

When i try to take prod build using below command

ng build --prod

it throws below compilation error :

Screenshot (260)

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

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 40 (15 by maintainers)

Most upvoted comments

@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.

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

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

@alexzuza Itā€™s known, see #30795

@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 Please update everything Angular related: all @angular packages together with @angular/angular-cli and also @angular-devkit

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
...

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

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

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

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

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

I am getting this error

@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.

HI @alxhub ,

Any update on this query?

Is this workaround for this since you fix this issue

https://github.com/angular/angular/issues/30114#issuecomment-509016276

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.

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.

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.

@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

https://github.com/angular/angular/blob/815443313044e0ec0ec87af588d09eda6b88f0c8/packages/compiler-cli/ngcc/src/host/esm5_host.ts#L304-L310

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.