Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Angular compilation errors when using Module Federation with nested tsconfig paths #20284

Closed
1 of 4 tasks
gremlin896 opened this issue Nov 16, 2023 · 1 comment · Fixed by #23212
Closed
1 of 4 tasks

Angular compilation errors when using Module Federation with nested tsconfig paths #20284

gremlin896 opened this issue Nov 16, 2023 · 1 comment · Fixed by #23212
Assignees
@Coly010
Labels
scope: angular Issues related to Angular support in Nx type: bug

Comments

@gremlin896
Copy link

gremlin896 commented Nov 16, 2023 •
edited

Current Behavior

Using a tsconfig path that is nested within another path with Module Federation in an Angular application will error.

Without Module Federation being used, the application will compile without issues.

Here is an example of a nested tsconfig path:

"paths": {
      "@acme/shared": ["shared/src/index.ts"],
      "@acme/shared/components": ["shared/components/src/index.ts"],
    }

Expected Behavior

It should compile successfully.

GitHub Repo

https://github.com/gremlin896/mf-nested-paths-issue-repro

Steps to Reproduce

  1. nx serve host or nx build host

Nx Report

Node   : 20.9.0
   OS     : darwin-arm64
   npm    : 10.1.0
   
   nx                 : 17.1.2
   @nx/js             : 17.1.2
   @nx/jest           : 17.1.2
   @nx/linter         : 17.1.2
   @nx/eslint         : 17.1.2
   @nx/workspace      : 17.1.2
   @nx/angular        : 17.1.2
   @nx/cypress        : 17.1.2
   @nx/devkit         : 17.1.2
   @nx/eslint-plugin  : 17.1.2
   @nrwl/tao          : 17.1.2
   @nx/web            : 17.1.2
   @nx/webpack        : 17.1.2
   typescript         : 5.2.2

Failure Logs

> nx run host:serve:development


>  NX  Starting module federation dev-server for host with 3 remotes


>  NX  Building 3 static remotes...

- Generating browser application bundles (phase: setup)...

- Generating browser application bundles (phase: setup)...

    TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI. To control ECMA version and features use the Browerslist configuration. For more information, see https://angular.io/guide/build#configuring-browser-compatibility

    NOTE: You can set the "target" to "ES2022" in the project's tsconfig to remove this warning.

    TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI. To control ECMA version and features use the Browerslist configuration. For more information, see https://angular.io/guide/build#configuring-browser-compatibility

    NOTE: You can set the "target" to "ES2022" in the project's tsconfig to remove this warning.

- Generating browser application bundles (phase: setup)...

    TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI. To control ECMA version and features use the Browerslist configuration. For more information, see https://angular.io/guide/build#configuring-browser-compatibility

    NOTE: You can set the "target" to "ES2022" in the project's tsconfig to remove this warning.

✔ Browser application bundle generation complete.

✔ Browser application bundle generation complete.

✔ Browser application bundle generation complete.

✔ Browser application bundle generation complete.

- Copying assets...

✔ Browser application bundle generation complete.

- Copying assets...

✔ Browser application bundle generation complete.

- Copying assets...

✔ Copying assets complete.

- Generating index html...

✔ Copying assets complete.

- Generating index html...

✔ Copying assets complete.
- Generating index html...

✔ Index html generation complete.

✔ Index html generation complete.

✔ Index html generation complete.


>  NX  Built 3 static remotes

⠋ Generating browser application bundles (phase: setup)...    TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI. To control ECMA version and features use the Browerslist configuration. For more information, see https://angular.io/guide/build#configuring-browser-compatibility
    NOTE: You can set the "target" to "ES2022" in the project's tsconfig to remove this warning.
✔ Browser application bundle generation complete.

Initial Chunk Files                                                                                     | Names         |  Raw Size
polyfills.js                                                                                            | polyfills     | 364.22 kB | 
styles.css, styles.js                                                                                   | styles        | 261.63 kB | 
vendor.js                                                                                               | vendor        | 228.83 kB | 
main.js                                                                                                 | main          |  39.46 kB | 

                                                                                                        | Initial Total | 894.15 kB

Lazy Chunk Files                                                                                        | Names         |  Raw Size
node_modules_angular_core_fesm2022_core_mjs.js                                                          | -             |   1.37 MB | 
default-node_modules_angular_router_fesm2022_router_mjs.js                                              | -             | 345.51 kB | 
default-node_modules_angular_common_fesm2022_common_mjs.js                                              | -             | 292.13 kB | 
default-node_modules_angular_common_fesm2022_http_mjs.js                                                | -             | 122.13 kB | 
default-node_modules_angular_platform-browser_fesm2022_platform-browser_mjs.js                          | -             |  90.56 kB | 
default-node_modules_rxjs_dist_esm_internal_observable_of_js-node_modules_rxjs_dist_esm_inter-56567f.js | -             |  88.66 kB | 
host_src_bootstrap_ts.js                                                                                | bootstrap     |  46.79 kB | 
node_modules_angular_core_fesm2022_primitives_signals_mjs.js                                            | -             |  21.54 kB | 
common.js                                                                                               | common        |   2.77 kB | 
 | -             |   0 bytes | 
 | -             |   0 bytes | 
 | -             |   0 bytes | 
 | -             |   0 bytes | 
 | -             |   0 bytes | 
 | -             |   0 bytes | 
 | -             |   0 bytes | 
 | -             |   0 bytes | 
 | -             |   0 bytes | 

Build at: 2023-11-16T17:05:29.287Z - Hash: 3e0a4d2f9a377995 - Time: 1314ms

Error: Module not found: Error: Can't resolve '@acme/shared/components' in '/acme/host/src/app'



** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✖ Failed to compile.
Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir '/acme/shared/src/index.ts'

Package Manager Version

No response

Operating System

  • macOS
  • Linux
  • Windows
  • Other (Please specify)

Additional Information

The repro repository was created like so:

npx create-nx-workspace acme --preset=apps
nx g @nx/angular:host host --remotes=shop,cart,about
nx g @nx/angular:library --name=shared --projectNameAndRootFormat=as-provided
nx g @nx/angular:library --name=components --directory=shared --projectNameAndRootFormat=derived

Following this, the generated components from the two libraries were imported to the AppComponent of host and used in the template.
@AgentEnder AgentEnder added the scope: angular Issues related to Angular support in Nx label Nov 16, 2023
@gremlin896
Copy link
Author

gremlin896 commented Nov 17, 2023 •
edited

The issue seems to go away if the paths are reordered so that the subpaths are first. Though nx format will break this order, as detailed here in #20190

@Coly010 Coly010 self-assigned this Nov 20, 2023
Coly010 added a commit that referenced this issue May 7, 2024
@Coly010
fix(module-federation): nested projects should be ordered first when …
9676930 
…reading from tsconfig paths #20284
@Coly010 Coly010 mentioned this issue May 7, 2024
Merged
Coly010 added a commit that referenced this issue May 7, 2024
@Coly010
fix(module-federation): nested projects should be ordered first when …
bf90604 
…reading from tsconfig paths #20284 (#23212)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

## Current Behavior
<!-- This is the behavior we have today -->
When using nested projects (note: not secondary entry points), the
`shareWorkspaceLibraries` needs to order the nested projects first for
webpack to resolve the import path aliases correctly.


## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
Ensure nested projects are ordered first when reading tsconfig path
aliases

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #20284
FrozenPandaz pushed a commit that referenced this issue May 7, 2024
@Coly010 @FrozenPandaz
fix(module-federation): nested projects should be ordered first when …
d71c748 
…reading from tsconfig paths #20284 (#23212)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

## Current Behavior
<!-- This is the behavior we have today -->
When using nested projects (note: not secondary entry points), the
`shareWorkspaceLibraries` needs to order the nested projects first for
webpack to resolve the import path aliases correctly.

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
Ensure nested projects are ordered first when reading tsconfig path
aliases

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #20284

(cherry picked from commit bf90604)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Coly010 Coly010

Labels
scope: angular Issues related to Angular support in Nx type: bug
Projects
None yet
Milestone
No milestone
3 participants
@gremlin896 @AgentEnder @Coly010