Angular 6 features two separate lazy loading modules that share a common component

Question

Angular 6 features two separate lazy loading modules that share a common component

I have a structure as follows:

---app.module
-------child1.module
-------child2.module

Both child modules use a common component (app-film). I declared the component in app.module, but Angular is still showing an error.

Can't bind to 'film' since it isn't a known property of 'app-film'.
1. If 'app-film' is an Angular component and has a 'film' input, verify that it is part of this module.
2. If 'app-film' is a Web Component, add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

View the code on stackblitz here: https://stackblitz.com/github/ms-dosx86/films

angular typescript

Answer 1

Answer №1

If you have nested modules, it's important to note that components defined in the parent module may not be visible to the nested ones. To solve this issue, you can create a SharedModule as shown below:

@NgModule({
   declarations: [ AppFilmComponent ],
   exports: [ AppFilmComponent ]
})
export class SharedModule { }

Then, export the AppFilmComponent from the SharedModule and import the SharedModule into each child module separately.

@NgModule({
   ...
   imports: [ SharedModule ]
   ...
})
export class Child1Module { }

Similarly,

@NgModule({
   ...
   imports: [ SharedModule ]
   ...
})
export class Child2Module { }

Answer 2

If you have nested modules, it's important to note that components defined in the parent module may not be visible to the nested ones. To solve this issue, you can create a SharedModule as shown below:

@NgModule({
   declarations: [ AppFilmComponent ],
   exports: [ AppFilmComponent ]
})
export class SharedModule { }

Then, export the AppFilmComponent from the SharedModule and import the SharedModule into each child module separately.

@NgModule({
   ...
   imports: [ SharedModule ]
   ...
})
export class Child1Module { }

Similarly,

@NgModule({
   ...
   imports: [ SharedModule ]
   ...
})
export class Child2Module { }

Angular 6 features two separate lazy loading modules that share a common component

Answer №1

Similar questions

Retrieve the time zone setting from either my browser or server, and then incorporate it into angular2-highcharts

Webpack focuses solely on serving HTML files, neglecting to deliver the underlying code

Piwik causing runtime errors in Angulartics2 build

Using *ngIf in Angular to display a list of items only when the length is greater than 0

Tips for customizing the color scheme of background, rows, row selection, and headers in Angular 4 using Bootstrap 4 data tables

Converting text data into JSON format using JavaScript

Is there a way to retrieve the operating system user name using Angular 6?

Utilize Immer and ES6 to effortlessly update a nested object within the Redux store by manipulating normalized data structure

Retrieving Data from API in Angular 6/7 upon Navigating Back to Previously Visited Page

Issue: Incorrect parameter supplied for pipe 'AsyncPipe' in MatTable Angular 11

Concealing tab bars on Ionic 2 secondary pages

Utilizing JSDoc for establishing an index signature on a class in ES6

Convert the existing jQuery function to Angular 9 syntax

Attempt to re-establish connection to server callback in Angular 2 upon encountering failure

Synchronizing Angular icons with HTML text

Setting a background image in vanilla-extract/css is a straightforward process that can instantly enhance

Using TypeScript to destructure by providing types

What is the reason behind eslint not permitting the rule option @typescript-eslint/consistent-type-imports?

React Native is throwing a TypeError because it is encountering an undefined object

Detect Empty Fields as Invalid in Angular 2+ Form Validation