NativeScript w/ Angular 9 - ERROR in ../node_modules/nativescript-ui-sidedrawer/__ivy_ngcc__/angular/side-drawer-directives.js

Question

I had a NativeScript app made with Angular 8.2.0 and NS 6.4.1. I had this plugin (https://github.com/ProgressNS/nativescript-ui-feedback) nativescript-ui-sidedrawer included in my project and it was working fine and I could compile the project.

I have followed these directions here: https://github.com/NativeScript/nativescript-angular/wiki/Updating-and-developing-for-@nativescript-angular-v9-with-Ivy-or-without To update my project to Angular 9.

When I run this command I get an error: tns build android --env.aot

tns build android --env.aot
Preparing project...
Hash: 3428173c1802ae5194b7
Version: webpack 4.27.1
Time: 6666ms
Built at: 17/09/2020 14:38:16
 3 assets
Entrypoint bundle = runtime.js vendor.js bundle.js
[../$$_lazy_route_resource lazy recursive] ../$$_lazy_route_resource lazy namespace object 160 bytes {bundle} [built]
[./app.css] 3.15 KiB {bundle} [built]
[./app/app-routing.module.ts] 1.31 KiB {bundle} [built]
[./app/app.component.ts] 1.52 KiB {bundle} [built]
[./app/app.module.ts] 1.72 KiB {bundle} [built]
[./app/home/home-routing.module.ts] 1.22 KiB {bundle} [built]
[./app/home/home.component.ts] 1.82 KiB {bundle} [built]
[./app/home/home.module.ts] 1.78 KiB {bundle} [built]
[./app/home/side-drawer/side-drawer.component.ts] 2.43 KiB {bundle} [built]
[./app/home/side-drawer/side-drawer.service.ts] 1.75 KiB {bundle} [built]
[./main.ts] 1.38 KiB {bundle} [built]
[./package.json] 100 bytes {bundle} [optional] [built]
    + 612 hidden modules

ERROR in ../node_modules/nativescript-ui-sidedrawer/__ivy_ngcc__/angular/side-drawer-directives.js
Module not found: Error: Can't resolve './..' in '/Users/aubrey/Documents/GitHub/Angular9SideDrawer/node_modules/nativescript-ui-sidedrawer/__ivy_ngcc__/angular'
 @ ../node_modules/nativescript-ui-sidedrawer/__ivy_ngcc__/angular/side-drawer-directives.js 3:10-25 6:23-38
 @ ./app/app.module.ts
 @ ./main.ts
Executing webpack failed with exit code 2.

I have tried to uninstall and re-install node_modules and it did not help.

Here is my source code to reproduce the error: https://github.com/aquinn637/Angular9SideDrawer/tree/ng9upgrade

package.json

{
  "nativescript": {
    "id": "org.nativescript.Angular9SideDrawer",
    "tns-android": {
      "version": "6.5.0"
    },
    "tns-ios": {
      "version": "6.5.0"
    }
  },
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "dependencies": {
    "@angular/animations": "~9.1.12",
    "@angular/common": "~9.1.12",
    "@angular/compiler": "~9.1.12",
    "@angular/core": "~9.1.12",
    "@angular/forms": "~9.1.12",
    "@angular/platform-browser": "~9.1.12",
    "@angular/platform-browser-dynamic": "~9.1.12",
    "@angular/router": "~9.1.12",
    "@nativescript/angular": "^9.0.0",
    "@nativescript/core": "^6.5.18",
    "@nativescript/theme": "~2.3.0",
    "nativescript-ui-sidedrawer": "^8.0.1",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.5.5",
    "tns-core-modules": "~6.5.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/schematics": "^10.1.2",
    "@angular/compiler-cli": "^9.1.12",
    "@ngtools/webpack": "^9.1.12",
    "nativescript-dev-webpack": "~1.5.0",
    "typescript": "~3.8.3"
  },
  "gitHead": "20a65d338ae8f8911087ab6615b89363f864b07b",
  "readme": "NativeScript Application",
  "scripts": {
    "ngcc": "ngcc --properties es2015 module main --first-only",
    "postinstall": "npm run ngcc"
  }
}

Answer 1

Try to update your nativescript-ui-sidedrawer package, there is a new version, to me looks like the version you have does not have proper configurations or build sources for AOT

Answer 2

Make sure your tsconfig.json contains

"skipLibCheck": true

it appears to be coming in by default if you're generating a new project but is not being added during update process. Adding it fixed all issues for me related to the side drawer and now I'm able to compile the app with no issues.

Below is an example of my tsconfig file:

{
  "compilerOptions": {
    "module": "esnext",
    "target": "es2017",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noEmitHelpers": true,
    "noEmitOnError": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": [
      "es2017",
      "dom"
    ],
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "src/*"
      ]
    }
  },
  "exclude": [
    "node_modules",
    "platforms"
  ]
}