本文介绍一下如何将Swagger editor生成的typescript-angular代码发布到npm仓库，并且在一个Angular项目使用该模块。

发布过程

使用tsc编译

安装typescript

$ npm i -g typescript

$ tsc -v
Version 3.2.2

创建tsconfig.json

使用命令生成一个默认的tsconfig.json文件。

$ tsc --init

对tsconfig.json做一些修改。

"target": "es6,
"declaration": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true

如果不设置 emitDecoratorMetadata，工程使用这个module时，开发和编译不会有问题，但是运行时，会提示下面这样的错误。

Uncaught Error: Can't resolve all parameters for xxx: (?, [object Object], ?).
    at syntaxError (compiler.js:2193)
    at CompileMetadataResolver._getDependenciesMetadata (compiler.js:17643)
    at CompileMetadataResolver._getTypeMetadata (compiler.js:17539)
    at CompileMetadataResolver._getInjectableTypeMetadata (compiler.js:17756)
    at CompileMetadataResolver.getProviderMetadata (compiler.js:17765)
    at providers.forEach (compiler.js:17703)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver._getProvidersMetadata (compiler.js:17663)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:17391)
    at CompileMetadataResolver.getNgModuleSummary (compiler.js:17226)

从官方文档：Compiler Options 可以查看这些参数的默认值。

image.png

打包 & 发布

每个js文件都有对应的d.ts文件。

$ tsc -p . --outDir dist
$ tree dist/
dist/
├── api
│   ├── api.d.ts
│   ├── api.js
│   ├── taskController.service.d.ts
│   ├── taskController.service.js
│   ├── taskStatusController.service.d.ts
│   └── taskStatusController.service.js
├── api.module.d.ts
├── api.module.js
├── configuration.d.ts
├── configuration.js
├── encoder.d.ts
├── encoder.js
├── index.d.ts
├── index.js
├── model
│   ├── models.d.ts
│   ├── models.js
│   ├── task.d.ts
│   ├── task.js
│   ├── taskStatus.d.ts
│   └── taskStatus.js
├── variables.d.ts
└── variables.js

Swagger editor生成的代码没有package.json，所以在dist目录下手动创建一个。

{
  "name": "@ali/ram-sdk-validate-control",
  "version": "0.0.1"
}

最后使用npm publish即可。

使用tsc编译出来的模块在编译prod版本时会有问题。这个问题暂时无解。使用最新的swagger-codegen-cli 3.0.3版本生成的代码一样有问题。

$ ng build --prod
                                                                                     
Date: 2019-01-08T01:40:52.301Z
Hash: d749aff9d5db5ec2f117
Time: 8843ms
chunk {0} runtime.ec2944dd8b20ec099bf3.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} main.9868d9b237c3a48c54da.js (main) 128 bytes [initial] [rendered]
chunk {2} polyfills.85f47f0bf59079cbc23a.js (polyfills) 130 bytes [initial] [rendered]
chunk {3} styles.05e92a7676186b661e8a.css (styles) 405 kB [initial] [rendered]

ERROR in Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'ApiModule' was called.

使用ng-build编译

使用ng-build生成module也是一种方法，并且可以解决上面template compile的问题。

创建项目

ng new my-app

创建模块

ng generate library @ali/ram-sdk-validate-control

编译模块

将Swagger生成的代码拷贝到projects/ali/ram-sdk-validate-control/src目录。

$ ng build @ali/ram-sdk-validate-control
Building Angular Package
Building entry point '@ali/ram-sdk-validate-control'
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 @ali/ram-sdk-validate-control
Built Angular Package!
 - from: /private/tmp/my-app/projects/ali/ram-sdk-validate-control
 - to:   /private/tmp/my-app/dist/ali/ram-sdk-validate-control

接着发布便可。

使用

使用模块

import { Component, OnInit } from '@angular/core';
import { NzMessageService, NzModalService } from 'ng-zorro-antd';
import { Task, TaskControllerService } from '@ali/ram-sdk-validate-control'

@Component({
  selector: 'app-task-controller',
  templateUrl: './task-controller.component.html',
  styleUrls: ['./task-controller.component.less']
})
export class TaskControllerComponent implements OnInit {
  tasks:Task[];
  constructor(private message: NzMessageService, 
    private modalService: NzModalService,
    private taskservice: TaskControllerService) {
    taskservice.listTasksUsingGET()
    .subscribe(tasks => 
      {
        this.tasks = tasks
        console.log("tasks: "+tasks);
      });
   }

  ngOnInit() {
  }
}

参考文章

1. 使用typescript开发angular模块(发布npm包)
2. 使用Swagger开发REST API
3. @swagger/angular2-typescript-petstore@0.0.1