Support Angular 9 w/ the Ivy compiler

[kmmccafferty96]

Which platform(s) does your issue occur on?

• Both iOS & Android
• Both an emulator and a device

Please, provide the following version numbers that your issue occurs with:

• CLI: 6.7.4
• Cross-platform modules: 6.5.3
• Runtime(s): 6.5.1 (iOS & Android)
• Plugin(s):

    "dependencies": {
        "@angular/animations": "~9.1.0",
        "@angular/common": "~9.1.0",
        "@angular/compiler": "~9.1.0",
        "@angular/core": "~9.1.0",
        "@angular/forms": "~9.1.0",
        "@angular/platform-browser": "~9.1.0",
        "@angular/platform-browser-dynamic": "~9.1.0",
        "@angular/router": "~9.1.0",
        "@nativescript/angular": "^9.0.0",
        "@nativescript/core": "~6.5.3",
        "@nativescript/theme": "^2.3.3",
        "@ngxs/store": "^3.6.2",
        "date-fns": "^2.14.0",
        "immer": "^6.0.9",
        "nativescript-image": "3.0.1",
        "nativescript-material-activityindicator": "^3.2.8",
        "nativescript-material-bottomnavigationbar": "^3.2.8",
        "nativescript-material-bottomsheet": "^3.2.8",
        "nativescript-material-button": "^3.2.8",
        "nativescript-material-cardview": "^3.2.8",
        "nativescript-material-core": "^3.2.8",
        "nativescript-material-dialogs": "^3.2.8",
        "nativescript-material-snackbar": "^3.2.8",
        "nativescript-material-textfield": "^3.2.8",
        "nativescript-secure-storage": "^2.6.0",
        "nativescript-ui-calendar": "^6.1.0",
        "nativescript-ui-sidedrawer": "^8.0.1",
        "reflect-metadata": "~0.1.12",
        "rxjs": "~6.5.5",
        "zone.js": "^0.10.3"
    },
    "devDependencies": {
        "@angular/compiler-cli": "~9.1.0",
        "@commitlint/config-conventional": "^8.3.4",
        "@ngtools/webpack": "~9.1.0",
        "@ngxs/logger-plugin": "^3.6.2",
        "codelyzer": "^5.2.2",
        "commitlint": "^8.3.5",
        "husky": "^4.2.5",
        "nativescript-dev-webpack": "~1.5.0",
        "node-sass": "^4.14.1",
        "prettier": "^2.0.5",
        "pretty-quick": "^2.0.1",
        "tslint": "^6.1.2",
        "typescript": "~3.8.3"
    },

Please, tell us how to recreate the issue in as much detail as possible.

Running tns run ios --env.aot with the Ivy compiler turned on gives errors like the following for all nativescript-material-components and nativescript-image:

This likely means that the library (nativescript-material-button/angular) which declares NativeScriptMaterialButtonModule 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.

3 export declare class NativeScriptMaterialButtonModule {
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/nativescript-material-cardview/angular/index.d.ts:3:22 - error NG6003: Appears in the NgModule.exports of AppCommonModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.

This likely means that the library (nativescript-material-cardview/angular) which declares NativeScriptMaterialCardViewModule 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.

3 export declare class NativeScriptMaterialCardViewModule {
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/nativescript-image/angular/nativescript-image.module.d.ts:1:22 - error NG6003: Appears in the NgModule.exports of AppCommonModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.

This likely means that the library (nativescript-image/angular) which declares TNSImageModule 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.

1 export declare class TNSImageModule {

There will likely be a higher demand for this very shortly as @NathanWalker just added support for Angular 9 in NativeScript a few days ago.

[farfromrefug]

@kmmccafferty96 dont use or know much about angular. PRs are welcome

[kmmccafferty96]

I'm not super familiar with creating NativeScript plugins, but I'll have a go at it. @NathanWalker - is there anything special I need to do for this to support Ivy? Anything other than the steps here: https://docs.nativescript.org/angular/plugins/angular-plugin?

[kmmccafferty96]

I was able to get this working with this in ngcc.config.js:

    "nativescript-material-button": {
      entryPoints: {
        "angular": {
          override: {
            main: "./index.js",
            typings: "./index.d.ts",
          },
          ignoreMissingDependencies: true,
        }
      },
      ignorableDeepImportMatchers: [
        /tns-core-modules\//,
        /@nativescript\/core\//,
        /@nativescript\/angular\//
      ]
    },
    "nativescript-material-textfield": {
      entryPoints: {
        "angular": {
          override: {
            main: "./index.js",
            typings: "./index.d.ts",
          },
          ignoreMissingDependencies: true,
        }
      },
      ignorableDeepImportMatchers: [
        /tns-core-modules\//,
        /@nativescript\/core\//,
        /@nativescript\/angular\//
      ]
    },
    "nativescript-material-cardview": {
      entryPoints: {
        "angular": {
          override: {
            main: "./index.js",
            typings: "./index.d.ts",
          },
          ignoreMissingDependencies: true,
        }
      },
      ignorableDeepImportMatchers: [
        /tns-core-modules\//,
        /@nativescript\/core\//,
        /@nativescript\/angular\//
      ]
    },
    "nativescript-material-bottomnavigationbar": {
      entryPoints: {
        "angular": {
          override: {
            main: "./index.js",
            typings: "./index.d.ts",
          },
          ignoreMissingDependencies: true,
        }
      },
      ignorableDeepImportMatchers: [
        /tns-core-modules\//,
        /@nativescript\/core\//,
        /@nativescript\/angular\//
      ]
    },
    "nativescript-material-activityindicator": {
      entryPoints: {
        "angular": {
          override: {
            main: "./index.js",
            typings: "./index.d.ts",
          },
          ignoreMissingDependencies: true,
        }
      },
      ignorableDeepImportMatchers: [
        /tns-core-modules\//,
        /@nativescript\/core\//,
        /@nativescript\/angular\//
      ]
    },
    "nativescript-material-bottomsheet": {
      entryPoints: {
        "angular": {
          override: {
            main: "./index.js",
            typings: "./index.d.ts",
          },
          ignoreMissingDependencies: true,
        }
      },
      ignorableDeepImportMatchers: [
        /tns-core-modules\//,
        /@nativescript\/core\//,
        /@nativescript\/angular\//
      ]
    },
    "nativescript-image": {
      entryPoints: {
        "angular": {
          override: {
            main: "./index.js",
            typings: "./index.d.ts",
          },
          ignoreMissingDependencies: true,
        }
      },
      ignorableDeepImportMatchers: [
        /tns-core-modules\//,
        /@nativescript\/core\//,
        /@nativescript\/angular\//
      ]
    },

Based off the Angular 9 upgrade instructions here.