Angular 9 Ivy Error

[ahilangopal]

I am using ionic5 (Capacitor) with Angular9 Ivy, when I tried to use/declare File plugin I am getting below error. I have tried all other plugin same error.

ERROR in node_modules/@ionic-native/file/ngx/index.d.ts:570:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (@ionic-native/file/ngx) which declares File 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.

570 export declare class File extends IonicNativePlugin {

import { File } from '@ionic-native/file/ngx';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    PipeModule,
    FormsModule,
    ReactiveFormsModule,

    File,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    NativePageTransitions,
    {
      provide: RouteReuseStrategy,
      useClass: IonicRouteStrategy
    }
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ionic:

Ionic CLI : 6.5.0 Ionic Framework : @ionic/angular 5.1.0 @angular-devkit/build-angular : 0.901.5 @angular-devkit/schematics : 9.1.1 @angular/cli : 9.1.1 @ionic/angular-toolkit : 2.2.0

Capacitor:

Capacitor CLI : 1.1.1 @capacitor/core : 1.1.1

Utility:

cordova-res (update available: 0.11.0) : 0.10.0 native-run : 1.0.0

System:

NodeJS : v12.16.1 (C:\Program Files\nodejs\node.exe) npm : 6.13.4 OS : Windows 10

Angular Info Angular CLI: 9.1.1 Node: 12.16.1 OS: win32 x64

Angular: 9.1.6 ... animations, common, compiler, compiler-cli, core, forms ... language-service, localize, platform-browser ... platform-browser-dynamic, router, service-worker Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.803.26 @angular-devkit/build-angular 0.901.5 @angular-devkit/build-optimizer 0.901.5 @angular-devkit/build-webpack 0.901.5 @angular-devkit/core 9.1.1 @angular-devkit/schematics 9.1.1 @angular/cdk 9.2.3 @angular/cli 9.1.1 @angular/material 9.2.3 @ngtools/webpack 9.1.5 @schematics/angular 9.1.5 @schematics/update 0.901.1 rxjs 6.5.5 typescript 3.7.5 webpack 4.42.0

[BrianDAC]

Did you solve it?

[albuquerquefabio]

Same problem here, but i had with LocalNotifications. So, after searching for hours i solved my problem with these steps:

1. Install the last of your @ionic-native plugin that you want.

2. At your tsconfig.json check if you have *

"compilerOptions": {
  {"target": "es2015"}
}

3. At your package.json add this code bellow

"scripts": {
  "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
}

Angular compatibility compiler (ngcc) By adding the postinstall script below in your package.json, you make sure your node_modules will be compatible with the Ivy renderer. It will be run after a npm install.

References:

• https://levelup.gitconnected.com/upgrade-to-angular-9-within-10-minutes-671c6fd6174b
• https://medium.com/codestar-blog/upgrading-to-angular-9-my-experience-65158c284034

4. Run npm install to create package-lock.json.

5. Remove node_modules folder.

6. Run npm ci

This command is similar to npm-install, except it’s meant to be used in automated environments such as test platforms, continuous integration, and deployment – or any situation where you want to make sure you’re doing a clean install of your dependencies. It can be significantly faster than a regular npm install by skipping certain user-oriented features. It is also more strict than a regular install, which can help catch errors or inconsistencies caused by the incrementally-installed local environments of most npm users. Reference:

• https://docs.npmjs.com/cli/ci.html
• https://github.com/angular/angular/issues/36060#issuecomment-598821372

7. Last but not the least! Run ng build --prod or ionic build --prod 😄

The options --prod build and check your code and if pass everything is OK. Else, you'll get an error and the reason. In this case if you get an error jump to Extra step down bellow

Extra

If this problem persist add this at tsconfig.app.json

"angularCompilerOptions": {
  "enableIvy": false
}

By default Angular 9 has Ivy as native and this code disable ivy compiler to be compatibility with old version of Angular like 2 until 8.

Disclaimer:

• * I have no idea why angular build es5 bundle and also es2015 one. But it's a problem to other topic.
• ** npm cache clean --force does not work for this issue

[Sampath-Lokuge]

@albuquerquefabio I have tried with 1-7. But it didn't work for me. I don't like to remove iVY on my project. So I'll not do the next step. My issue: https://github.com/ionic-team/ionic-native/issues/3452

[mhartington]

Can anyone please provide a demo app that can replicate this issue? Testing thing locally and I am unable to replicate.

[mhartington]

Similar to #3452, you are putting the File class in imports, when it belongs in the providers array.

As stated in the docs here:

https://ionicframework.com/docs/native/community#angular

[albuquerquefabio]

Can anyone please provide a demo app that can replicate this issue? Testing thing locally and I am unable to replicate.

For me i just create a new project running ionic start with angular and capacitor and after run ionic cap add android to add android platform. Then i add LocalNotification like Ionic native tutorial and put LocalNotifications at providers and finally when you build with android studio, i got a error as described here and also here https://github.com/ionic-team/ionic-native/issues/3452

[mhartington]

@albuquerquefabio Please provide a sample app.

[hybridappsics]

core.js:36228 Uncaught TypeError: Cannot read property 'id' of undefined at registerNgModuleType (core.js:36228) at core.js:36246 at Array.forEach () at registerNgModuleType (core.js:36242) at new NgModuleFactory$1 (core.js:36407) at compileNgModuleFactoryPOST_R3 (core.js:42296) at PlatformRef.bootstrapModule (core.js:42663) at Module../src/main.ts (main.ts:11) at webpack_require (bootstrap:84) at Object.0 (main.ts:12)