[Question] Why are all dependencies declared in package.json of a {N} app as well?

[OliverNiebsch]

Hi there. I'm new to the nx workspace and I'm very thankful for the xplat pack!

Maybe the answer is very obvious, but I don't understand why all the Angular and NativeScript dependencies are also listed in the package.json of a newly created NativeScript app.
In my opinion one of the nx features is that all "general" dependencies are defined in the package.json on root level for all libs and apps.

Can anyone solve my thinking mistake or help my to understand this concept?

[asciidiego]

Show your package.json files to give more context.

[OliverNiebsch]

After generating a nx workspace and a new NativeScript app with xplat, there are two package.json files:

On root:

{
  "name": "nx-workspace",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "nx": "nx",
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test",
    "lint": "nx workspace-lint && nx lint",
    "e2e": "nx e2e",
    "affected:apps": "nx affected:apps",
    "affected:libs": "nx affected:libs",
    "affected:build": "nx affected:build",
    "affected:e2e": "nx affected:e2e",
    "affected:test": "nx affected:test",
    "affected:lint": "nx affected:lint",
    "affected:dep-graph": "nx affected:dep-graph",
    "affected": "nx affected",
    "format": "nx format:write",
    "format:write": "nx format:write",
    "format:check": "nx format:check",
    "update": "nx migrate latest",
    "workspace-schematic": "nx workspace-schematic",
    "dep-graph": "nx dep-graph",
    "help": "nx help",
    "clean": "npx rimraf -- hooks node_modules package-lock.json && npm i",
    "start.nativescript.my-app.ios": "cd apps/nativescript-my-app && tns debug ios --env.aot --no-hmr --emulator",
    "start.nativescript.my-app.android": "cd apps/nativescript-my-app && tns debug android --env.aot --no-hmr --emulator",
    "clean.nativescript.my-app": "cd apps/nativescript-my-app && npx rimraf -- hooks node_modules platforms package-lock.json && npm i && npx rimraf -- package-lock.json"
  },
  "private": true,
  "dependencies": {
    "nativescript-theme-core": "^1.0.4",
    "tns-core-modules": "~6.4.0",
    "@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",
    "@ngx-translate/core": "~12.1.0",
    "rxjs": "^6.5.0",
    "tslib": "~1.11.0",
    "zone.js": "~0.10.2",
    "@nativescript/angular": "https://github.com/nstudio/ns-ng/blob/master/nativescript-angular-9.0.0.tgz?raw=true",
    "nativescript-angular": "https://github.com/nstudio/ns-ng/blob/master/nativescript-angular-compat.tgz?raw=true",
    "nativescript-intl": "~3.0.0",
    "nativescript-ngx-fonticon": "~6.0.3"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~9.1.0",
    "@angular/language-service": "~9.1.0",
    "@nrwl/angular": "~9.2.2",
    "@nrwl/workspace": "9.2.3",
    "@nstudio/angular": "9.0.3",
    "@nstudio/nativescript": "9.0.3",
    "@nstudio/nativescript-angular": "9.0.3",
    "@nstudio/xplat": "^9.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~5.1.0",
    "dotenv": "6.2.0",
    "eslint": "6.8.0",
    "node-sass": "^4.12.0",
    "prettier": "1.19.1",
    "terser-webpack-plugin": "~2.2.0",
    "tns-platform-declarations": "~6.3.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.0.0",
    "typescript": "~3.8.3"
  },
  "xplat": {
    "prefix": "nx-workspace",
    "framework": "angular"
  }
}

And in apps/nativescript-my-app:

{
  "name": "myapp",
  "license": "SEE LICENSE IN <your-license-filename>",
  "version": "0.0.0",
  "nativescript": {
    "id": "org.nativescript.myapp",
    "tns-ios": {
      "version": "6.5.0"
    }
  },
  "scripts": {
    "reset": "npx rimraf -- hooks node_modules platforms && npm run js.clean",
    "clean": "npm run js.clean",
    "js.clean": "npx rimraf -- app/**/*.js",
    "prepare.ios.release": "tns prepare ios --release",
    "prepare.android.release": "tns prepare android --release",
    "build.ios": "tns build ios --env.aot --env.uglify --env.production --release",
    "build.android": "tns build android --env.aot --env.uglify --env.production --release",
    "debug.ios": "tns debug ios",
    "debug.android": "tns debug android",
    "postinstall": "node ./tools/xplat-postinstall.js && npm run ngcc",
    "ngcc": "ngcc --properties es2015 module main --first-only"
  },
  "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": "https://github.com/nstudio/ns-ng/blob/master/nativescript-angular-9.0.0.tgz?raw=true",
    "@ngx-translate/core": "~12.1.0",
    "@nx-workspace/scss": "file:../../libs/scss",
    "@nx-workspace/nativescript-scss": "file:../../xplat/nativescript/scss",
    "nativescript-angular": "https://github.com/nstudio/ns-ng/blob/master/nativescript-angular-compat.tgz?raw=true",
    "nativescript-intl": "~3.0.0",
    "nativescript-ngx-fonticon": "~6.0.3",
    "nativescript-theme-core": "^1.0.4",
    "rxjs": "^6.5.0",
    "tns-core-modules": "~6.4.0",
    "tslib": "~1.11.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~9.1.0",
    "@angular/language-service": "~9.1.0",
    "@ngtools/webpack": "~9.1.0",
    "codelyzer": "~5.1.0",
    "nativescript-dev-webpack": "~1.5.0",
    "terser-webpack-plugin": "~2.2.0",
    "tns-platform-declarations": "~6.4.0",
    "typescript": "~3.8.3"
  }
}

The dependencies and some of the devDependencies are declared in both of this files. As I understood it, in Nx you want to declare your dependencies only on root level if possible.
I hope it's clearer now why I'm confused.

[asciidiego]

@OliverNiebsch it is indeed strange to create an additional package.json file, but I do remember Nathan Walker saying that it's a minor thing, since it's only created because {N} needs it and the only dependencies are obtained through the root level, so it should be fine. But I am not seeing that in your case. Check if this is helpful for you:

Oh, one thing, my team and I are trying to create a {N} app as well, but you have to know that there is no official support for Angular v9 at the moment, at least they have not published it in their blog, and I know there is some issue where they are tackling the problems that Ivy has with {N} in order to run by default. Correct me if I am wrong.

What my team and I are doing (at the moment), since we want to create an Angular NativeScript app as well, was simply use major version 8 for our Nx workspace and used the v8 version of Xplat as well.

After all, it's a best practice to sync your angular version across your whole monorepo, remind me to provide you the source for this statement if you are interested since I have it somewhere.

Our rationale is that it has already been announced that v9 will not introduce features to v8, it will mainly be a huge refactor, so this is a good opportunity to start {N} projects in v8 and, when they introduce native support for V9, simply upgrade and it should be relatively hassle free. Try again using the same major version for Nx and Xplat and see if you have the same issue, in a rapid workspace that I just created, there indeed is an additional package.json file, but it's ALL dependencies from the root node_modules folder:

I might be wrong though, ask any of the collaborators like NathanWalker (I do not want to tag him because he already seems really busy) to verify.

P.S. My team and I are actively working on a {N} app, if you are doing the same, let's keep in touch. I am trying to build a better documentation for Xplat, since I believe in the initiative.

[abcfoundry]

we are using nx 9.3 and xplat 9.3 with angular 9 with the following .... I got this fix from Nathan.
snippet from package.json

`

....

"@angular/router": "~9.1.7",
"@nativescript/angular": "https://github.com/nstudio/ns-ng/blob/master/nativescript-angular-9.0.0.tgz?raw=true",
"@nativescript/theme": "^2.3.3",
"@ngrx/effects": "9.1.2",
"@ngrx/entity": "9.1.2",
....
"material-components-web": "7.0.0-canary.4497b86ed.0",
"nativescript-angular": "https://github.com/nstudio/ns-ng/blob/master/nativescript-angular-compat.tgz?raw=true",
"nativescript-intl": "~3.0.0",
"nativescript-ngx-fonticon": "~6.0.3",
`
all other packages are latest angular packages.

So far things are working well. I'm not sure when {NS} is planning to have support. I guess Angular 10 might be out first ;) We are currently working on 9 apps.

let us know if things work out for you

[OliverNiebsch]

Thanks for your responses!

One thing I want to clarify: There is no problem with my NativeScript project. It's working pretty well with the xplat architecture and even with Angular 9 when disabling the aot flag.

The reason for this issue is the fact, that I was asking myself why there are so many duplicated dependency statements in the package.json on root and the package.json in the NativeScript application.
As what I understand, for building the app it needs an own package.json file and maybe (?) therefor also the dependency statements are required. If this is true, I would prefer relative path in the applications package.json like diegovincent has shown.

For now whenever I need a new dependency for my app, I'm confused on which level to install it. To be safe I'm always executing npm install twice, on root and in my app folder.

Maybe there are some best practices where to add general dependencies like ngrx or jasmine and where to add NativeScript relevant dependencies like firebase. I would love to here your suggestions.

Thanks in advance. Keep save and healthy!

[NathanWalker]

@OliverNiebsch great question. At moment Ivy does not work well with file: reference package dependencies and is the reason the dep's are directly in the {N} app as well to ensure Ivy compliance. I'm hoping this changes in future with Ivy 🙏

[davecoffin]

{N} requires having the package.json at its root, and as of Angular 9 you cant reference packages at the root level. There is some chatter that this will be addressed, but for now you have to have the dependencies in the {N} apps package.json. Its up to you if you want to remove them from the root package.json, you dont need nativescript libraries in there, but leaving them in may make it easier to revert back to referenced libraries if and when angular supports them again.

Personally, I removed all nativescript plugins from root package.json and for now I am managing the dependencies separately. Slightly more cumbersome, but hopefully that will be address in angular soon. So web package, add it to root package.json. nativescript package, add it to your app's package.json. Shared package, add it to both. I have these scripts in my root:

"clean": "npx rimraf hooks node_modules package-lock.json && npm i",
 "clean.all": "npm run clean && npm run clean.nativescript.myp",

If youre developing in web and you add some packages at root, run the first one. If you are working on your nativescript app, run the second one and you'll be sure your packages are all there.

[NathanWalker]

Here's the angular issue to track for this:
angular/angular#33395

[OliverNiebsch]

Thanks for clarification!