Ivyenable compilation issues in angular 9 #38577

gnbabu · 2020-08-25T15:41:31Z

🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑

Please help us process issues more efficiently by filing an
issue using one of the following templates:

https://github.com/angular/angular/issues/new/choose

Thank you!

🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑

Getting the compilation errors after upgrading from angular 7 to angular 9 and enabled Ivy option.
When i set below configuration in ts-config its compiling

"angularCompilerOptions": {
       "enableIvy": false,
       "preserveWhitespaces": true
   }

Angular CLI: 9.1.11
Node: 12.16.1
OS: win32 x64

Angular: 9.1.12
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, upgrade
Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.901.11
@angular-devkit/build-angular 0.901.11
@angular-devkit/build-optimizer 0.901.11
@angular-devkit/build-webpack 0.901.11
@angular-devkit/core 9.1.11
@angular-devkit/schematics 9.1.11
@angular/cli 9.1.11
@angular/http 7.2.11
@ngtools/webpack 7.3.9
@schematics/angular 9.1.11
@schematics/update 0.901.11
rxjs 6.6.0
typescript 3.8.3
webpack 4.44.1

Failed to compile.

node_modules/@angular/platform-browser/platform-browser.d.ts:44:22 - error NG6002: Appears in the NgModule.imports of SharedModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/platform-browser) which declares BrowserModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

44 export declare class BrowserModule {
                        ~~~~~~~~~~~~~
node_modules/@angular/forms/forms.d.ts:2574:22 - error NG6002: Appears in the NgModule.imports of SharedModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/forms) which declares FormsModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

2574 export declare class FormsModule {
                          ~~~~~~~~~~~
node_modules/@angular/forms/forms.d.ts:2574:22 - error NG6002: Appears in the NgModule.imports of WorkPermitsModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/forms) which declares FormsModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

2574 export declare class FormsModule {
                          ~~~~~~~~~~~
node_modules/@angular/common/common.d.ts:115:22 - error NG6002: Appears in the NgModule.imports of WorkPermitsModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/common) which declares CommonModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

115 export declare class CommonModule {
                         ~~~~~~~~~~~~
src/shared/shared.module.ts:192:14 - error NG6002: Appears in the NgModule.imports of WorkPermitsModule, but itself has errors

192 export class SharedModule {
                 ~~~~~~~~~~~~
src/work-permits/work-permits.routing.module.ts:77:14 - error NG6002: Appears in the NgModule.imports of WorkPermitsModule, but could not be resolved to an NgModule class.

Is it missing an @NgModule annotation?

77 export class WorkPermitsRoutingModule {}
                ~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/ng2-pdf-viewer/src/app/pdf-viewer/pdf-viewer.module.d.ts:6:22 - error NG6002: Appears in the NgModule.imports of WorkPermitsModule, but could not be resolved to an NgModule class.

This likely means that the library (ng2-pdf-viewer) which declares PdfViewerModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

6 export declare class PdfViewerModule {
                       ~~~~~~~~~~~~~~~
node_modules/@uirouter/angular-hybrid/angular-hybrid.d.ts:94:53 - error NG6005: UIRouterUpgradeModule.forChild returns a ModuleWithProviders type without a generic type argument. Please add a generic type argument to the ModuleWithProviders type. If this occurrence is in library code you don't control, please contact the library authors.

94     static forChild(module?: NgHybridStatesModule): ModuleWithProviders;
                                                       ~~~~~~~~~~~~~~~~~~~
node_modules/@uirouter/angular-hybrid/angular-hybrid.d.ts:94:53 - error NG6005: UIRouterUpgradeModule.forChild returns a ModuleWithProviders type without a generic type argument. Please add a generic type argument to the ModuleWithProviders type. If this occurrence is in library code you don't control, please contact the library authors.

94     static forChild(module?: NgHybridStatesModule): ModuleWithProviders;
                                                       ~~~~~~~~~~~~~~~~~~~
node_modules/@uirouter/angular-hybrid/angular-hybrid.d.ts:94:53 - error NG6005: UIRouterUpgradeModule.forChild returns a ModuleWithProviders type without a generic type argument. Please add a generic type argument to the ModuleWithProviders type. If this occurrence is in library code you don't control, please contact the library authors.

94     static forChild(module?: NgHybridStatesModule): ModuleWithProviders;
                                                       ~~~~~~~~~~~~~~~~~~~
node_modules/@angular/forms/forms.d.ts:2574:22 - error NG6002: Appears in the NgModule.imports of LessonsLearnedModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/forms) which declares FormsModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

2574 export declare class FormsModule {
                          ~~~~~~~~~~~
node_modules/@angular/common/common.d.ts:115:22 - error NG6002: Appears in the NgModule.imports of LessonsLearnedModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/common) which declares CommonModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

115 export declare class CommonModule {
                         ~~~~~~~~~~~~
src/shared/shared.module.ts:192:14 - error NG6002: Appears in the NgModule.imports of LessonsLearnedModule, but itself has errors

192 export class SharedModule {
                 ~~~~~~~~~~~~
src/lessons-learned/lessons-learned.routing.module.ts:41:14 - error NG6002: Appears in the NgModule.imports of LessonsLearnedModule, but could not be resolved to an NgModule class.

Is it missing an @NgModule annotation?

41 export class LessonsLearnedRoutingModule {}
                ~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@uirouter/angular-hybrid/angular-hybrid.d.ts:94:53 - error NG6005: UIRouterUpgradeModule.forChild returns a ModuleWithProviders type without a generic type argument. Please add a generic type argument to the ModuleWithProviders type. If this occurrence is in library code you don't control, please contact the library authors.

94     static forChild(module?: NgHybridStatesModule): ModuleWithProviders;
                                                       ~~~~~~~~~~~~~~~~~~~
node_modules/@angular/forms/forms.d.ts:2574:22 - error NG6002: Appears in the NgModule.imports of WorkOrdersModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/forms) which declares FormsModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

2574 export declare class FormsModule {
                          ~~~~~~~~~~~
node_modules/@angular/common/common.d.ts:115:22 - error NG6002: Appears in the NgModule.imports of WorkOrdersModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/common) which declares CommonModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

115 export declare class CommonModule {
                         ~~~~~~~~~~~~
src/shared/shared.module.ts:192:14 - error NG6002: Appears in the NgModule.imports of WorkOrdersModule, but itself has errors

192 export class SharedModule {
                 ~~~~~~~~~~~~
src/work-orders/work-orders.routing.module.ts:63:14 - error NG6002: Appears in the NgModule.imports of WorkOrdersModule, but could not be resolved to an NgModule class.

Is it missing an @NgModule annotation?

63 export class WorkOrdersRoutingModule {}
                ~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@uirouter/angular-hybrid/angular-hybrid.d.ts:94:53 - error NG6005: UIRouterUpgradeModule.forChild returns a ModuleWithProviders type without a generic type argument. Please add a generic type argument to the ModuleWithProviders type. If this occurrence is in library code you don't control, please contact the library authors.

94     static forChild(module?: NgHybridStatesModule): ModuleWithProviders;
                                                       ~~~~~~~~~~~~~~~~~~~
node_modules/@angular/forms/forms.d.ts:2574:22 - error NG6002: Appears in the NgModule.imports of CustomerFormsModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/forms) which declares FormsModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

2574 export declare class FormsModule {
                          ~~~~~~~~~~~
node_modules/@angular/common/common.d.ts:115:22 - error NG6002: Appears in the NgModule.imports of CustomerFormsModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/common) which declares CommonModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

115 export declare class CommonModule {
                         ~~~~~~~~~~~~
src/shared/shared.module.ts:192:14 - error NG6002: Appears in the NgModule.imports of CustomerFormsModule, but itself has errors

192 export class SharedModule {
                 ~~~~~~~~~~~~
src/customer-forms/customer-forms.routing.module.ts:64:14 - error NG6002: Appears in the NgModule.imports of CustomerFormsModule, but could not be resolved to an NgModule class.

Is it missing an @NgModule annotation?

64 export class CustomerFormsRoutingModule {}
                ~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@uirouter/angular-hybrid/angular-hybrid.d.ts:94:53 - error NG6005: UIRouterUpgradeModule.forChild returns a ModuleWithProviders type without a generic type argument. Please add a generic type argument to the ModuleWithProviders type. If this occurrence is in library code you don't control, please contact the library authors.

94     static forChild(module?: NgHybridStatesModule): ModuleWithProviders;
                                                       ~~~~~~~~~~~~~~~~~~~
node_modules/@angular/forms/forms.d.ts:2574:22 - error NG6002: Appears in the NgModule.imports of IsolationsModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/forms) which declares FormsModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

2574 export declare class FormsModule {
                          ~~~~~~~~~~~
node_modules/@angular/common/common.d.ts:115:22 - error NG6002: Appears in the NgModule.imports of IsolationsModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/common) which declares CommonModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

115 export declare class CommonModule {
                         ~~~~~~~~~~~~
src/shared/shared.module.ts:192:14 - error NG6002: Appears in the NgModule.imports of IsolationsModule, but itself has errors

192 export class SharedModule {
                 ~~~~~~~~~~~~
src/isolations/isolations.routing.module.ts:65:14 - error NG6002: Appears in the NgModule.imports of IsolationsModule, but could not be resolved to an NgModule class.

Is it missing an @NgModule annotation?

65 export class IsolationsRoutingModule {}
                ~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/forms/forms.d.ts:2574:22 - error NG6002: Appears in the NgModule.imports of PlotPlansModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/forms) which declares FormsModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

2574 export declare class FormsModule {
                          ~~~~~~~~~~~
node_modules/@angular/platform-browser/platform-browser.d.ts:44:22 - error NG6002: Appears in the NgModule.imports of PlotPlansModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/platform-browser) which declares BrowserModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

44 export declare class BrowserModule {
                        ~~~~~~~~~~~~~
node_modules/@angular/common/common.d.ts:115:22 - error NG6002: Appears in the NgModule.imports of PlotPlansModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/common) which declares CommonModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

115 export declare class CommonModule {
                         ~~~~~~~~~~~~
src/shared/shared.module.ts:192:14 - error NG6002: Appears in the NgModule.imports of PlotPlansModule, but itself has errors

192 export class SharedModule {
                 ~~~~~~~~~~~~
src/plot-plans/plot-plans.routing.module.ts:20:14 - error NG6002: Appears in the NgModule.imports of PlotPlansModule, but could not be resolved to an NgModule class.

Is it missing an @NgModule annotation?

20 export class PlotPlansRoutingModule {}
                ~~~~~~~~~~~~~~~~~~~~~~
node_modules/@uirouter/angular-hybrid/angular-hybrid.d.ts:94:53 - error NG6005: UIRouterUpgradeModule.forChild returns a ModuleWithProviders type without a generic type argument. Please add a generic type argument to the ModuleWithProviders type. If this occurrence is in library code you don't control, please contact the library authors.

94     static forChild(module?: NgHybridStatesModule): ModuleWithProviders;
                                                       ~~~~~~~~~~~~~~~~~~~
node_modules/@uirouter/angular-hybrid/angular-hybrid.d.ts:93:52 - error NG6005: UIRouterUpgradeModule.forRoot returns a ModuleWithProviders type without a generic type argument. Please add a generic type argument to the ModuleWithProviders type. If this occurrence is in library code you don't control, please contact the library authors.

93     static forRoot(module?: NgHybridStatesModule): ModuleWithProviders;
                                                      ~~~~~~~~~~~~~~~~~~~

Any one help me to resolve this.

The text was updated successfully, but these errors were encountered:

mlc-mlapis · 2020-08-25T15:48:21Z

@gnbabu But you didn't mention what was upgraded and from which version. There is also the site https://update.angular.io where you can find out, what is necessary to do when upgrading from version X to Y.

gnbabu · 2020-08-25T15:52:09Z

@gnbabu But you didn't mention what was upgraded and from which version. There is also the site https://update.angular.io where you can find out, what is necessary to do when upgrading from version X to Y.

I have upgraded from angular 7.2.11 to 9.1.12 as per the angular documentation

JoostK · 2020-08-25T15:59:54Z

Please share the full output of ng version, as that might give a bit more detail about your setup. Ideally, include details on how you migrated and what commands you're running that result in the errors.

In the current state this issue is missing vital information to be actionable.

mlc-mlapis · 2020-08-25T16:01:40Z

@gnbabu So check the whole process once more or migrate to the version 8.x first. You had to make some mistakes.

gnbabu · 2020-08-25T16:02:43Z

Please share the full output of ng version, as that might give a bit more detail about your setup. Ideally, include details on how you migrated and what commands you're running that result in the errors.

In the current state this issue is missing vital information to be actionable.

Angular CLI: 9.1.11
Node: 12.16.1
OS: win32 x64

Angular: 9.1.12
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, upgrade
Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.901.11
@angular-devkit/build-angular 0.901.11
@angular-devkit/build-optimizer 0.901.11
@angular-devkit/build-webpack 0.901.11
@angular-devkit/core 9.1.11
@angular-devkit/schematics 9.1.11
@angular/cli 9.1.11
@angular/http 7.2.11
@ngtools/webpack 7.3.9
@schematics/angular 9.1.11
@schematics/update 0.901.11
rxjs 6.6.0
typescript 3.8.3
webpack 4.44.1

gnbabu · 2020-08-25T16:07:35Z

@gnbabu So check the whole process once more or migrate to the version 8.x first. You had to make some mistakes.

I have updated version step by step as mentioned in the angular documentation ( starting from 7=>8=>9)

JoostK · 2020-08-25T16:11:01Z

So from the errors it's apparent that ngcc, the compatibility compiler, has not processed the libraries as needed for Ivy. This should happen automatically from within the CLI, and your CLI version should be sufficient to do that. So unfortunately, that doesn't yet get us closer to finding the cause.

What commands are you running?

gnbabu · 2020-08-25T16:14:08Z

So from the errors it's apparent that ngcc, the compatibility compiler, has not processed the libraries as needed for Ivy. This should happen automatically from within the CLI, and your CLI version should be sufficient to do that. So unfortunately, that doesn't yet get us closer to finding the cause.

What commands are you running?
you mean for starting the application ? if yes i am using the below command
"start": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --open --hot --mode development",

JoostK · 2020-08-25T16:24:12Z

AH! So that looks like you're not actually using the CLI then, in which case I understand why you're seeing those errors (although the above command does not show how the app is built, assuming that building does not occur from within that script (or does it?!)).

Anyway, without the CLI you'd need to run ngcc manually. The simplest way would be to run it in a postinstall step in package.json using:

{
  "scripts": {
    "postinstall": "ngcc --properties es2015 browser module main --first-only --async"
  }
}

This is assuming that you're only targeting ES2015.

Edit: Removed --create-ivy-entry-points from the list of options.

gnbabu · 2020-08-25T16:29:16Z

AH! So that looks like you're not actually using the CLI then, in which case I understand why you're seeing those errors (although the above command does not show how the app is built, assuming that building does not occur from within that script (or does it?!)).

Anyway, without the CLI you'd need to run ngcc manually. The simplest way would be to run it in a postinstall step in package.json using:
{
  "scripts": {
    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points --async"
  }
}
This is assuming that you're only targeting ES2015.

You are correct my application is hybrid solution which has angularJS+angular. We have used web-pack configuration for building the application below is the command

"build": "webpack --mode development",

petebacondarwin · 2020-08-25T16:32:02Z

Actually if you are not using CLI then you probably don't want to use --create-ivy-entry-points since that is only understandable by the particular webpack configuration used in CLI.

JoostK · 2020-08-25T16:38:14Z

Actually if you are not using CLI then you probably don't want to use --create-ivy-entry-points since that is only understandable by the particular webpack configuration used in CLI.

Thanks Pete, I didn't even think about that!

gnbabu · 2020-08-25T16:54:51Z

AH! So that looks like you're not actually using the CLI then, in which case I understand why you're seeing those errors (although the above command does not show how the app is built, assuming that building does not occur from within that script (or does it?!)).
Anyway, without the CLI you'd need to run ngcc manually. The simplest way would be to run it in a postinstall step in package.json using:
{
  "scripts": {
    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points --async"
  }
}
This is assuming that you're only targeting ES2015.
You are correct my application is hybrid solution which has angularJS+angular. We have used web-pack configuration for building the application below is the command

"build": "webpack --mode development",

its compiling but after running the application getting the empty page, in the console i am getting the below error

webpack-internal:///./node_modules/zone.js/dist/zone.js:664 Unhandled Promise rejection: StaticInjectorError(Platform: core)[CompilerFactory]: 
  NullInjectorError: No provider for CompilerFactory! ; Zone: <root> ; Task: Promise.then ; Value: NullInjectorError: StaticInjectorError(Platform: core)[CompilerFactory]: 
  NullInjectorError: No provider for CompilerFactory!
    at NullInjector.get (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:1368:25)
    at resolveToken (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:12592:24)
    at tryResolveToken (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:12536:16)
    at StaticInjector.get (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:12430:20)
    at compileNgModuleFactory__PRE_R3__ (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:28911:36)
    at PlatformRef.bootstrapModule (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:29153:16)
    at eval (webpack-internal:///./src/main.ts:38:118)
    at step (webpack-internal:///./node_modules/tslib/tslib.es6.js:124:23)
    at Object.eval [as next] (webpack-internal:///./node_modules/tslib/tslib.es6.js:105:53)
    at eval (webpack-internal:///./node_modules/tslib/tslib.es6.js:98:71) NullInjectorError: StaticInjectorError(Platform: core)[CompilerFactory]: 
  NullInjectorError: No provider for CompilerFactory!
    at NullInjector.get (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:1368:25)
    at resolveToken (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:12592:24)
    at tryResolveToken (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:12536:16)
    at StaticInjector.get (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:12430:20)
    at compileNgModuleFactory__PRE_R3__ (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:28911:36)
    at PlatformRef.bootstrapModule (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:29153:16)
    at eval (webpack-internal:///./src/main.ts:38:118)
    at step (webpack-internal:///./node_modules/tslib/tslib.es6.js:124:23)
    at Object.eval [as next] (webpack-internal:///./node_modules/tslib/tslib.es6.js:105:53)
    at eval (webpack-internal:///./node_modules/tslib/tslib.es6.js:98:71)

JoostK · 2020-08-25T17:12:24Z

That looks like you did run it with --create-ivy-entry-points, which should not be used here (sorry, my mistake!)

gnbabu · 2020-08-25T17:13:41Z

That looks like you did run it with --create-ivy-entry-points, which should not be used here (sorry, my mistake!)
i removed that still getting the same error

JoostK · 2020-08-25T17:49:29Z

You'd have to completely remove node_modules and run npm install/yarn install and ngcc again, as the initial run (supposedly with --create-ivy-entry-points) of ngcc has marked everything as processed, such that additional runs won't do anything (even if the configuration changed)

gnbabu · 2020-08-25T19:23:14Z

You'd have to completely remove node_modules and run npm install/yarn install and ngcc again, as the initial run (supposedly with --create-ivy-entry-points) of ngcc has marked everything as processed, such that additional runs won't do anything (even if the configuration changed)

No luck still getting the same error

petebacondarwin · 2020-08-25T19:30:30Z

Can you clarify how you actually build the application? What is the webpack configuration that you are using? Does the command you specified earlier:

webpack --mode development

Actually trigger ngc to build the TypeScript files?

gnbabu · 2020-08-26T06:39:08Z

Can you clarify how you actually build the application? What is the webpack configuration that you are using? Does the command you specified earlier:
webpack --mode development
Actually trigger ngc to build the TypeScript files?

We have hybrid solution (angulajs + angular 9) used web pack to build the application. My question is, Is it possible to enableIvy for hybrid solution?

package.json for web pack versions
```
"webpack": "4.44.1",
"webpack-cli": "3.2.3",
"webpack-dev-server": "3.1.14"


webpack.config.js

> const webpack = require('webpack');
> const path = require('path');
> const CleanWebpackPlugin = require('clean-webpack-plugin');
> const CopyWebpackPlugin = require('copy-webpack-plugin');
> const HtmlWebpackPlugin = require('html-webpack-plugin');
> const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
> const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
> 
> const config = {
>     entry: ['./assets/js/polyfills.ts', './src/main.ts'],
>     module: {
>         rules: [
>             {
>                 test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
>                 use: ['@ngtools/webpack'],
>                 exclude: [/node_modules/, /docs/]
>             },
>             {
>                 test: /\.js$/,
>                 exclude: [
>                     /node_modules/,
>                     /out/,
>                     /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/
>                 ],
>                 use: [
>                     {
>                         loader: 'babel-loader',
>                         options: {
>                             presets: ['@babel/preset-env']
>                         }
>                     }
>                 ]
>             },
>             /** Global Style files only, not styleUrls / component styles **/
>             {
>                 test: /\.less$/,
>                 exclude: /.component.less$/,
>                 use: ['style-loader', 'css-loader', 'less-loader']
>             },
>             {
>                 test: /\.css$/,
>                 exclude: /.component.css$/,
>                 use: ['style-loader', 'css-loader']
>             },
>             /** Stringify component styles to inline them in the components **/
>             {
>                 test: /\.component.less$/,
>                 use: ['to-string-loader', 'css-loader', 'less-loader']
>             },
>             {
>                 test: /\.component.css$/,
>                 use: ['to-string-loader', 'css-loader']
>             },
>             {
>                 test: /\.component.html$/,
>                 use: 'raw-loader'
>             },
>             {
>                 test: /\.template.html$/,
>                 use: 'raw-loader'
>             },
>             {
>                 test: /\.(jpg|png|cur|svg|gif)$/,
>                 use: [
>                     {
>                         loader: 'url-loader',
>                         options: {
>                             limit: 8192,
>                             fallback: 'file-loader'
>                         }
>                     }
>                 ]
>             },
>             {
>                 test: /\.(woff|woff2|eot|ttf)$/,
>                 use: [
>                     {
>                         loader: 'url-loader',
>                         options: {
>                             limit: 100000
>                         }
>                     }
>                 ]
>             },
>             {
>                 // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
>                 // Removing this will cause deprecation warnings to appear.
>                 test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
>                 parser: { system: true }
>             },
>             // Runtime dependencies to global symbols
>             {
>                 test: require.resolve('jquery'),
>                 use: [
>                     {
>                         loader: 'expose-loader',
>                         options: 'jQuery'
>                     },
>                     {
>                         loader: 'expose-loader',
>                         options: '$'
>                     }
>                 ]
>             }
>         ]
>     },
>     resolve: {
>         extensions: ['.tsx', '.ts', '.js', '.css', '.less', '.component.html'],
>         alias: {
>             '@angular/upgrade/static':
>                 '@angular/upgrade/bundles/upgrade-static.umd.js',
>             '@core': path.resolve('src/core/'),
>             '@enums': path.resolve('src/core/enums/'),
>             '@interfaces': path.resolve('src/core/interfaces/'),
>             '@models': path.resolve('src/core/models/'),
>             '@actions': path.resolve('src/actions/'),
>             '@reducers': path.resolve('src/reducers/'),
>             '@mappers': path.resolve('src/core/mappers/'),
>             '@selectors': path.resolve('src/selectors/'),
>             '@services': path.resolve('src/core//services/'),
>             '@pipes': path.resolve('src/shared/pipes/'),
>             '@odata': path.resolve('src/core/odata/odata.ts'),
>             '@modals': path.resolve('src/shared/modals/'),
>             './asset': path.resolve('assets/')
>         }
>     }
> };
> 
> module.exports = (_env, argv) => {
>     if (argv.mode === 'development') {
>         config.output = {
>             publicPath: '',
>             globalObject: 'this',
>             filename: 'cow.dev.bundle.js',
>             path: path.resolve(__dirname, 'out/build')
>         };
>         config.devtool = 'eval-source-map';
>         config.devServer = {
>             disableHostCheck: true, // https://github.com/webpack/webpack-dev-server/issues/1604
>             stats: 'minimal',
>             overlay: {
>                 warnings: true,
>                 errors: true
>             },
>             proxy: {
>                 // API hosted in IIS :80 - reroute baseUrl in config.yaml
>                 '/COW2': 'http://localhost',
> 
>                 // Offline API hosted by mock json-server on :4000,
>                 // start the server by running "npm start" in /mockserver folder
>                 // '/COW2': 'http://localhost:4000',
> 
>                 '/asset': {
>                     target: 'http://localhost:3000',
>                     pathRewrite: { '^/asset': '' }
>                 }
>             },
>             contentBase: [
>                 path.join(__dirname, 'assets'),
>                 path.join(__dirname, 'out/build')
>             ],
>             publicPath: 'http://localhost:3000/',
>             compress: true,
>             port: 3000,
>             hot: true,
>             watchOptions: {
>                 ignored: /node_modules/
>             }
>         };
> 
>         config.optimization = {
>             splitChunks: {
>                 chunks: 'all',
>                 minSize: 0,
>                 cacheGroups: {
>                     default: false,
>                     vendors: {
>                         test: /[\\/]node_modules[\\/]/,
>                         priority: -10
>                     },
>                     assets: {
>                         test: /[\\/]assets[\\/]/,
>                         priority: -10
>                     }
>                 }
>             }
>         };
> 
>         config.plugins = [
>             new CleanWebpackPlugin(['out']),
>             // Build time dependencies to global symbols
>             new webpack.ProvidePlugin({
>                 $: 'jquery',
>                 jQuery: 'jquery',
>                 'window.$': 'jquery',
>                 'window.jQuery': 'jquery',
>                 _: 'underscore',
>                 moment: 'moment'
>             }),
>             new CopyWebpackPlugin([
>                 {
>                     from: 'src/modules',
>                     to: 'modules',
>                     ignore: [{ glob: '!*.html' }]
>                 }
>             ]),
>             new HtmlWebpackPlugin({
>                 template: './assets/html/index.dev.html',
>                 filename: './index.html',
>                 hash: false,
>                 alwaysWriteToDisk: true
>             }),
>             new HtmlWebpackHarddiskPlugin(),
>             new AngularCompilerPlugin({
>                 tsConfigPath: './tsconfig.json',
>                 entryModule: './src/ngxApp#AppModule',
>                 sourceMap: true,
>                 directTemplateLoading: true,
>                 fullTemplateTypeCheck: true,
>                 strictInjectionParameters: true
>             })
>         ];
>     }
> 
>     if (argv.mode === 'production') {
>         config.output = {
>             globalObject: 'this',
>             filename: 'cow.bundle.[hash].js',
>             path: path.resolve(__dirname, 'out/dist')
>         };
> 
>         config.optimization = {
>             flagIncludedChunks: false,
>             occurrenceOrder: false,
>             sideEffects: false,
>             usedExports: false,
>             concatenateModules: false,
>             splitChunks: {
>                 chunks: 'all',
>                 minSize: 0,
>                 cacheGroups: {
>                     default: false,
>                     vendors: {
>                         test: /[\\/]node_modules[\\/]/,
>                         priority: -10
>                     },
>                     assets: {
>                         test: /[\\/]assets[\\/]/,
>                         priority: -10
>                     }
>                 }
>             },
>             noEmitOnErrors: false,
>             checkWasmTypes: false,
>             minimize: false
>         };
> 
>         config.plugins = [
>             new CleanWebpackPlugin(['out']),
>             // Build time dependencies to global symbols
>             new webpack.ProvidePlugin({
>                 $: 'jquery',
>                 jQuery: 'jquery',
>                 'window.$': 'jquery',
>                 'window.jQuery': 'jquery',
>                 _: 'underscore',
>                 moment: 'moment'
>             }),
>             new CopyWebpackPlugin([
>                 {
>                     from: 'src/modules',
>                     to: 'modules',
>                     ignore: [{ glob: '!*.html' }]
>                 },
>                 {
>                     from: 'assets/img',
>                     to: 'asset/img'
>                 },
>                 {
>                     from: 'assets/i18n',
>                     to: 'i18n'
>                 },
>                 {
>                     from: 'assets/config.yaml',
>                     to: 'config.yaml'
>                 },
>                 {
>                     from: 'assets/Web.config',
>                     to: 'Web.config'
>                 },
>                 {
>                     from:
>                         'assets/style/vendor/svg-viewer/avevanet.dashboard.svg.css',
>                     to:
>                         'asset/style/vendor/svg-viewer/avevanet.dashboard.svg.css'
>                 },
>                 'assets/img/favicon.ico',
>                 'assets/img/favicon.png',
>                 'assets/js/vendor/datajs-1.1.2.min.js',
>                 'assets/js/vendor/jaydata/jaydata.min.js',
>                 'assets/js/vendor/tracekit.js',
>                 'assets/js/vendor/Trace.js'
>             ]),
>             new HtmlWebpackPlugin({
>                 template: './assets/html/index.prod.html',
>                 filename: './index.html',
>                 hash: false,
>                 alwaysWriteToDisk: true
>             }),
>             new HtmlWebpackHarddiskPlugin(),
>             new AngularCompilerPlugin({
>                 tsConfigPath: './tsconfig.json',
>                 entryModule: './src/ngxApp#AppModule',
>                 sourceMap: false,
>                 directTemplateLoading: true,
>                 fullTemplateTypeCheck: true,
>                 strictInjectionParameters: true
>             })
>         ];
>     }
> 
>     return config;
> };
>

petebacondarwin · 2020-08-26T09:15:56Z

So I don't see anything in that config that could be the problem...

But I just noticed this line in your error:

at compileNgModuleFactory__PRE_R3__ (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:28911:36)

So the fact it says PRE_R3 indicates that this file has not been processed by ngcc. The ngcc processing should switch this to POST_R3. Secondly I note that the file being loaded is fesm5/core.js, which means that webpack is using the ES5 format of the core library rather than the ES2015. The command options recommended above include: --properties es2015 browser module main --first-only, which means that only the ES2015 format will actually be processed. This works with the CLI because it is setup to look for ES2015 first and only fall back to other formats if that is not available. It seems that your setup is not doing that.

I suggest you try running ngcc again without the --first-only flag and see if that improves matters.

gnbabu · 2020-08-27T11:27:16Z

So I don't see anything in that config that could be the problem...

But I just noticed this line in your error:
at compileNgModuleFactory__PRE_R3__ (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:28911:36)
So the fact it says PRE_R3 indicates that this file has not been processed by ngcc. The ngcc processing should switch this to POST_R3. Secondly I note that the file being loaded is fesm5/core.js, which means that webpack is using the ES5 format of the core library rather than the ES2015. The command options recommended above include: --properties es2015 browser module main --first-only, which means that only the ES2015 format will actually be processed. This works with the CLI because it is setup to look for ES2015 first and only fall back to other formats if that is not available. It seems that your setup is not doing that.

I suggest you try running ngcc again without the --first-only flag and see if that improves matters.

No luck still getting the same error

petebacondarwin · 2020-08-27T12:05:15Z

I'm afraid that, at this stage, without a runnable reproduction that we can debug, there is not much more we can do to analyse this problem.

petebacondarwin · 2020-10-19T15:38:27Z

Closing due to a lack of response.

angular-automatic-lock-bot · 2020-11-19T16:32:16Z

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

gnbabu changed the title ~~Ivyenable compilation issues~~ Ivyenable compilation issues in angular 9 Aug 25, 2020

JoostK added the state: Follow Up label Aug 25, 2020

mhevery added the area: compiler Issues related to `ngc`, Angular's template compiler label Aug 25, 2020

ngbot bot added this to the needsTriage milestone Aug 25, 2020

petebacondarwin added the needs reproduction This issue needs a reproduction in order for the team to investigate further label Aug 27, 2020

jelbourn added needs: clarification This issue needs additional clarification from the reporter before the team can investigate. and removed state: Follow Up labels Oct 1, 2020

petebacondarwin closed this as completed Oct 19, 2020

angular-automatic-lock-bot bot locked and limited conversation to collaborators Nov 19, 2020

brdly-smith added a commit to pactsafe/pactsafe-angular-sdk that referenced this issue May 20, 2021

fix angular/angular#38577

4a15749

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ivyenable compilation issues in angular 9 #38577

Ivyenable compilation issues in angular 9 #38577

gnbabu commented Aug 25, 2020 •

edited

mlc-mlapis commented Aug 25, 2020

gnbabu commented Aug 25, 2020 •

edited

JoostK commented Aug 25, 2020

mlc-mlapis commented Aug 25, 2020

gnbabu commented Aug 25, 2020

gnbabu commented Aug 25, 2020

JoostK commented Aug 25, 2020

gnbabu commented Aug 25, 2020 •

edited

JoostK commented Aug 25, 2020 •

edited

gnbabu commented Aug 25, 2020 •

edited

petebacondarwin commented Aug 25, 2020

JoostK commented Aug 25, 2020

gnbabu commented Aug 25, 2020

JoostK commented Aug 25, 2020

gnbabu commented Aug 25, 2020

JoostK commented Aug 25, 2020

gnbabu commented Aug 25, 2020

petebacondarwin commented Aug 25, 2020

gnbabu commented Aug 26, 2020 •

edited

petebacondarwin commented Aug 26, 2020

gnbabu commented Aug 27, 2020

petebacondarwin commented Aug 27, 2020

petebacondarwin commented Oct 19, 2020

angular-automatic-lock-bot bot commented Nov 19, 2020

Ivyenable compilation issues in angular 9 #38577

Ivyenable compilation issues in angular 9 #38577

Comments

gnbabu commented Aug 25, 2020 • edited

Package Version

mlc-mlapis commented Aug 25, 2020

gnbabu commented Aug 25, 2020 • edited

JoostK commented Aug 25, 2020

mlc-mlapis commented Aug 25, 2020

gnbabu commented Aug 25, 2020

Package Version

gnbabu commented Aug 25, 2020

JoostK commented Aug 25, 2020

gnbabu commented Aug 25, 2020 • edited

JoostK commented Aug 25, 2020 • edited

gnbabu commented Aug 25, 2020 • edited

petebacondarwin commented Aug 25, 2020

JoostK commented Aug 25, 2020

gnbabu commented Aug 25, 2020

JoostK commented Aug 25, 2020

gnbabu commented Aug 25, 2020

JoostK commented Aug 25, 2020

gnbabu commented Aug 25, 2020

petebacondarwin commented Aug 25, 2020

gnbabu commented Aug 26, 2020 • edited

petebacondarwin commented Aug 26, 2020

gnbabu commented Aug 27, 2020

petebacondarwin commented Aug 27, 2020

petebacondarwin commented Oct 19, 2020

angular-automatic-lock-bot bot commented Nov 19, 2020

gnbabu commented Aug 25, 2020 •

edited

gnbabu commented Aug 25, 2020 •

edited

gnbabu commented Aug 25, 2020 •

edited

JoostK commented Aug 25, 2020 •

edited

gnbabu commented Aug 25, 2020 •

edited

gnbabu commented Aug 26, 2020 •

edited