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

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.

Continue reading...