Имеется приложение. Сделано по принципу lazy loading. Каждая страница это отдельный модуль. Данные модули не объедены нигде единым каким то модулем. Необходимо подключить один компонент в несколько модулей (таких компонентов будет в итоге несколько) При попытке это сделать, говорит что компонент не включен в данный модуль(пытался подключить его в главный модуль тоже),
Error: Template parse errors: 'app-app-card' is not a known element: 1. If 'app-card' is an Angular component, then verify that it is part of this module. 2. If 'app-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
если декларирую в текущий модуль(текущей страницы), он работает, но когда пытаюсь вывести на другой странице и соответственно импортирую там, то получаю ошибку(абсолютно логичную) что компонент подключен в несколько модулей. Как быть?
Попробовал в модуль в котом хочу вывести компонент, добавить
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
Ошибки пропали но содержимого компонента нет.
Главный модуль
/*Modules*/
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AuthorizationModule } from './modules/authorization/authorization.module';
import { ToasterModule, ToasterService } from 'angular2-toaster';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
import { SidebarModule } from 'ng-sidebar';
/*3rd party components*/
import { AppComponent } from './app.component';
/*services*/
import { Ng2Webstorage } from 'ng2-webstorage';
import { appRouter } from './app.router';
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
/*Import containers*/
import {
FullLayout,
SimpleLayout,
AuthLayout
} from './containers';
const APP_CONTAINERS = [
FullLayout,
SimpleLayout,
AuthLayout
];
/*Import app components*/
import {
AppAside,
AppBreadcrumbs,
AppFooter,
AppHeader,
AppSidebar,
AppSidebarFooter,
AppSidebarForm,
AppSidebarHeader
} from './components';
const APP_COMPONENTS = [
AppAside,
AppBreadcrumbs,
AppFooter,
AppHeader,
AppSidebar,
AppSidebarFooter,
AppSidebarForm,
AppSidebarHeader
];
/*Import directives*/
import {
AsideToggleDirective,
NAV_DROPDOWN_DIRECTIVES,
SIDEBAR_TOGGLE_DIRECTIVES
} from './directives';
import {HttpInterceptorService} from './services/http-interceptor.service';
import {CardService} from './services/card.service';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {TokenService} from './services/token.service';
import {MainRequestService} from './services/main-request.service';
import { AppCardComponent } from './components/app-card/app-card.component';
const APP_DIRECTIVES = [
AsideToggleDirective,
NAV_DROPDOWN_DIRECTIVES,
SIDEBAR_TOGGLE_DIRECTIVES
];
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
appRouter,
ToasterModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: createTranslateLoader,
deps: [HttpClient]
}
}),
AuthorizationModule,
Ng2Webstorage,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot(),
SidebarModule.forRoot(),
BrowserAnimationsModule
],
declarations: [
AppComponent,
...APP_CONTAINERS,
...APP_COMPONENTS,
...APP_DIRECTIVES,
AppCardComponent,
],
providers: [
{provide: HTTP_INTERCEPTORS, useClass: HttpInterceptorService, multi: true},
CardService,
TokenService,
MainRequestService,
],
bootstrap: [AppComponent],
})
export class AppModule {
}
Роутинг(собственно там модули и "подключаются")
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './modules/authorization/_services/index';
/*Import Containers*/
import {
FullLayout,
AuthLayout
} from './containers';
export const router: Routes = [
{
path: '',
component: FullLayout,
data: {
title: 'Головна'
},
children: [
{
path: '',
canActivate: [AuthGuard],
loadChildren: 'app/pages/home/home.module#HomeModule',
},
{
path: 'gallery',
canActivate: [AuthGuard],
loadChildren: 'app/pages/gallery/gallery.module#GalleryModule',
},
{
path: 'about',
canActivate: [AuthGuard],
loadChildren: 'app/pages/about/about.module#AboutModule',
},
{
path: 'settings',
canActivate: [AuthGuard],
loadChildren: 'app/pages/settings/settings.module#SettingsModule',
},
{
path: 'balance-fill',
canActivate: [AuthGuard],
loadChildren: 'app/pages/balance-fill/balance-fill.module#BalanceFillModule',
},
{
path: 'withdrawal-money',
canActivate: [AuthGuard],
loadChildren: 'app/pages/withdrawal-money/withdrawal-money.module#WithdrawalMoneyModule',
},
{
path: 'history',
canActivate: [AuthGuard],
loadChildren: 'app/pages/history/history.module#HistoryModule',
},
{
path: 'set-bill',
canActivate: [AuthGuard],
loadChildren: 'app/pages/set-bill/set-bill.module#SetBillModule',
},
{
path: 'wallet',
canActivate: [AuthGuard],
loadChildren: 'app/pages/wallet/wallet.module#WalletModule',
}
]
}
];
export const appRouter: ModuleWithProviders = RouterModule.forRoot(router);
Решил создать шеред модуль. В котором задекларирую компонент и експортирую, далее буду подключать этот модуль в необходимых мне модулях и их компонентах. Но не сработало пока что
Шеред модуль
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
/*components*/
import {AppCardComponent} from '../../components/app-card/app-card.component';
@NgModule({
imports: [
CommonModule
],
declarations: [
AppCardComponent
],
exports: [
AppCardComponent
]
})
export class SharedModule {
}
Модуль компонента где хочу использовать
import { NgModule } from '@angular/core';
import { BalanceFillComponent } from "app/pages/balance-fill/balance-fill.component";
import { balanceFillRouter } from './balance-fill.router';
import { FormsModule } from '@angular/forms';
import {SharedModule} from '../shared.module';
@NgModule({
declarations: [ BalanceFillComponent ],
imports: [
balanceFillRouter,
FormsModule,
SharedModule
]
})
export class BalanceFillModule {}
компонент который нужно "розшарить"
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-app-card',
templateUrl: './app-card.component.html',
styleUrls: ['./app-card.component.scss']
})
export class AppCardComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
и в шаблон BalanceFillComponent
вставляю селектор компонента app-app-card