Проблема с угловой библиотекой (UMD) и динамической загрузкой

Question

У меня есть приложение Angular, которое содержит кнопку загрузки.Когда вы нажимаете кнопку загрузки, она отображает удаленную библиотеку UMD.

При первом нажатии кнопки загрузки у меня возникает следующая ошибка при импорте моей библиотеки с использованием SystemJS:

core.js:15714 ERROR Error: Uncaught (in promise): TypeError: Cannot read property '__source' of undefined
TypeError: Cannot read property '__source' of undefined
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8984)

при повторном нажатии, ошибок нет, и библиотека отображается правильно.

Я сузил проблему до следующего утверждения в своем коде:

export class PostService {
  constructor(private httpClient: HttpClient) { }

Если я удалю службу httpClient, библиотека загрузится правильно, но у меня нет доступа к HttpClient.

Если у кого-то есть идея, почему мой код ведет себя так, он будет очень признателен!

Вот мои настройки ниже:

У меня есть следующие компоненты в моей удаленной библиотеке:

 sample-pack-lib.component
   |_db2-chart2.component
      |_post.service

Библиотека 'samplePack-lib' скомпилирована с помощью 'ng build samplePack-lib', и я предоставил следующие выходные данные через экспресс-сервер:

dist/sample-pack-lib/sample-pack-lib.umd.js

db2-chart2.component.ts:

import { Component, ElementRef, ViewChild, AfterViewInit, OnInit } from '@angular/core';
import * as vis from 'vis';
import { Graph2d, PointItem } from 'vis';
import { PostService } from '../services/post.service';

@Component({
  selector: 'izoa-db2-chart2',
  templateUrl: './db2-chart2.component.html',
  styleUrls: ['./db2-chart2.component.scss']
})
export class Db2Chart2Component implements OnInit {

  @ViewChild('vizchart') vizchart: ElementRef;

  data: Row[] = [];

  constructor(private postService: PostService) { }

post.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class PostService {
  constructor(private httpClient: HttpClient) { }

sample-pack-lib.module.ts:

import { NgModule } from '@angular/core';
import { SamplePackLibComponent } from './sample-pack-lib.component';
import { Db2Chart2Component } from './db2-chart2/db2-chart2.component';
import { Db2Chart1Component } from './db2-chart1/db2-chart1.component';
// import { HttpClientModule } from '@angular/common/http';


import {
  MatButtonModule,
  MatCardModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatSidenavModule,
  MatGridListModule,
  MatListModule
} from '@angular/material';


@NgModule({
  declarations: [
    Db2Chart2Component,
    SamplePackLibComponent,
    Db2Chart1Component
  ],
  imports: [
    // HttpClientModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatToolbarModule,
    MatIconModule,
    MatSidenavModule,
    MatGridListModule,
    MatListModule
  ],
  exports: [
    SamplePackLibComponent,
    Db2Chart2Component,
    Db2Chart1Component
  ]
})
export class SamplePackLibModule { }

public-api.ts

import { NgModule } from '@angular/core';
import { SamplePackLibComponent } from './sample-pack-lib.component';
import { Db2Chart2Component } from './db2-chart2/db2-chart2.component';
import { Db2Chart1Component } from './db2-chart1/db2-chart1.component';
// import { PostService } from './services/post.service';
// import { HttpClientModule } from '@angular/common/http';


import {
  MatButtonModule,
  MatCardModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatSidenavModule,
  MatGridListModule,
  MatListModule
} from '@angular/material';


@NgModule({
  declarations: [
    Db2Chart2Component,
    SamplePackLibComponent,
    Db2Chart1Component
  ],
  // providers: [PostService],
  imports: [
    // HttpClientModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatToolbarModule,
    MatIconModule,
    MatSidenavModule,
    MatGridListModule,
    MatListModule
  ],
  exports: [
    SamplePackLibComponent,
    Db2Chart2Component,
    Db2Chart1Component
  ]
})
export class SamplePackLibModule { }

package.json:

{
  "name": "sample-pack-lib",
  "version": "0.0.1",
  "dependencies": {    
  },
  "peerDependencies": {
    "@angular/common": "^7.2.0",
    "@angular/core": "^7.2.0",
    "@angular/material": "7.3.0"
  }
}

Основное приложение:

@Component({
  selector: 'app-admin',

  template: '<button (click)="load()">Load</button><ng-container #vc></ng-container>',
  styleUrls: ['./admin.component.scss']
})
export class AdminComponent {
  @ViewChild('vc', { read: ViewContainerRef }) vc: ViewContainerRef;

  private cfr: any;
  constructor(public compiler: Compiler, private injector: Injector, private r: ComponentFactoryResolver) { }

  load() {
    // register the modules that we already loaded so that no HTTP request is made
    // in my case, the modules are already available in my bundle (bundled by webpack)
    SystemJS.set('@angular/core', SystemJS.newModule(AngularCore));
    SystemJS.set('@angular/common', SystemJS.newModule(AngularCommon));
 SystemJS.set('@angular/material',SystemJS.newModule(AngularMaterial));
    SystemJS.set('@angular/router', SystemJS.newModule(AngularRouter));
    SystemJS.set('vis', SystemJS.newModule(Vis));
    SystemJS.set('@angular/common/http', SystemJS.newModule(HttpClientModule));

    const url = '../bundles/sample-pack-lib.umd.js';

    SystemJS.import(url).then((module) => {
   this.compiler.compileModuleAndAllComponentsAsync(module['SamplePackLibModule'])     
        .then((moduleFactory) => {
          const moduleRef = moduleFactory.ngModuleFactory.create(this.injector);
          const factory = moduleFactory.componentFactories.find(
            item => item.componentType.name === 'SamplePackLibComponent');

          if (factory) {
            const component = this.vc.createComponent(factory);
            const instance = component.instance;
          }
        });
    });

Answer 1

Проблема была с HttpCLientModule. Ранее я импортировал его таким образом:

import { HttpClientModule } from '@angular/common/http';

Должно быть:

import * as HttpClientModule from '@angular/common/http';