Угловой 5 с «ng4-auto-complete» выдает «StaticInjectorError (Platform: core) [AutoCompleteDirective -> ElementRef]»

Question

Я пытаюсь создать приложение Angular 5, я разделил его на mainModule с начальной загрузкой и вторичным модулем (называемый module1) без начальной загрузки (просто отдельный модуль для использования), каждый из которых использует один и тот же сторонний модуль (ng4-auto-complete from npm), и я не могу заставить его работать. Код компилируется с использованием «ng serve», но когда я захожу на страницу, он выдает:

Ошибка: StaticInjectorError (AppModule) [AutoCompleteDirective -> ElementRef]: StaticInjectorError (Платформа: core) [AutoCompleteDirective -> ElementRef]: NullInjectorError: Нет провайдера для ElementRef! в NullInjector.get (core.js: 1003) at resolToken (core.js: 1301) в tryResolveToken (core.js: 1243) на StaticInjector.get (core.js: 1111) at resolToken (core.js: 1301) в tryResolveToken (core.js: 1243) на StaticInjector.get (core.js: 1111) at resolNgModuleDep (core.js: 10896) в NgModuleRef .get (core.js: 12129) at resolDep (core.js: 12619)

Я пытался использовать модуль Shared, но он не работал для меня, возможно, я что-то упустил.

Замечу, что я хочу упаковать дополнительный модуль в автономный модуль стороннего производителя (ng4-auto-complete), чтобы я мог использовать его в другом приложении (я использую ng-packagr).

Вот файлы:

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {SharedModule} from './shared.module';
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    SharedModule,
  ],
  providers: [],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

app.component.html (модуль-один является селектором модуля1)

<div style="text-align:center">
  <div>
    <module-one></module-one>
  </div>
</div>

shared.module

import {NgModule} from '@angular/core';
import {Module1Component} from '../../../module1/src/module1/module1.component';
import {CommonModule} from '@angular/common';
import {AutoCompleteModule} from 'ng4-auto-complete';
import {Module1Module} from '../../../module1/src/module1/module1.module';

@NgModule({
  declarations: [
  ],
  imports: [
    CommonModule,
    Module1Module,
    AutoCompleteModule
  ],
  exports: [
    Module1Module,
    AutoCompleteModule
  ],
  providers: [
  ],
  bootstrap: [
  ]
})

export class SharedModule { }

module1.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Module1Component } from './module1.component';
import { AutoCompleteModule } from 'ng4-auto-complete';
import {BrowserModule} from '@angular/platform-browser';

@NgModule({
  declarations: [
    Module1Component
  ],
  imports: [
    AutoCompleteModule
  ],
  exports: [
    Module1Component
  ],
  providers: [
  ],
  bootstrap: [
  ]
})
export class Module1Module {
}

Я, вероятно, не правильно понял, как настроить модули и компоненты ... Я борюсь с этим в течение 2 дней, поэтому любая помощь будет признательна.

Спасибо, впереди