[英]Rewriting services from Angular2 to Angular6 "Unexpected module 'HttpClientModule' declared by the module 'AppModule'
我试图重写在Angular 2中可以正常工作的服务,并且试图重写Angular 6。
这是服务:
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from '../../environments/environment';
import {Cluster} from "./cluster";
import {map} from "rxjs/internal/operators";
@Injectable({
providedIn: 'root'
})
export class FullDataService {
private headers = new Headers({'Content-Type': 'application/json'});
constructor(private http: HttpClient) {}
getClusters() {
const url = environment.apiUrl + '/api/v1/clusters';
return this.http.get(url).pipe(map(res => <Cluster[]>res));
}
}
这是我的app.models.ts:
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { NgModule } from '@angular/core';
import * as $ from 'jquery';
import { ContentHeaderComponent} from './content-header/content-header.component';
import { ContentHeaderService} from './content-header/content-header.service';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AppRoutingModule } from './app-routing.module';
import { FullDataComponent } from './full-data/full-data.component';
import {FullDataService} from "./full-data/full-data.service";
@NgModule({
declarations: [
AppComponent,
HttpClientModule,
HomeComponent,
ContentHeaderComponent,
FullDataComponent,
HttpClient,
HttpClientModule
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [
ContentHeaderService,
FullDataService,
],
bootstrap: [AppComponent]
})
export class AppModule { }
$(document).ready(function() {
$('#base-header .toggle-menu').click(function() {
$('#base-sidebar').toggleClass('sidebar--hidden');
});
$('nav .sidebar__drawer > a').click(function() {
$(this).parent().toggleClass('sidebar__drawer--opened');
});
});
当我尝试在浏览器中加载我的应用程序时,在控制台日志中收到此错误:
compiler.js:215 Uncaught Error: Unexpected module 'HttpClientModule' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.
at syntaxError (compiler.js:215)
at compiler.js:10524
at Array.forEach (<anonymous>)
at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:10506)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:22567)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22548)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:22508)
at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:143)
at PlatformRef.push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule (core.js:4199)
at Object../src/main.ts (main.ts:11)
我究竟做错了什么?
谢谢!
更新:感谢您的帮助。 现在,我在运行服务时收到以下错误消息:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
那是怎么回事?
从声明中删除HttpClientModule
,它应该在import下
declarations: [
AppComponent,
HttpClientModule,
HomeComponent,
ContentHeaderComponent,
FullDataComponent,
HttpClient,
HttpClientModule // remove this from here
],
HttpClientModule
应该添加在imports数组而非声明数组中。
import数组用于导入模块,例如BrowserModule,AppRoutingModule,HttpClientModule
声明数组适用于您的AppComponent,HomeComponent,ContentHeaderComponent,FullDataComponent,HttpClient
@NgModule({
declarations: [
AppComponent,
HomeComponent,
ContentHeaderComponent,
FullDataComponent,
HttpClient
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
providers: [
ContentHeaderService,
FullDataService,
],
bootstrap: [AppComponent]
})
对于没有'Access-Control-Allow-Origin'头,请求的资源上不存在。
尝试在服务器端添加标题
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Content-Type: application/json; Charset=UTF-8');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.