question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Importing standalone components from lib into other lib's module breaks build

See original GitHub issue

Type of Issue

[x] Bug Report
[ ] Feature Request

Description

The build breaks as sone as angular standalone components are added to another lib’s ngModule via spreaded array.

   libs/other-lib/src/lib/other-lib.module.ts:7:12 - error NG1010: Value at position 1 in the NgModule.imports of OtherLibModule is not a reference
     Value could not be determined statically.

   7   imports: [CommonModule, ...STANDALONE_COMPS],
                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

     libs/other-lib/src/lib/other-lib.module.ts:7:27
       7   imports: [CommonModule, ...STANDALONE_COMPS],
                                   ~~~~~~~~~~~~~~~~~~~
       Unable to evaluate an invalid expression.

Corresponding issue inside the nrwl nx repo: https://github.com/nrwl/nx/issues/11451 Workaround: https://github.com/nrwl/nx/issues/11451#issuecomment-1211725201

How To Reproduce

The following is a nrwl nx repo which used buildable libraries. This process uses ng-packagr under the hood.

https://github.com/TomTomB/nx-ng-standalone-comps-issue

  • Clone the repo
  • Run npm install
  • Run npm run ng build

Expected Behaviour

This should work in the same way as e.g. spreading a (non standalone) components array into the ngModule’s delarations.

Version Information

$ node_modules/.bin/ng-packagr --version
ng-packagr: ~14.1.0
@angular/*: ~14.1.0
typescript: 4.7.4
rxjs: ~7.5.6
node: 16.x
npm/yarn: yarn@3.2.1 (PnP disabled)
nx: 14.5.4

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:2
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
JoostKcommented, Dec 8, 2022

This turned out to be missing support from the AOT compiler which has been addressed in angular/angular#48091.

I cannot close issues in this repo. EDIT I can now!

0reactions
montella1507commented, Nov 24, 2022

Hi @JoostK any news regarding this issue, please?

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to import standalone components from a lib in Angular 14?
Next you need to import the component into other components/modules. You now can import it into your module in the import property which ......
Read more >
Getting started with standalone components - Angular
Standalone components provide a simplified way to build Angular applications. ... standalone component, it can directly import another standalone component ...
Read more >
4 Ways to Prepare for Angular's Upcoming Standalone ...
Angular modules can be imported into Standalone Components and vice versa. ... to be broken down into different applications and libraries.
Read more >
[Complete] RFC: Standalone components, directives and ...
Importing a standalone component/directive/pipe into either another standalone component, or into an NgModule , behaves as if its virtual ...
Read more >
The Best Way To Architect Your Angular Libraries
How to create Angular library implementing clean architecture from ... will be used to export all the entities (like modules, components, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found