找不到模塊：錯誤：無法解析“D:\\ask\\src\\app\\service”中的“@angular/http”

Question

我想使用 laravel 和 angular 進行插入，並且我想設置 HEADERS 但它給了我這個錯誤。

找不到模塊：錯誤：無法解析“D:\\ask\\src\\app\\service”中的“@angular/http”

拉拉維爾

公共/index.php

<?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>
 */

有角的

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 { }

任務.service.ts

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);
  }  
}

Answer 1

您似乎在使用已棄用的 API 和功能。

請閱讀https://angular.io/guide/deprecations並查看您使用的模塊。

進口

import { HttpClient, HttpHeaders } from '@angular/common/http';

使用示例

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
.
.
.
this.http.put<any>(url, o, httpOptions);
.
.
.

Answer 2

在 task.service.ts 中，而不是下面的代碼

import { Headers , RequestOptions } from '@angular/http';

用這個：

import { HttpClient, HttpHeaders } from '@angular/common/http';

並像這樣設置選項：

 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);
  } 

注意：通過攔截器服務添加標頭的最佳方式。 添加攔截器參考： best way to addinterceptor in angular

Answer 3

在您的服務中import { HttpHeaders, HttpRequest } from '@angular/common/http'而不是Headers和RequestOptions因為它們已被棄用。

Answer 4

請編輯此代碼以進行工作

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);
  }  
}