Question

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

我正在使用Swagger CodeGen生成与Angular兼容的SDK。这很好用；但我宁愿在所有三个UI项目中都没有三份代码；我想做的是创建一个 ngx-sdk 库，其中包含对生成的Angular的引用，然后通过NPM将其打包并提供给三个Angular项目。这似乎是Angular库的灌篮案例，所以我给了它一个机会。

我能够在线使用说明创建标准库，进行构建，打包并通过NPM使其可用。当我开始尝试将REST代码加载到库中时，就会出现问题。

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

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

Angular库似乎在这个概念上挣扎，尽管经过一番挖掘，我发现了次要入口点的概念，这似乎是我想要的。我用这篇文章来设置我的切入点：

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的所有代码源，包括引用/ api，/ model和.configuration的 tellers-api.module.ts 文件。我使用 public_api.ts 文件指向这一点。好的，到目前为止很好。我建立了，这就是我得到的：

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

因此，构建成功。

问题1：似乎可以检测到secpmdaru入口点，但并非像我期望的那样，将其安装在@ acmesoftware / ngx-sdk / tellers中，而是将 src / 子目录。这迫使我消耗大量的Angular应用程序像这样引用：

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

没什么大不了的，但是有点不可思议，并不是很可取。

但是，当我尝试将在Swagger中生成的API模块导入到消耗性的角度应用程序中时，就会出现REAL问题。我的代码如下：

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代码生成的自动生成的代码，应该对我的后端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)

就是这样...我被卡住了。我以为也许我可能会缺少HttpClientModule，但是它已导入app.module中并且应该可用。我不知道它不能注入什么，为什么不注入，我陷于困境。

任何想法都将受到欢迎！

在为中型REST API添加Angular 7库时遇到了巨大的挑战

0 个答案: