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:

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

Download below sample -
ivySample.zip
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

@alan-agius4

HI @alan-agius4 ,

Can you check this out?

@petebacondarwin

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.

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

@petebacondarwin

@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);

@alexzuza

@alexzuza It's known, see #30795

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.

@JoostK

HI @JoostK ,

Can we get any update regarding this?

@kumaresan-subramani

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

@petebacondarwin

HI @petebacondarwin , When should i expect this release?

@kumaresan-subramani

@kumaresan-subramani it's already on NPM

@kumaresan-subramani

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

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

I am getting this error

@PritiMaurya

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

I am getting this error

@PritiMaurya , can you explain in detail please

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

@JoostK

@JoostK ,

Any update on this issue?

@kumaresan-subramani

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

@kolkov

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

@kumaresan-subramani

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

@kolkov

@kolkov ,

Refer below issue this is cause of problem #31495

@kumaresan-subramani

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

Moving the discussion to #31495.

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

Navigation Menu

Repository navigation

Enable ivy in angular 8 - production build got failed #30818

🐞 Bug report

Command (mark with an `x`)

Is this a regression?

Description

🔬 Minimal Reproduction

🌍 Your Environment

Working fine angular 8 production build without ivy mode

23 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	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);

Enable ivy in angular 8 - production build got failed #30818

Description

🐞 Bug report

Command (mark with an x)

Is this a regression?

Description

🔬 Minimal Reproduction

🌍 Your Environment

Working fine angular 8 production build without ivy mode

Activity

kumaresan-subramani commented on Jun 1, 2019

alan-agius4 commented on Jun 3, 2019

petebacondarwin commented on Jun 3, 2019

alexzuza commented on Jun 3, 2019

JoostK commented on Jun 3, 2019

vgb1993 commented on Jun 6, 2019

kumaresan-subramani commented on Jun 14, 2019

petebacondarwin commented on Jun 28, 2019

kumaresan-subramani commented on Jul 1, 2019

JoostK commented on Jul 1, 2019

23 remaining items

JoostK commented on Nov 18, 2019

PritiMaurya commented on Nov 24, 2019

kumaresan-subramani commented on Nov 24, 2019

PritiMaurya commented on Nov 24, 2019

kumaresan-subramani commented on Dec 3, 2019

kolkov commented on Dec 3, 2019

kumaresan-subramani commented on Dec 3, 2019

kolkov commented on Dec 3, 2019

kumaresan-subramani commented on Dec 3, 2019

kolkov commented on Dec 3, 2019

petebacondarwin commented on Dec 9, 2019

angular-automatic-lock-bot commented on Jan 9, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Command (mark with an `x`)