Why don't my angular components realise that it's part of a module?

Question

Disclaimer: I may be wrong about my understanding of this seeing as I have only been using Angular for little over a year (Angular 16.0.0).

Code

I have this component (SidebarComponent):

@Component({ selector: 'app-sidebar', templateUrl: './sidebar.component.html', styleUrls: ['./sidebar.component.scss'] }) export class SidebarComponent implements OnInit { ... // Not very relevant to the issue }

This SidebarComponent is declared as part of a module (ShellModule):

@NgModule({ declarations: [ ..., SidebarComponent, ... ], imports: [ CommonModule, RouterModule, ... // Other necessary modules that are used in the sidebar TranslatePipe, ], exports: [ ..., SidebarComponent, ... ], schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class ShellModule {}

Issue

What I expect here is that the sidebar component can access imports from the module that declares it and that includes exports from RouterModule and TranslatePipe.

Note: The solution to import TranslateModule(.forChild()) doesn't really work, I tried. Furthermore, I import the pipe only in other projects and it works dandy.

However, The errors i get are the following :

Error: src/app/components/shell/sidebar/sidebar.component.html:51:82 - error NG8004: No pipe found with name 'translate'. 51 {{'sidebar.' + sub_child.title | translate}} src/app/components/shell/sidebar/sidebar.component.ts:11:18 11 templateUrl: './sidebar.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component SidebarComponent. ---------------------------------- Error: src/app/components/shell/sidebar/sidebar.component.html:48:51 - error NG8002: Can't bind to 'routerLinkActiveOptions' since it isn't a known property of 'span'. 48 <span [routerLinkActiveOptions]="{exact: true}" class="sidemenu-link" src/app/components/shell/sidebar/sidebar.component.ts:11:18 11 templateUrl: './sidebar.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component SidebarComponent.

Along with other issues concerning other html tags like, mat-panel-tilte, mat-expansion-panel... Which I'm sure are included in the module's imports.

The reason why i'm suspicious of the component not realising that it's a part of a module and has access to its imports and not an issue of paths or architecture is because when I tried to make the component standalone and have the pipe as its import it actually worked.

Conclusion

I want to understand why this and many other (not all) components from the same module don't realise what is imported in the module and act as if they've never seen it. Also, if the standalone solution is actually the better way please let me know why because I'm still learning and would like to be better at this.

Naren Murali · Accepted Answer · 2025-02-21 11:43:52Z

My guess is you are adding ShellModule to the imports array of some module and then using SidebarComponent.

The component SidebarComponent is exported by ShellModule, If you import the ShellModule into another module and use it, then you should also export the dependencies of SidebarComponent, since only the exports array is visible to the module that uses ShellModule.

@NgModule({ declarations: [ ..., SidebarComponent, ... ], imports: [ CommonModule, RouterModule, ... // Other necessary modules that are used in the sidebar TranslatePipe, ], exports: [ ..., SidebarComponent, CommonModule, RouterModule, ... // Other necessary modules that are used in the sidebar TranslatePipe, ... ], schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class ShellModule {}

I'm not sure i follow. I do have ShellModule in AppModule.imports but even if I remove it the same issue remains. Also so far I haven't used that component anywhere, I'm still just setting up the structure of the project. Thanks though, I appreciate it <3
@WaelDghim have you tried adding the imports to exports array like my suggestion says? maybe that fixes it
I'm sorry for the late response but, yes I did try that. The issue is I still haven't used the component anywhere and it's throwing the error at build-time. But even with the components in the exports array, the issue remains.

AndreFDG · Accepted Answer · 2025-02-21 19:24:08Z

Your component inside the ShellModule is not a standalone component; it exists within the context of the ShellModule.

To use the SidebarComponent in other modules, you need to import the ShellModule in those modules.

It seems like there's some confusion about the concept of exporting components in Angular. When you export a component from a module, it doesn't make the component globally available—it simply allows other modules that import the ShellModule to use that component.

Yes I pretty much got that part but my issue is why isn't the component itself recognizing imported modules that have exported directives/pipes?

Collectives™ on Stack Overflow

Why don't my angular components realise that it's part of a module?

Code

Issue

Conclusion

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

Code

Issue

Conclusion

2 Answers 2

3 Comments

1 Comment

Related