Блог

Добрый день,

Я разработал модал, который используется на 2 страницах: «страница поиска» и «страница статьи».

Я создал модуль для компонента, чтобы он мог использоваться на 2 страницах. На странице поиска это работает нормально. Добавление модуля в импорт страницы поиска search.module.ts позволяет ему работать идеально.

При использовании того же подхода на «странице статьи» это дает мне:

 NG0304: 'app-addtoplanner' is not a known element:
1. If 'app-addtoplanner' is an Angular component, then verify that it is part of this module.
2. If 'app-addtoplanner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
 

в консоли.

Я не вижу, чем эти двое отличаются друг от друга.

Модуль статей (не работает):

 import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ArticlesRoutingModule } from './articles-routing';
import { ArticleCardModule } from './article-card/article-card.module';
import { ArticleMainComponent } from './article-main/article-main.component';
import { CheckNewComponent } from './check-new/check-new.component';
import { UserHistoryComponent } from './user-history/user-history.component';
import { UniquePipe } from '../../../services/pipes/UniquePipe';
import { SafePipeModule } from '../../../services/pipes/SafePipe.module';
import { FormsModule } from '@angular/forms';
import { AddToPlannerModule } from './../../planner/add-to-planner.module';
import { JwPaginationModule } from 'jw-angular-pagination';
import { IsEditor, IsStudent } from '../../../services/can-activate-guard.service';
import { ArticleHeaderBarModule } from './articles-header-bar/article-header-bar.module';
import { WikiConverter } from '../../../services/wiki-converter.service';
import { BsModalService, ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    CommonModule,
    ArticlesRoutingModule,
    FormsModule,
    AddToPlannerModule,
    JwPaginationModule,
    SafePipeModule,
    ArticleCardModule,
    ArticleHeaderBarModule,
    ModalModule,

  ],
  declarations: [
    UniquePipe,
    ArticleMainComponent,
    CheckNewComponent,
    UserHistoryComponent,

  ],
  providers: [
    IsStudent,
    IsEditor,
    WikiConverter,
    BsModalService
  ]
})
export class ArticlesModule { }
 

Модуль поиска (рабочий):

 import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { SearchComponent } from './search.component'
import { SearchRoutingModule } from './search-routing'
import { ModalModule, BsModalService } from 'ngx-bootstrap/modal';
import { AddToPlannerModule } from './../../planner/add-to-planner.module'
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';

@NgModule({
  imports: [
    CommonModule,
    SearchRoutingModule,
    ModalModule,
    AddToPlannerModule,
    OwlDateTimeModule,
    OwlNativeDateTimeModule,
     CalendarModule.forRoot({
      provide: DateAdapter,
      useFactory: adapterFactory,
    }),
  ],
  declarations: [
   SearchComponent,
  ],
  providers: [BsModalService]
})
export class SearchModule { }
 

Модальный модуль:

 import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { AddToPlannerComponent } from './add-to-planner/add-to-planner.component';
import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    OwlDateTimeModule,
    OwlNativeDateTimeModule,
     CalendarModule.forRoot({
      provide: DateAdapter,
      useFactory: adapterFactory,
    }),
  ],
  declarations: [
    AddToPlannerComponent
  ],
  exports:
  [
    AddToPlannerComponent,
  ]
})
export class AddToPlannerModule {}
 

Спасибо,

вы пробовали импортировать AddToPlannerModule в ArticlesМодуль,это 2 разных модуля, вам нужно импортировать