Mixing
'app-layout' is not a known element: how to share Component with different Modules
My application was working fine until I decided to go with lazy loading:
So, my shared component looks like this:
import { Component, Renderer2 } from '@angular/core';
export interface FormModel {
captcha?: string;
}
@Component({
selector: 'app-layout',
templateUrl: './app-layout.component.html',
styleUrls: ['./app-layout.css']
})
export class FullLayoutComponent {
}
app-layout.component.ts
I am using this component in my Another component say school-home.component.html like this:
<app-layout>
</app-layout>
and it was working fine until I created a Module school-home.module.ts like this:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SchoolhomeRoutingModule } from './school-home.routing.module';
import { SchoolHomeComponent } from './school-home.component';
import { FormsModule } from '@angular/forms';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [CommonModule, SchoolhomeRoutingModule, FormsModule, ModalModule ],
declarations: [SchoolHomeComponent]
})
export class SchoolhomeModule {}
Now, I get this error:
app-layout' is not a known element:
1. If 'app-layout' is an Angular component, then verify that it is part of this module.
2. If 'app-layout' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<app-layout>
If I try to add this component to school-home module:
This happens:
Uncaught (in promise): Error: Type FullLayoutComponent is part of the declarations of 2 modules: AppModule and SchoolhomeModule! Please consider moving FullLayoutComponent to a higher module that imports AppModule and SchoolhomeModule. You can also create a new NgModule that exports and includes FullLayoutComponent then import that NgModule in AppModule and SchoolhomeModule.
I am unable to get from error about what implementation is required. Please suggest some workaround.
angular angular6
asked Nov 22 '18 at 3:54
JayJay
347
|
show 5 more comments
My application was working fine until I decided to go with lazy loading:
So, my shared component looks like this:
import { Component, Renderer2 } from '@angular/core';
export interface FormModel {
captcha?: string;
}
@Component({
selector: 'app-layout',
templateUrl: './app-layout.component.html',
styleUrls: ['./app-layout.css']
})
export class FullLayoutComponent {
}
app-layout.component.ts
I am using this component in my Another component say school-home.component.html like this:
<app-layout>
</app-layout>
and it was working fine until I created a Module school-home.module.ts like this:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SchoolhomeRoutingModule } from './school-home.routing.module';
import { SchoolHomeComponent } from './school-home.component';
import { FormsModule } from '@angular/forms';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [CommonModule, SchoolhomeRoutingModule, FormsModule, ModalModule ],
declarations: [SchoolHomeComponent]
})
export class SchoolhomeModule {}
Now, I get this error:
app-layout' is not a known element:
1. If 'app-layout' is an Angular component, then verify that it is part of this module.
2. If 'app-layout' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<app-layout>
If I try to add this component to school-home module:
This happens:
Uncaught (in promise): Error: Type FullLayoutComponent is part of the declarations of 2 modules: AppModule and SchoolhomeModule! Please consider moving FullLayoutComponent to a higher module that imports AppModule and SchoolhomeModule. You can also create a new NgModule that exports and includes FullLayoutComponent then import that NgModule in AppModule and SchoolhomeModule.
I am unable to get from error about what implementation is required. Please suggest some workaround.
angular angular6
asked Nov 22 '18 at 3:54
JayJay
347
2 components are in the same moule or different?
– Asanka
Nov 22 '18 at 3:56
I have mentioned only one component i.e. FullLayout in app.module and in SchoolhomeModule, fullLayout and Schoolhome both are declared.
– Jay
Nov 22 '18 at 4:04
Your 2 component in 2 modules that's why this error occured.
– Asanka
Nov 22 '18 at 4:07
You cannot declare 2 components in 2 modules. Declare in App.module and use it everywhere or declare in child module and export the component, then Import the module in app.module.ts
– Suresh Kumar Ariya
Nov 22 '18 at 4:09
@jay where is applayout component imported?
– Asanka
Nov 22 '18 at 4:11
|
show 5 more comments
My application was working fine until I decided to go with lazy loading:
So, my shared component looks like this:
import { Component, Renderer2 } from '@angular/core';
export interface FormModel {
captcha?: string;
}
@Component({
selector: 'app-layout',
templateUrl: './app-layout.component.html',
styleUrls: ['./app-layout.css']
})
export class FullLayoutComponent {
}
app-layout.component.ts
I am using this component in my Another component say school-home.component.html like this:
<app-layout>
</app-layout>
and it was working fine until I created a Module school-home.module.ts like this:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SchoolhomeRoutingModule } from './school-home.routing.module';
import { SchoolHomeComponent } from './school-home.component';
import { FormsModule } from '@angular/forms';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [CommonModule, SchoolhomeRoutingModule, FormsModule, ModalModule ],
declarations: [SchoolHomeComponent]
})
export class SchoolhomeModule {}
Now, I get this error:
app-layout' is not a known element:
1. If 'app-layout' is an Angular component, then verify that it is part of this module.
2. If 'app-layout' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<app-layout>
If I try to add this component to school-home module:
This happens:
Uncaught (in promise): Error: Type FullLayoutComponent is part of the declarations of 2 modules: AppModule and SchoolhomeModule! Please consider moving FullLayoutComponent to a higher module that imports AppModule and SchoolhomeModule. You can also create a new NgModule that exports and includes FullLayoutComponent then import that NgModule in AppModule and SchoolhomeModule.
I am unable to get from error about what implementation is required. Please suggest some workaround.
angular angular6
asked Nov 22 '18 at 3:54
JayJay
347
My application was working fine until I decided to go with lazy loading:
So, my shared component looks like this:
import { Component, Renderer2 } from '@angular/core';
export interface FormModel {
captcha?: string;
}
@Component({
selector: 'app-layout',
templateUrl: './app-layout.component.html',
styleUrls: ['./app-layout.css']
})
export class FullLayoutComponent {
}
app-layout.component.ts
I am using this component in my Another component say school-home.component.html like this:
<app-layout>
</app-layout>
and it was working fine until I created a Module school-home.module.ts like this:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SchoolhomeRoutingModule } from './school-home.routing.module';
import { SchoolHomeComponent } from './school-home.component';
import { FormsModule } from '@angular/forms';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [CommonModule, SchoolhomeRoutingModule, FormsModule, ModalModule ],
declarations: [SchoolHomeComponent]
})
export class SchoolhomeModule {}
Now, I get this error:
app-layout' is not a known element:
1. If 'app-layout' is an Angular component, then verify that it is part of this module.
2. If 'app-layout' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<app-layout>
If I try to add this component to school-home module:
This happens:
Uncaught (in promise): Error: Type FullLayoutComponent is part of the declarations of 2 modules: AppModule and SchoolhomeModule! Please consider moving FullLayoutComponent to a higher module that imports AppModule and SchoolhomeModule. You can also create a new NgModule that exports and includes FullLayoutComponent then import that NgModule in AppModule and SchoolhomeModule.
I am unable to get from error about what implementation is required. Please suggest some workaround.
angular angular6
angular angular6
asked Nov 22 '18 at 3:54
JayJay
347
asked Nov 22 '18 at 3:54
JayJay
347
asked Nov 22 '18 at 3:54
JayJay
347
asked Nov 22 '18 at 3:54
JayJay
347
asked Nov 22 '18 at 3:54
JayJay
347
347
2 components are in the same moule or different?
– Asanka
Nov 22 '18 at 3:56
I have mentioned only one component i.e. FullLayout in app.module and in SchoolhomeModule, fullLayout and Schoolhome both are declared.
– Jay
Nov 22 '18 at 4:04
Your 2 component in 2 modules that's why this error occured.
– Asanka
Nov 22 '18 at 4:07
You cannot declare 2 components in 2 modules. Declare in App.module and use it everywhere or declare in child module and export the component, then Import the module in app.module.ts
– Suresh Kumar Ariya
Nov 22 '18 at 4:09
@jay where is applayout component imported?
– Asanka
Nov 22 '18 at 4:11
|
show 5 more comments
2 components are in the same moule or different?
– Asanka
Nov 22 '18 at 3:56
I have mentioned only one component i.e. FullLayout in app.module and in SchoolhomeModule, fullLayout and Schoolhome both are declared.
– Jay
Nov 22 '18 at 4:04
Your 2 component in 2 modules that's why this error occured.
– Asanka
Nov 22 '18 at 4:07
You cannot declare 2 components in 2 modules. Declare in App.module and use it everywhere or declare in child module and export the component, then Import the module in app.module.ts
– Suresh Kumar Ariya
Nov 22 '18 at 4:09
@jay where is applayout component imported?
– Asanka
Nov 22 '18 at 4:11
2 components are in the same moule or different?
– Asanka
Nov 22 '18 at 3:56
2 components are in the same moule or different?
– Asanka
Nov 22 '18 at 3:56
I have mentioned only one component i.e. FullLayout in app.module and in SchoolhomeModule, fullLayout and Schoolhome both are declared.
– Jay
Nov 22 '18 at 4:04
I have mentioned only one component i.e. FullLayout in app.module and in SchoolhomeModule, fullLayout and Schoolhome both are declared.
– Jay
Nov 22 '18 at 4:04
Your 2 component in 2 modules that's why this error occured.
– Asanka
Nov 22 '18 at 4:07
Your 2 component in 2 modules that's why this error occured.
– Asanka
Nov 22 '18 at 4:07
You cannot declare 2 components in 2 modules. Declare in App.module and use it everywhere or declare in child module and export the component, then Import the module in app.module.ts
– Suresh Kumar Ariya
Nov 22 '18 at 4:09
You cannot declare 2 components in 2 modules. Declare in App.module and use it everywhere or declare in child module and export the component, then Import the module in app.module.ts
– Suresh Kumar Ariya
Nov 22 '18 at 4:09
@jay where is applayout component imported?
– Asanka
Nov 22 '18 at 4:11
@jay where is applayout component imported?
– Asanka
Nov 22 '18 at 4:11
|
show 5 more comments
2 Answers
2
active
oldest
votes
Approach 1:
First remove declaration of FullLayoutComponent from SchoolhomeModule.
Then create a module file for app-layout component and in that export your component like this.
exports: [
FullLayoutComponent
]
After that import the module in SchoolhomeModule import section.
You need to import module not component in this scenario
Approach 2: You need to move FullLayoutComponent to a higher hierarchy module that imports AppModule and SchoolhomeModule
This is because both of your component are not under same module so your SchoolhomeModule cannot get reference to FullLayoutComponent
answered Nov 22 '18 at 4:11
GautamGautam
335
Got your point, I was unable to fully understand the error message. Though it is pretty much clear. Let me implement the first approach.
– Jay
Nov 22 '18 at 4:16
I have mentioned it like this in index.ts file for that app-layout component export * from './app-layout.component';
– Jay
Nov 22 '18 at 4:17
isn't it serve the purpose?
– Jay
Nov 22 '18 at 4:17
@Jay In this case you can define route in your parent module and this will solve your problem.
– Gautam
Nov 22 '18 at 4:31
add a comment |
Import your module which contains the FullLayoutComponent to the SchoolhomeModule.
imports: [layoutModule]
And In the module which contain the FullLayoutComponent add the exports as Gautam says.
exports: [ FullLayoutComponent]
answered Nov 22 '18 at 4:20
AsankaAsanka
1,085416
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53423640%2fapp-layout-is-not-a-known-element-how-to-share-component-with-different-modul%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Approach 1:
First remove declaration of FullLayoutComponent from SchoolhomeModule.
Then create a module file for app-layout component and in that export your component like this.
exports: [
FullLayoutComponent
]
After that import the module in SchoolhomeModule import section.
You need to import module not component in this scenario
Approach 2: You need to move FullLayoutComponent to a higher hierarchy module that imports AppModule and SchoolhomeModule
This is because both of your component are not under same module so your SchoolhomeModule cannot get reference to FullLayoutComponent
answered Nov 22 '18 at 4:11
GautamGautam
335
Got your point, I was unable to fully understand the error message. Though it is pretty much clear. Let me implement the first approach.
– Jay
Nov 22 '18 at 4:16
I have mentioned it like this in index.ts file for that app-layout component export * from './app-layout.component';
– Jay
Nov 22 '18 at 4:17
isn't it serve the purpose?
– Jay
Nov 22 '18 at 4:17
@Jay In this case you can define route in your parent module and this will solve your problem.
– Gautam
Nov 22 '18 at 4:31
add a comment |
Approach 1:
First remove declaration of FullLayoutComponent from SchoolhomeModule.
Then create a module file for app-layout component and in that export your component like this.
exports: [
FullLayoutComponent
]
After that import the module in SchoolhomeModule import section.
You need to import module not component in this scenario
Approach 2: You need to move FullLayoutComponent to a higher hierarchy module that imports AppModule and SchoolhomeModule
This is because both of your component are not under same module so your SchoolhomeModule cannot get reference to FullLayoutComponent
answered Nov 22 '18 at 4:11
GautamGautam
335
Got your point, I was unable to fully understand the error message. Though it is pretty much clear. Let me implement the first approach.
– Jay
Nov 22 '18 at 4:16
I have mentioned it like this in index.ts file for that app-layout component export * from './app-layout.component';
– Jay
Nov 22 '18 at 4:17
isn't it serve the purpose?
– Jay
Nov 22 '18 at 4:17
@Jay In this case you can define route in your parent module and this will solve your problem.
– Gautam
Nov 22 '18 at 4:31
add a comment |
Approach 1:
First remove declaration of FullLayoutComponent from SchoolhomeModule.
Then create a module file for app-layout component and in that export your component like this.
exports: [
FullLayoutComponent
]
After that import the module in SchoolhomeModule import section.
You need to import module not component in this scenario
Approach 2: You need to move FullLayoutComponent to a higher hierarchy module that imports AppModule and SchoolhomeModule
This is because both of your component are not under same module so your SchoolhomeModule cannot get reference to FullLayoutComponent
answered Nov 22 '18 at 4:11
GautamGautam
335
Approach 1:
First remove declaration of FullLayoutComponent from SchoolhomeModule.
Then create a module file for app-layout component and in that export your component like this.
exports: [
FullLayoutComponent
]
After that import the module in SchoolhomeModule import section.
You need to import module not component in this scenario
Approach 2: You need to move FullLayoutComponent to a higher hierarchy module that imports AppModule and SchoolhomeModule
This is because both of your component are not under same module so your SchoolhomeModule cannot get reference to FullLayoutComponent
answered Nov 22 '18 at 4:11
GautamGautam
335
edited Nov 22 '18 at 4:24
answered Nov 22 '18 at 4:11
GautamGautam
335
answered Nov 22 '18 at 4:11
GautamGautam
335
answered Nov 22 '18 at 4:11
GautamGautam
335
335
Got your point, I was unable to fully understand the error message. Though it is pretty much clear. Let me implement the first approach.
– Jay
Nov 22 '18 at 4:16
I have mentioned it like this in index.ts file for that app-layout component export * from './app-layout.component';
– Jay
Nov 22 '18 at 4:17
isn't it serve the purpose?
– Jay
Nov 22 '18 at 4:17
@Jay In this case you can define route in your parent module and this will solve your problem.
– Gautam
Nov 22 '18 at 4:31
add a comment |
Got your point, I was unable to fully understand the error message. Though it is pretty much clear. Let me implement the first approach.
– Jay
Nov 22 '18 at 4:16
I have mentioned it like this in index.ts file for that app-layout component export * from './app-layout.component';
– Jay
Nov 22 '18 at 4:17
isn't it serve the purpose?
– Jay
Nov 22 '18 at 4:17
@Jay In this case you can define route in your parent module and this will solve your problem.
– Gautam
Nov 22 '18 at 4:31
Got your point, I was unable to fully understand the error message. Though it is pretty much clear. Let me implement the first approach.
– Jay
Nov 22 '18 at 4:16
Got your point, I was unable to fully understand the error message. Though it is pretty much clear. Let me implement the first approach.
– Jay
Nov 22 '18 at 4:16
I have mentioned it like this in index.ts file for that app-layout component export * from './app-layout.component';
– Jay
Nov 22 '18 at 4:17
I have mentioned it like this in index.ts file for that app-layout component export * from './app-layout.component';
– Jay
Nov 22 '18 at 4:17
isn't it serve the purpose?
– Jay
Nov 22 '18 at 4:17
isn't it serve the purpose?
– Jay
Nov 22 '18 at 4:17
@Jay In this case you can define route in your parent module and this will solve your problem.
– Gautam
Nov 22 '18 at 4:31
@Jay In this case you can define route in your parent module and this will solve your problem.
– Gautam
Nov 22 '18 at 4:31
add a comment |
Import your module which contains the FullLayoutComponent to the SchoolhomeModule.
imports: [layoutModule]
And In the module which contain the FullLayoutComponent add the exports as Gautam says.
exports: [ FullLayoutComponent]
answered Nov 22 '18 at 4:20
AsankaAsanka
1,085416
add a comment |
Import your module which contains the FullLayoutComponent to the SchoolhomeModule.
imports: [layoutModule]
And In the module which contain the FullLayoutComponent add the exports as Gautam says.
exports: [ FullLayoutComponent]
answered Nov 22 '18 at 4:20
AsankaAsanka
1,085416
add a comment |
Import your module which contains the FullLayoutComponent to the SchoolhomeModule.
imports: [layoutModule]
And In the module which contain the FullLayoutComponent add the exports as Gautam says.
exports: [ FullLayoutComponent]
answered Nov 22 '18 at 4:20
AsankaAsanka
1,085416
Import your module which contains the FullLayoutComponent to the SchoolhomeModule.
imports: [layoutModule]
And In the module which contain the FullLayoutComponent add the exports as Gautam says.
exports: [ FullLayoutComponent]
answered Nov 22 '18 at 4:20
AsankaAsanka
1,085416
edited Nov 22 '18 at 4:27
answered Nov 22 '18 at 4:20
AsankaAsanka
1,085416
answered Nov 22 '18 at 4:20
AsankaAsanka
1,085416
answered Nov 22 '18 at 4:20
AsankaAsanka
1,085416
1,085416
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53423640%2fapp-layout-is-not-a-known-element-how-to-share-component-with-different-modul%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2 components are in the same moule or different?
– Asanka
Nov 22 '18 at 3:56
I have mentioned only one component i.e. FullLayout in app.module and in SchoolhomeModule, fullLayout and Schoolhome both are declared.
– Jay
Nov 22 '18 at 4:04
Your 2 component in 2 modules that's why this error occured.
– Asanka
Nov 22 '18 at 4:07
You cannot declare 2 components in 2 modules. Declare in App.module and use it everywhere or declare in child module and export the component, then Import the module in app.module.ts
– Suresh Kumar Ariya
Nov 22 '18 at 4:09
@jay where is applayout component imported?
– Asanka
Nov 22 '18 at 4:11