Menu
I have two ng-module
I had loaded Repeat order through the lazy load.
Now I want to use Repeat order, inside dashboard as html
<app-repeatorderlist></app-repeatorderlist>
If I am doing same it is throwing me an error
'app-repeatorderlist' is not a known element: 1. If 'app-repeatorderlist' is an Angular component, then verify that it is part of this module. 2. If 'app-repeatorderlist' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to
And if I am adding it's reference on app.module then it's throwing error
Type RepeatorderlistComponent is part of the declarations of 2 modules: AppModule and repeatorderModule! Please consider moving RepeatorderlistComponent to a higher module that imports AppModule and repeatorderModule. You can also create a new NgModule that exports and includes RepeatorderlistComponent then import that NgModule in AppModule and repeatorderModule. Error: Type RepeatorderlistComponent is part of the declarations of 2 modules: AppModule and repeatorderModule! Please consider moving RepeatorderlistComponent to a higher module that imports AppModule and repeatorderModule. You can also create a new NgModule that exports and includes RepeatorderlistComponent then import that NgModule in AppModule and repeatorderModul
I can understand I have to create a new module(higher) but how can any body guide on same
995
define where we want to load our component in the template with the ng-template tag, define its view query through ViewChild decorator, which gives us access to the DOM and defines the container to which the component will be added, finally, dynamic import the component and add it to the container.
It is not directly possible to reuse components from lazy loaded modules that are used with RouterModule. forChild(routes) . By simply moving those components to another module which is not directly used for routing you can solve the problem.
To lazy load Angular modules, use loadChildren (instead of component ) in your AppRoutingModule routes configuration as follows. content_copy const routes: Routes = [ { path: 'items', loadChildren: () => import('./items/items.module').then(m => m.ItemsModule) } ];
To lazy load the component, we will use the import() method inside an async/await function. The above function first clears the container; otherwise, on every click of the button, the new instance of GreetComponent would be added in the container.
Here is a working example I just made to show you how it is setup.
AppModule imports the MainModule (similar to your DashboardModule).ReapeatOrder module is lazy-loaded and can be navigated to from the MainModule
MainModule and ReapeatOrderuse the shared components in their templates.
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
