Angular SharedModule declarations not work

Question

I use EditableComponent from EditableComponent Link

declarations [EditableComponent,ViewModeDirective,EditModeDirective,EditableOnEnterDirective] in appModule have work

but

declarations [EditableComponent,ViewModeDirective,EditModeDirective,EditableOnEnterDirective] in SharedModule

imports[SharedModule] in appModule not work

module SharedModule

import { NgModule } from '@angular/core';

import { EditableComponent } from './table-edittable/editable.component';
import { ViewModeDirective } from './table-edittable/view-mode.directive';
import { EditModeDirective } from './table-edittable/edit-mode.directive';
import { EditableOnEnterDirective } from './table-edittable/editable-on-enter.directive';

@NgModule({
  declarations: [EditableComponent,ViewModeDirective,EditModeDirective,EditableOnEnterDirective],
  exports: [EditableComponent,ViewModeDirective,EditModeDirective,EditableOnEnterDirective]
})
export class SharedDeclarationsModule {
}

module appModule

import {SharedDeclarationsModule}from '../../layout-module/shared.declarstions.module';


@NgModule({
  declarations: [UserComponent,LeftsideComponent,DetailComponent,
    FocusableDirective,
  ],
  imports: [BrowserModule,HttpClientModule,CommonModule,
    SharedModule,
    MatCheckboxModule,
    FormsModule,
    MatGridListModule,
    SharedDeclarationsModule
  ],
  exports:[UserComponent,LeftsideComponent,DetailComponent,SharedDeclarationsModule]
})
export class UserModule { }

Which part is wrong?

Sorry for not describing 'not work' I represent with pictures:

not work img:

have work img:

Answer 1

You need to import CommonModule and export it. You can follow the documentation for creating a shared module. https://angular.io/guide/sharing-ngmodules

imports:      [ CommonModule ],