Angular 使用 "ta-json" 库时出现 5 个错误

Angular 5 error on using "ta-json" library

我做了一个示例项目来解释这个问题。 Angular 使用 ng new 和使用 ta-json 生成的 5 个项目(我想将 api 响应完全解析为我创建的实体(例如 ./entities/a.ts ) 而不是默认的 js 对象 ({}) 因为很多原因)

composer.json

{
  "name": "ng5test",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "ta-json": "^2.3.1",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.5.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

有这样一个实体:
应用/entities/a.ts

import {JsonObject, JsonProperty} from 'ta-json';

@JsonObject()
export class A {
    a1: number;
    fn() {}
}

有处理 api 个电话的服务。
app/services/s.service.ts

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {A} from '../entities/a';

@Injectable()
export class SService {
    constructor(private http: HttpClient) {}

    getTournaments(): Observable<A[]> {
        return this.http.get<A[]>('http://localhost:8000/api/tournament');
    }
}

我还写了 2 个组件:
app/cx/cx.component.ts

import {Component, OnInit} from '@angular/core';
import {SService} from '../services/s.service';
import {A} from '../entities/a';

@Component({
    selector: 'app-cx',
    template: '<p>cx works!</p>'
})
export class CxComponent implements OnInit {
    aa: A[];
    constructor(private mService: SService) {}

    ngOnInit() {
        this.mService.getTournaments()
            .subscribe(a => this.aa = a);
    }
}

app/cy/cy.component.ts

import {Component, OnInit} from '@angular/core';
import {A} from '../entities/a';

@Component({
    selector: 'app-cy',
    template: '<p>cy works!</p>'
})
export class CyComponent implements OnInit {
    constructor() {}

    ngOnInit() {
        new A();
    }
}


app/app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';

import {AppComponent} from './app.component';
import {CxComponent} from './cx/cx.component';
import {CyComponent} from './cy/cy.component';
import {SService} from './services/s.service';

@NgModule({
    declarations: [AppComponent, CxComponent, CyComponent],
    imports: [BrowserModule, ReactiveFormsModule, HttpClientModule],
    providers: [SService, HttpClientModule],
    bootstrap: [AppComponent]
})
export class AppModule {}

问题是Uncaught Error: Can't resolve all parameters for SService
如果您从 app/entites/a.ts:3 中删除行 @JsonObject() (ta-json 注释),问题将得到解决(或者您可以在组件 cy 处使用实体 A 删除,并且会看到没有错误)
为什么?

githup repository of sample code is here
git clone git@github.com:sr-hosseyni/angular5-test.git

终于找到临时解决方案 我在项目的 src 中制作了一个模块:
./modules/ta-json/ta-json.模块

import { NgModule } from '@angular/core';
import {ModuleWithProviders} from '@angular/core';
export * from 'ta-json';

export declare class TaJsonRootModule {
}

@NgModule({
  imports: [],
  declarations: []
})
export class TaJsonModule {
    public static forRoot(): ModuleWithProviders {
        return {ngModule: TaJsonModule, providers: []};
    }
}

并将其导入我的 app.module.ts forRoot

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';

// ------> imported here
import {TaJsonModule} from './modules/ta-json/ta-json.module';

import {AppComponent} from './app.component';
import {CxComponent} from './cx/cx.component';
import {CyComponent} from './cy/cy.component';
import {SService} from './services/s.service';

@NgModule({
    declarations: [AppComponent, CxComponent, CyComponent],
    imports: [
        BrowserModule,
        ReactiveFormsModule,
        HttpClientModule,
        TaJsonModule.forRoot() // <----- imports forRoot here
    ],
    providers: [SService, HttpClientModule],
    bootstrap: [AppComponent]
})
export class AppModule {}

ٍ一切正常