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 {}
ٍ一切正常
我做了一个示例项目来解释这个问题。 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 {}
ٍ一切正常