Can't build angular libraries with rush

Question

I'm trying to migrate from lerna to rush, but it's been kinda complicated.

I created a new project from scratch (rush init) and followed the getting started guide. Sadly, I could not find any tutorials for angular + rush online, if there's one, please send me the link, maybe I've done something wrong, but I'm going by trial and error here.

I have an angular project on lerna with 3 libraries @scope/[sdk/icons/components]. In rush, when I try to build only the icons one, it works. When I try to build the SDK that depends on icons, things start to break.

Here's the package.json for the SDK library:

"peerDependencies": {
    "@scope/icons": "workspace:*"
},
"devDependencies": {
    "@scope/icons": "workspace:*",

After trying to run rush build, I get the error:

------------------------------------------------------------------------------
Building entry point '@scope/sdk/routes'
------------------------------------------------------------------------------
- Compiling with Angular sources in Ivy partial compilation mode.
✖ Compiling with Angular sources in Ivy partial compilation mode.
../../../../icons/projects/scope/icons/src/lib/icon/icon/icon.component.html:3:9 - error NG8001: 'scp-hero-icon' is not a known element:
1. If 'scp-hero-icon' is an Angular component, then verify that it is part of this module.
2. If 'scp-hero-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3         
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  ../../../../icons/projects/scope/icons/src/lib/icon/icon/icon.component.ts:12:18
    12     templateUrl: './icon.component.html',
                        ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component IconComponent.
../../../../icons/projects/scope/icons/src/lib/icon/icon/icon.component.html:3:24 - error NG8002: Can't bind to 'name' since it isn't a known property of 'scp-hero-icon'.
1. If 'scp-hero-icon' is an Angular component and it has 'name' input, then verify that it is part of this module.
2. If 'scp-hero-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

3         
              ~~~~~~~~~~~~~~~

  ../../../../icons/projects/scope/icons/src/lib/icon/icon/icon.component.ts:12:18
    12     templateUrl: './icon.component.html',
                        ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component IconComponent.
../../../../icons/projects/scope/icons/src/lib/icon/icon/icon.component.html:4:29 - error NG8002: Can't bind to 'removeDefaultClasses' since it isn't a known property of 'scp-hero-icon'.
1. If 'scp-hero-icon' is an Angular component and it has 'removeDefaultClasses' input, then verify that it is part of this module.
2. If 'scp-hero-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

4             [color]="color" [removeDefaultClasses]="removeDefaultClasses" [customClasses]="customClasses">
                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  ../../../../icons/projects/scope/icons/src/lib/icon/icon/icon.component.ts:12:18
    12     templateUrl: './icon.component.html',
                        ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component IconComponent.
../../../../icons/projects/scope/icons/src/lib/icon/icon/icon.component.html:4:75 - error NG8002: Can't bind to 'customClasses' since it isn't a known property of 'scp-hero-icon'.
1. If 'scp-hero-icon' is an Angular component and it has 'customClasses' input, then verify that it is part of this module.
2. If 'scp-hero-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

4             [color]="color" [removeDefaultClasses]="removeDefaultClasses" [customClasses]="customClasses">
                                                                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  ../../../../icons/projects/scope/icons/src/lib/icon/icon/icon.component.ts:12:18
    12     templateUrl: './icon.component.html',
                        ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component IconComponent.
../../../../icons/projects/scope/icons/src/lib/icon/icon/icon.component.html:7:9 - error NG8001: 'scp-tabler-icon' is not a known element:
1. If 'scp-tabler-icon' is an Angular component, then verify that it is part of this module.
2. If 'scp-tabler-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

7         
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  ../../../../icons/projects/scope/icons/src/lib/icon/icon/icon.component.ts:12:18
    12     templateUrl: './icon.component.html',
                        ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component IconComponent.
../../../../icons/projects/scope/icons/src/lib/icon/icon/icon.component.html:7:26 - error NG8002: Can't bind to 'name' since it isn't a known property of 'scp-tabler-icon'.
1. If 'scp-tabler-icon' is an Angular component and it has 'name' input, then verify that it is part of this module.
2. If 'scp-tabler-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

7         
              ~~~~~~~~~~~~~~~

  ../../../../icons/projects/scope/icons/src/lib/icon/icon/icon.component.ts:12:18
    12     templateUrl: './icon.component.html',
                        ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component IconComponent.
../../../../icons/projects/scope/icons/src/lib/icon/icon/icon.component.html:8:29 - error NG8002: Can't bind to 'removeDefaultClasses' since it isn't a known property of 'scp-tabler-icon'.
1. If 'scp-tabler-icon' is an Angular component and it has 'removeDefaultClasses' input, then verify that it is part of this module.
2. If 'scp-tabler-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

8             [color]="color" [removeDefaultClasses]="removeDefaultClasses" [customClasses]="customClasses">
                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  ../../../../icons/projects/scope/icons/src/lib/icon/icon/icon.component.ts:12:18
    12     templateUrl: './icon.component.html',
                        ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component IconComponent.
../../../../icons/projects/scope/icons/src/lib/icon/icon/icon.component.html:8:75 - error NG8002: Can't bind to 'customClasses' since it isn't a known property of 'scp-tabler-icon'.
1. If 'scp-tabler-icon' is an Angular component and it has 'customClasses' input, then verify that it is part of this module.
2. If 'scp-tabler-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

8             [color]="color" [removeDefaultClasses]="removeDefaultClasses" [customClasses]="customClasses">
                                                                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  ../../../../icons/projects/scope/icons/src/lib/icon/icon/icon.component.ts:12:18
    12     templateUrl: './icon.component.html',
                        ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component IconComponent.
../../../../icons/projects/scope/icons/src/lib/icon/base-icon.component.html:2:30 - error NG8002: Can't bind to 'ngClass' since it isn't a known property of 'span'.

2     
                               ~~~~~~~~~~~~~~~~~~~

  ../../../../icons/projects/scope/icons/src/lib/icon/hero-icon/hero-icon.component.ts:11:18
    11     templateUrl: '../base-icon.component.html',
                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeroIconComponent.
../../../../icons/projects/scope/icons/src/lib/icon/base-icon.component.html:2:30 - error NG8002: Can't bind to 'ngClass' since it isn't a known property of 'span'.

2     
                               ~~~~~~~~~~~~~~~~~~~

  ../../../../icons/projects/scope/icons/src/lib/icon/tabler-icon/tabler-icon.component.ts:9:18
    9     templateUrl: '../base-icon.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component TablerIconComponent.
../../../../icons/projects/scope/icons/src/lib/scp-icons.module.ts:13:9 - error NG3004: Unable to import class HeroIconComponent.
  The file /Users/eestein/Documents/dev/scope/scope-sdk-ng/libraries/icons/projects/scope/icons/src/lib/icon/hero-icon/hero-icon.component.ts is outside of the configured 'rootDir'.

13         HeroIconComponent,
           ~~~~~~~~~~~~~~~~~

  ../../../../icons/projects/scope/icons/src/lib/icon/hero-icon/hero-icon.component.ts:9:1
      9 @Component({
        ~~~~~~~~~~~~
     10     selector: 'scp-hero-icon',
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    ... 
     48     }
        ~~~~~
     49 }
        ~
    The class is declared here.
routes/src/scp-routes.module.ts:15:9 - error NG6002: 'ScpIconsModule' does not appear to be an NgModule class.

15         ScpIconsModule
           ~~~~~~~~~~~~~~

  ../../../../icons/projects/scope/icons/src/lib/scp-icons.module.ts:21:14
    21 export class ScpIconsModule {}
                    ~~~~~~~~~~~~~~
    Is it missing an @NgModule annotation?

Here's the rush.json:

{
    "packageName": "@scope/icons",
    "projectFolder": "libraries/icons/projects/scope/icons",
    "shouldPublish": true,
    "publishFolder": "dist/@scope/icons"
},
{
    "packageName": "@scope/sdk",
    "projectFolder": "libraries/sdk/projects/scope/sdk",
    "shouldPublish": true,
    "publishFolder": "dist/@scope/sdk"
},
{
    "packageName": "@scope/components",
    "projectFolder": "libraries/components/projects/scope/components",
    "shouldPublish": true,
    "publishFolder": "dist/@scope/components"
}

I created 3 applications, one for each library. So they should be completely independent.

Any ideas on what's wrong here?

Node: 18.19.1
Rush: 5.125.1
Angular: 18.0.1

I tried to build the project using rush

Another related question with no answer: rush setup angular monorepo with libs

Can't build angular libraries with rush

Answers (0)

Related Questions

Can&#39;t build angular libraries with rush

Answers (0)

Related Questions

Can't build angular libraries with rush