ERROR in ../node_modules/nativescript-ui-sidedrawer/__ivy_ngcc__/angular/side-drawer-directives.js

[aquinn637]

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

[jalberto-ghub]

I do not think these combinations of N6.x + A9 where ever more than experimental. The real support is for N7.0 + A10 where these stuff is resolved but still there are still bugs that need fixing.

[aquinn637]

@jalberto-ghub I tried to upgrade to NS 7 and I am still getting the error:

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

I followed this tutorial: https://nativescript.org/blog/nativescript-7-announcement/

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

[aquinn637]

When I updated to nativescript-ui-sidedrawer v 9.0.3 I got a different error:

ns build android                         
Preparing project...
Compiling nativescript-ui-sidedrawer-angular : module as esm2015
Error: Error on worker #1: Error: The given rootPath undefined is not a file of the program.
    at getRootFileOrFail (/Users/aubrey/Documents/GitHub/Angular9SideDrawer/node_modules/@angular/compiler-cli/ngcc/src/host/esm2015_host.js:2323:19)

[jalberto-ghub]

I am using side-drawer but with "@angular/compiler-cli": "^10.0.14", Have you tried deleting you node_modules and then npm i?

[NathanWalker]

@aquinn637 Thanks for the sample repo. I went ahead and upgraded the project to {N} 7 and Angular 10.1 with working sidedrawer. Perhaps this helps show you the changes needed as well as others in similar situation. 🤝 🤗 https://github.com/aquinn637/Angular9SideDrawer/pull/1

[aquinn637]

@NathanWalker Thank you. Can you please see the comment on the pull request?

@NathanWalker I merged in the pull request and pull the code into my local repo. I ran npm i and then ns build android.

There was an error:

ns build android

Preparing project...

Using @nativescript/android which requires nsconfig.json to be present. Writing nsconfig.json based on the values set in nativescript.config.(js|ts). You may add nsconfig.json to .gitignore as the CLI will regenerate it as necessary.

Compiling @angular/core : module as esm2015 Compiling @angular/animations : module as esm2015 Compiling @angular/common : module as esm2015 Compiling @angular/animations/browser : module as esm2015 Compiling @angular/platform-browser : module as esm2015 Compiling @angular/router : module as esm2015 Compiling @angular/forms : module as esm2015 Compiling @angular/platform-browser/animations : module as esm2015 Compiling @angular/common/http : module as esm2015 Compiling @nativescript/angular : module as esm2015 Compiling nativescript-ui-sidedrawer-angular : module as esm2015 Error: Error on worker #1: Error: The given rootPath undefined is not a file of the program. at getRootFileOrFail (/Users/aubrey/Documents/GitHub/Angular9SideDrawer/node_modules/@angular/compiler-cli/ngcc/src/host/esm2015_host.js:2322:19) ns --version 7.0.8

node -v v10.19.0

npm list -g --depth 0 /usr/local/lib ├── @angular/cli@10.1.1 ├── @nativescript/schematics@10.1.0 ├── cordova@10.0.0 ├── cordova-res@0.15.1 ├── eslint@7.9.0 ├── gulp@4.0.2 ├── ionic@4.10.3 ├── ios-deploy@1.10.0 ├── ios-sim@9.0.0 ├── jshint@2.12.0 ├── jslint@0.12.1 ├── karma-cli@2.0.0 ├── native-run@1.0.0 ├── nativescript@7.0.8 ├── npm@6.14.4 ├── plugman@3.0.1 ├── tslint@6.1.3 ├── typescript@4.0.2 ├── UNMET PEER DEPENDENCY webpack@4.x.x └── webpack-cli@3.3.12

MacOS

[hypery2k]

did you have a ngcc.config.ts in your project root? If yes delete that

[dkast]

@hypery2k thank you! deleting that file solved the rootPath undefined error for me