[question] deep import access from Nx lib

mahmoudajawad commented 3 years ago

Overview

A lib created by @nativescript/nx can be accessed by ns apps in the workspace, but not regular angular libs created by @nrwl/angular.

Steps:

Create empty Nx workspace.
Create Angular lib using npx nx g @nrwl/angular:lib
Create ns app.
Import the lib module in ns app.

Logs

$ npx nx run nativescript-app:ios

ERROR in ./src/app.component.ts 2:0-64
Module not found: Error: Can't resolve 'libs/LIB_NAME/src/lib/state.service' in '/path/to/workspace/apps/nativescript-app/src'
resolve 'libs/LIB_NAME/src/lib/state.service' in '/path/to/workspace/apps/nativescript-app/src'
  Parsed request is a module
  using description file: /path/to/workspace/apps/nativescript-app/package.json (relative path: ./src)
    resolve as module
      looking for modules in /path/to/workspace/apps/nativescript-app/node_modules
        /path/to/workspace/apps/nativescript-app/node_modules/libs doesn't exist
      /path/to/workspace/apps/nativescript-app/src/node_modules doesn't exist or is not a directory
      looking for modules in /path/to/workspace/apps/nativescript-app/node_modules
        /path/to/workspace/apps/nativescript-app/node_modules/libs doesn't exist
      /path/to/workspace/apps/node_modules doesn't exist or is not a directory
      looking for modules in /path/to/workspace/node_modules
        /path/to/workspace/node_modules/libs doesn't exist
      /path/to/workspace/PARENT/node_modules doesn't exist or is not a directory
      /path/to/workspace/PARENT/PARENT/node_modules doesn't exist or is not a directory
      /path/to/workspace/PARENT/PARENT/PARENT/node_modules doesn't exist or is not a directory
      /path/to/workspace/PARENT/PARENT/PARENT/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./src/app.module.ts 5:0-47 12:68-80 20:116-128 35:31-43 36:28-40
 @ ./src/main.ts 6:0-41 10:46-55

webpack 5.31.2 compiled with 2 errors in 1212 ms
Webpack compilation complete. Watching for file changes.

Notes

The lib is created in /path/to/workspace/libs/LIB_NAME, and webpack tries to find the lib in all parent paths of the ns app, but not in /path/to/workspace/libs.

NathanWalker commented 3 years ago

@mahmoudajawad This is related to fact that Nx libs are created by default as single barrel imports in tsconfig.base.json, for example:

"@freshtest/ngtest": ["libs/ngtest/src/index.ts"]

This means you can not import a deep import from Nx libs (by design) but rather should export any files out of your lib via an index so you can use those symbols from the single barrel throughout your workspace. If you wanted to allow deep imports off a lib you can add your own tsconfig.base.json rule in root as follows:

"@freshtest/ngtest/*": ["libs/ngtest/src/*"]

However it's not recommended since you really shouldn't be doing deep imports from your libs.

NathanWalker commented 3 years ago

I setup a sample repo where you can see @nrwl/angular lib's working as normal (generated just as described): https://github.com/NathanWalker/freshtest

NathanWalker commented 3 years ago

I also just pushed up a sample StateService to better illustrate: https://github.com/NathanWalker/freshtest/commit/e50811f587f05072f020748937da09da854f7fef

mahmoudajawad commented 3 years ago

Thanks for spending time to build a PoC. It seems my issue is more complicated than that and that's what is causing the issue. I'll try to re-evaluate why your PoC worked while my project fails and report back.

NathanWalker commented 3 years ago

If you’d like to share project privately would love to look. Always curious with anything like this.

mahmoudajawad commented 3 years ago

So, after little attempts, guided by your earlier points, I found two interesting points:

Both, Angular (web) app and NS app, imported the shared lib module from @myorg/LIB_NAME, and accessed the service as libs/LIB_NAME/state.service.ts, however, only Angular app was able to understand what does libs in the context means, while NS app fails.
My current work with @nativescript/nx is revolving around testing it and seeing how much of nx tooling can benefit the whole development process, so, I'm testing all possible scenarios, which distracted me from exporting StateService and caused the whole issue. I can confirm once I exported the service the project builds and runs fine.

So, although in practice I'm still touching differences between angular and ns apps, these differences are meaning-less, as the end-product wouldn't have the issue at all.

Thanks for your time on this. I'm closing it.

pandabuilt commented 3 years ago

I have consistently been getting this error. I correctly imported the libs with no *.... and still got this issue.

However, after adding webpack.useConfig('angular'); in our webpack.config file - I no longer get this error.

davidguedes commented 1 year ago

Hi! Has anyone managed to find a solution to this situation? I'm having the exact same problem as @mahmoudajawad. I'm studying NativeScript and testing with NX to create a monorepo containing an NS + Angular web app. With angular project the libraries work fine however in NS app an import error occurs. I tried different ways but without solution.

NativeScript / nx