为中型REST API添加Angular 7库的巨大挑战

我正在构建一个需要与后端REST API通信的应用程序 . 这个应用程序有多个用户界面项目，我有完整的单独的Angular应用程序，以及一个控件库 . 所有这些组件都需要访问REST API .

我'm generating an Angular-compatible SDK using Swagger CodeGen. This works fine; but I' d而不是在所有三个UI项目中都有三个代码副本;我想要做的是创建一个 ngx-sdk 库，其中包含对生成的Angular的引用，然后通过NPM将其打包并使其可用于三个Angular项目 . 这似乎是Angular库的一个扣篮用例，所以我试了一下 .

我可以在线使用这些说明来创建标准库，构建它，打包它，并通过NPM使它可用 . 当我开始尝试将REST代码加载到库中时，会出现问题 .

首先 - Swagger生成代码的方式，它实际上是4个不同的API“集合” . 因此，如果我正在构建银行应用程序，并且我有柜员服务，帐户服务和客户服务，那么招摇会为每个应用程序生成三个目录 . 没问题，我喜欢这个 . 所以在我的主要角度代码中，我希望能够访问这样的服务：

import {Teller,TellerTransactionsWindowService} from '@acmesoftware/tellers'
import {Account,ExchangeRateService} from '@acmesoftware/accounts'

角度图书馆似乎很难接受这个概念，虽然经过一些挖掘后我发现了 secondary entry points 的概念，这似乎是我正在寻找的 . 我用这篇文章来设置我的入口点：

angluar-cli library create secondary entry point

看起来ng-packr对目录布局非常敏感 . 好的，所以我只想设置我的柜员服务......一次一步 . 我有这个：

\---projects
    \---scope
        \---ngx-sdk
            |   karma.conf.js
            |   ng-package.json
            |   ng-package.prod.json
            |   package.json
            |   tsconfig.lib.json
            |   tsconfig.spec.json
            |   tslint.json
            |
            \---src
                |   public_api.ts
                |   test.ts
                |
                +---lib
                |       package-client-config.ts
                |       package-client.spec.ts
                |       package-client.ts
                |       package.module.ts
                |
                \---tellers
                    |   index.ts  (1)
                    |   package.json (2)
                    |   public_api.ts  (3)
                    |
                    \---src
                        |   public_api.ts  (4)
                        |
                        \---lib
                            |    ... generated code goes here

在lib目录中是来自Swagger的所有codegen，包括引用/ api，/ model和.configuration的 tellers-api.module.ts 文件 . 我使用 public_api.ts 文件指向此 . 好的，到目前为止一切顺利 . 我 Build ，这就是我得到的：

Building Angular Package
Building entry point '@acmesoftware/ngx-sdk'
Compiling TypeScript sources through ngc
Bundling to FESM2015
Bundling to FESM5
Bundling to UMD
Minifying UMD bundle
Copying declaration files
Writing package metadata
Removing scripts section in package.json as it's considered a potential security vulnerability.
Built @acmesoftware/ngx-sdk
Building entry point '@acmesoftware/ngx-sdk/src/tellers'
Compiling TypeScript sources through ngc
Bundling to FESM2015
Bundling to FESM5
Bundling to UMD
Minifying UMD bundle
Copying declaration files
Writing package metadata
Removing scripts section in package.json as it's considered a potential     security vulnerability.
Built @acmesoftware/ngx-sdk/src/tellers
Built Angular Package!
 - from: D:\acme\ngx-sdk\projects\ngx-sdk
 - to:   D:\acme\ngx-sdk\dist\ngx-sdk

所以，构建是成功的 .

Question 1: 它似乎检测到secpmdaru入口点，但不是像我期望的那样将其挂载在@ acmesoftware / ngx-sdk / tellers中，而是将 src/ 子目录放在那里 . 这迫使我使用的Angular应用程序引用如下：

import {Teller,TellerTransactionsWindowService} from '@acmesoftware/src/tellers'

这不是什么大不了的事，但有点奇怪而且不太可取 .

但是当我尝试将我在Swagger中生成的API模块导入我的消费角度应用程序时，真正的问题出现了 . 我的代码看起来像：

import {TellersApiModule} from '@acmesoftware/ngx-sdk/src/tellers';

    @NgModule({
    declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxSdkModule,
    HttpClientModule,
    TellersApiModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

然后，在我的 AppComponent 代码中，我有这个：

import { Component } from '@angular/core';
  import {Teller, TellerTransactionsWindowService} from '@rhythmsoftware/ngx-sdk/src/tellers';

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'ngx-sample';

    contact: Contact;
    constructor( private tellersService: TellersService) {

this.tellersService.getTeller( id );      

    }
  }

一旦我这样做，我就开始看到我以前从未见过的错误 . 同样，TellersService是来自Swagger代码gen的自动生成的代码，它应该对我的后端REST服务进行HTTP调用 . 当我构建应用程序时，我得到：

WARNING in ../ngx-sdk/node_modules/@angular/core/fesm5/core.js 17170:15-36
Critical dependency: the request of a dependency is an expression

chunk {main} main.js, main.js.map (main) 115 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB     [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
WARNING in ../ngx-sdk/node_modules/@angular/core/fesm5/core.js 17182:15-102
chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial]     [rendered]
Critical dependency: the request of a dependency is an expression
chunk {vendor} vendor.js, vendor.js.map (vendor) 5.62 MB [initial] [rendered]

这些是警告，但应用程序然后给我这个错误，崩溃页面：

main.js:2523 Error: StaticInjectorError(AppModule)[HttpHandler -> Injector]: 
  StaticInjectorError(Platform: core)[HttpHandler -> Injector]: 
    NullInjectorError: No provider for Injector!
    at     NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (vendor.js:82974)
    at resolveToken (vendor.js:83219)
    at tryResolveToken (vendor.js:83163)
    at     StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (vendor.js:83060)
    at resolveToken (vendor.js:83219)
    at tryResolveToken (vendor.js:83163)
    at     StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (vendor.js:83060)
    at resolveNgModuleDep (vendor.js:99530)
    at _createClass (vendor.js:99577)
    at _createProviderInstance (vendor.js:99547)

就是这样......我被困住了 . 我想也许我是migt错过了HttpClientModule，但它在app.module中导入并且应该可用 . 我不知道它不能注入什么，为什么不注意，而且我陷入了困境 .

任何想法都会受到欢迎！