本文介绍一下如何将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() {
}
}
网友评论