I have a shared component called GoComponent that I want to use in 2 modules: FindPageModule and AddPageModule.
When I add it in the declarations of "FindPageModule" and in my "AddPageModule" I get an error:
find:21 Error: (SystemJS) Type GoComponent is part of the declarations of 2 modules: FindPageModule and AddPageModule! Please consider moving GoComponent to a higher module that imports FindPageModule and AddPageModule. You can also create a new NgModule that exports and includes GoComponent then import that NgModule in FindPageModule and AddPageModule.
So I take it out of them both and add it in AppModule declarations, which does import FindPageModule and AddPageModule, and I get an error in a component called "FindFormComponent" which is in the declarations of FindPageModule and uses "GoComponent":
zone.js:355 Unhandled Promise rejection: Template parse errors:
'go' is not a known element:
1. If 'go' is an Angular component, then verify that it is part of this module.
2. If 'go' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" style="height:64px;">
<div style="position: relative; display: inline-block; width: 100%;">
[ERROR ->]<go></go>
</div>
</div>
"): FindFormComponent@101:4 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
'go' is not a known element:
1. If 'go' is an Angular component, then verify that it is part of this module.
2. If 'go' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" style="height:64px;">
<div style="position: relative; display: inline-block; width: 100%;">
[ERROR ->]<go></go>
</div>
</div>
"): FindFormComponent@101:4
How do I let components such as FindFormComponent that are declared in FindPageModule use GoComponent and also let components declared by AddPageModule use GoComponent?
So now, you need to follow some simple steps to use multiple modules in an Angular application. Create a simple application using Angular CLI. If you are going to use Angular for the first time, click here. I am going to create an application which contains three modules: App, Employee, Admin, Home.
Shared modules are an ideal spot to declare components in order to make them reusable. You won't have to re-import the same components in every module—you'll just import the shared module. In this guide, you will learn how to use shared modules to organize your code more effectively.
The Component is a fundamental block of Angular and multiple components will make up your application. A module can be a library for another module. For instance, the angular2/core library which is a primary Angular library module will be imported by another component.
Yes, components can be declared only in one module, and nor are their access inherited in any way, meaning declaring it in the main app module will not give you access to it in any other module.
If you have a component that is used by other modules, generally they way to go is to put it in a shared module
Include component in a shared module:
@NgModule({
declarations: [ SharedComponent ],
exports: [ SharedComponent ]
})
export class SharedModule {}
How to use the shared module elsewhere:
@NgModule({
imports: [ SharedModule ]
})
class ModuleWithComponentThatUsesSharedComponent {}
See Also
If you want to use the GoComponent across multiple modules, you should be created a "shared" module and add the GoComponent to the shared module's exports. Then you import shared module into your other modules where you want to use this component.
Find out more information at here
Hope this help!
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