0

Имеется приложение. Сделано по принципу 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

6
  • Так а где ты этот можуль импортируешь?
    – Grundy
    1 дек 2017 в 13:49
  • SharedModule в котором нужный мне компонент, я импортирую в другой модуль в котором хочу использовать данный компонент. имеется компонент_1, он импортирован в шеред модуль, шеред модуль импортирую в модуль_2(где лежит компонент_2), и собственно в компонент_2 я пытаюсь вставить селектор компонент_1
    – Maxim
    1 дек 2017 в 14:15
  • не видно этого в приведенном коде
    – Grundy
    1 дек 2017 в 14:15
  • добавил описание
    – Maxim
    1 дек 2017 в 14:20
  • я уже пробовал и не просто компонент создавать а модуль с компонентом, в него импортировать и экспортировать компонент. далее этот модуль-компонент, импортирую в нужный мне другой модуль2 и в текущем компоненте модуля2 вывожу комонент1. но не получилось.
    – Maxim
    1 дек 2017 в 14:29

1 ответ 1

0

Что бы иметь возможность подключать компонент в разные модули, необходимо (как один из вариантов) - создать общий модуль (SharedModule)

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {TestCoComponent} from '../../components/test-co/test-co.component';

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [
        TestCoComponent
    ],
    exports: [
        TestCoComponent
    ]
})
export class SharedModule {
}

и в нем подключать все нужные вам компоненты, далее SharedModule импортировать в другие модуль которые являются родителем компоненты в котором нам необходимо вывести инфу.

import { NgModule } from '@angular/core';
import { HomeComponent } from "app/pages/home/home.component";

import { homeRouter } from './home.router';
import {SharedModule} from '../../modules/shared/shared.module';

@NgModule({
  declarations: [ HomeComponent ],
  imports: [ homeRouter, SharedModule ]
})

export class HomeModule {}

Компонент модуля HomeModule

<div>
    <app-test-co></app-test-co> `<--- вывод инфы "розшареного` компонента"
  <div>Home Component MAIN PAGE</div>
  <div>Open the chrome dev tool and go to Network tab.
    Navigate to other page to see lazy load module works. You will see it load the *.chunk.js file when you visit that page for forst time.</div>
</div>

Не знаю почему с первого раза не сработал, хотя пробовал так же. "Утро вечера мудренее" сделал за пару минут. Спасибо источнику где все доступно описано и так же как сервис розшарить.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.