Je veux faire une insertion en utilisant laravel et angular, et je veux définir HEADERS mais cela me donne cette erreur.
Module non trouvé: Erreur: Impossible de résoudre '@ angular / http' dans 'D: \ ask \ src \ app \ service'
import { Injectable } from '@angular/core';
import { Task } from '../Task';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Headers , RequestOptions } from '@angular/http';
@Injectable({
providedIn: 'root'
})
export class TaskService {
Headers:Headers = new Headers();
Options:any;
serveur : string='http://127.0.0.1:8000/';
constructor(public http:HttpClient) {
this.Headers.append('enctype','multipart/form-data');
this.Headers.append('Content-Type','application/json');
this.Headers.append('X-Requested-with','XMLHttpRequest');
this.Options = new RequestOptions({Headers:this.Headers});
}
addTask(title):Observable<Task>{
const newTask=new Task(title);
//console.log(newTask);
return this.http.post<Task>(this.serveur+'add',newTask);
}
}
angulaire
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule , Routes} from '@angular/router';
import { RoutingModuleModule } from './routing-module.module';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http' ;
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { TaskManagerComponent } from './components/task-manager/task-manager.component';
import { TaskFormComponent } from './components/task-manager/task-form/task-form.component';
import { TaskListComponent } from './components/task-manager/task-list/task-list.component';
import { TaskDetailComponent } from './components/task-manager/task-detail/task-detail.component';
import { TaskItemComponent } from './components/task-manager/task-list/task-item/task-item.component';
import { from } from 'rxjs';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
TaskManagerComponent,
TaskFormComponent,
TaskListComponent,
TaskDetailComponent,
TaskItemComponent,
],
imports: [
BrowserModule,
RoutingModuleModule,
FormsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
task.service.ts
<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
/**
* Laravel - A PHP Framework For Web Artisans
*
* @package Laravel
* @author Taylor Otwell <taylor@laravel.com>
*/
4 Réponses :
Vous semblez utiliser des API et des fonctionnalités obsolètes.
Veuillez lire https://angular.io/ guide / obsolètes et passez en revue les modules que vous utilisez.
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
.
.
.
this.http.put<any>(url, o, httpOptions);
.
.
.
import { HttpClient, HttpHeaders } from '@angular/common/http';
Dans votre service, importez {HttpHeaders, HttpRequest} depuis '@ angular / common / http' au lieu de Headers et RequestOptions comme ils ' est obsolète.
Dans task.service.ts, au lieu du code ci-dessous
const httpOptions = {
headers: new HttpHeaders({
'enctype':'multipart/form-data',
'Content-Type': 'application/json',
'X-Requested-with':'XMLHttpRequest'
})
};
addTask(title):Observable<Task>{
const newTask=new Task(title);
//console.log(newTask);
return this.http.post<Task>(this.serveur+'add',newTask, httpOptions);
}
utilisez ceci:
import { HttpClient, HttpHeaders } from '@angular/common/http';
et définissez une option comme ceci:
import { Headers , RequestOptions } from '@angular/http';
Note: meilleure façon d'ajouter un en-tête par le service d'intercepteur. Pour ajouter un intercepteur, consultez: meilleur moyen d'ajouter un intercepteur en angle
@s sherif puis-je effacer tout ce qui concerne l'en-tête et le remplacer par ce code ou je laisse tout et j'ajoute ce code
vous devez supprimer cette instruction d'importation import {Headers, RequestOptions} de '@ angular / http'; Et le code suivant du constructeur this.Headers.append ('enctype', 'multipart / form-data'); this.Headers.append ('Content-Type', 'application / json'); this.Headers.append ('X-Requested-with', 'XMLHttpRequest'); this.Options = new RequestOptions ({Headers: this.Headers});
vous pouvez définir l'option d'en-tête par const httpOptions = {headers: new HttpHeaders ({'Content-Type': 'application / json'})};
ouais, ça devrait marcher. J'ai apporté des modifications selon votre code
Si vous souhaitez suivre les meilleures pratiques, ajoutez un intercepteur dans votre application
@s Je partage mon nouveau code, veuillez le modifier pour qu'il soit compilé exactement
@NajibMarzouk êtes-vous toujours confronté au même problème ou est-il corrigé?
veuillez modifier ce code pour le travail
import { Injectable } from '@angular/core';
import { Task } from '../Task';
import { Observable } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class TaskService {
Headers:Headers = new Headers();
Options:any;
const httpOptions = {
headers: new HttpHeaders({
'enctype':'multipart/form-data',
'Content-Type': 'application/json',
'X-Requested-with':'XMLHttpRequest'
})
};
serveur : string='http://127.0.0.1:8000/';
constructor(public http:HttpClient) {
this.Headers.append('enctype','multipart/form-data');
this.Headers.append('Content-Type','application/json');
this.Headers.append('X-Requested-with','XMLHttpRequest');
this.Options = new RequestOptions({Headers:this.Headers});
}
addTask(title):Observable<Task>{
const newTask=new Task(title);
//console.log(newTask);
return this.http.post<Task>(this.serveur+'add',newTask, httpOptions);
}
}
@ angular / httpest obsolète. Reportez-vous à la note de publication et à la documentation pour utiliser@ angular / common / httpnpm install @ angular / http
@penleychan il me donne une autre erreur "export 'Headers' n'a pas été trouvé dans '@ angular / common / http'
C'est parce qu'il n'y a pas de
Headersdans@ angular / common / http. angular.io/api/common/http/HttpHeaders