角度6:无法在导入MainComponent时解析main.component.ts中ApiService的所有参数
角度6:无法在导入MainComponent时解析main.component.ts中ApiService的所有参数
提问于 2018-12-19 05:23:47
我在组件中导入我的ApiService时遇到了问题。我刚刚用ng new创建了一个新的应用程序，并使用CLI创建了一个API服务。一切正常，但是一旦我在组件中导入服务，我就会得到错误：
Can't resolve all parameters for MainComponent in <project_location>/src/app/main/main.component.ts我又犯了一次错误，但再也没有出现过：
ERROR in node_modules/@angular/http/http.d.ts(1,1): error TS6053: File '<project_location>/node_modules/@angular/http/http.ngfactory.ts' not found.
src/app/api.service.ts(1,1): error TS6053: File '<project_location>/src/app/api.service.ngfactory.ts' not found.以下是这些文件：
api.service.ts
import { Injectable } from '@angular/core';
import { environment } from '../environments/environment';
import { Http, Response, URLSearchParams } from '@angular/http';
import { map, catchError } from 'rxjs/operators';
import { throwError, Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ApiService {
constructor(
private http: Http
) { }
get(path: string, params: URLSearchParams = new URLSearchParams()): Observable<any> {
const url = environment.api_url + '/' + path;
return this.http.get(url, { search: params })
.pipe(map((res: Response) => res.json()), catchError((error: Response) => throwError(error.json())));
}
put(path: string, body: any): Observable<any> {
const url = environment.api_url + '/' + path;
return this.http.put(
url,
body
)
.pipe(map((res: Response) => res.json()), catchError((error: Response) => throwError(error.json())));
}
post(path: string, body: any): Observable<any> {
const url = environment.api_url + '/' + path;
return this.http.post(url,
body
)
.pipe(map((res: Response) => res.json()), catchError((error: Response) => throwError(error.json())));
}
delete(path): Observable<any> {
return this.http.delete(
`${environment.api_url}${path}`
)
.pipe(map((res: Response) => res.json()), catchError((error: Response) => throwError(error.json())));
}
deleteitem(path: string, body: Object = {}): Observable<any> {
const url = environment.api_url + '/' + path;
return this.http.delete(
url
)
.pipe(map((res: Response) => res.json()), catchError((error: Response) => throwError(error.json())));
}
}main.component.ts
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
constructor(
public apiService = ApiService
) { }
ngOnInit() {
}
}app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { MainComponent } from './main/main.component';
@NgModule({
declarations: [
AppComponent,
MainComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }我没有将ApiService添加到提供程序列表中，因为我在StackOverflow线程上看到api.service.ts文件中已经提到了providedIn: 'root'，因此不应该将它添加到app.module.ts中的提供程序中。
，这是角CLI版本的
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 6.0.8
Node: 8.11.3
OS: linux x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.6.8
@angular-devkit/build-angular 0.6.8
@angular-devkit/build-optimizer 0.6.8
@angular-devkit/core 0.6.8
@angular-devkit/schematics 0.6.8
@angular/cli 6.0.8
@ngtools/webpack 6.0.8
@schematics/angular 0.6.8
@schematics/update 0.6.8
rxjs 6.3.3
typescript 2.7.2
webpack 4.8.3回答 2
Stack Overflow用户
回答已采纳
发布于 2018-12-19 05:28:45
您已经使用了HttpClientModule并尝试注入Http服务。Http是不推荐的服务，并被定位到HttpModule中，这也是不推荐的。
您需要注入HttpClient服务
import { HttpClient } from '@angular/common/http';
...
@Injectable({
providedIn: 'root'
})
export class ApiService {
constructor(
private http: HttpClient
) { }
...
}并更改MainComponent的构造函数。
export class MainComponent implements OnInit {
constructor(
public apiService: ApiService
) { }
ngOnInit() {
}
}Stack Overflow用户
发布于 2018-12-19 05:27:48
在MainComponent.ts变化中
constructor(
public apiService = ApiService
) { }至
constructor(
public apiService:ApiService
) { }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53845051
复制相关文章
相似问题
腾讯云开发者
