Angular 2 & 2+

how to fixe cors problen in angular 6.

--------------------------------------------

e.g.

-@CrossOrigin(origins = "http://localhost:4200/")

-at @configuration class 

@Bean

    public CorsFilter corsFilter() {

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

        CorsConfiguration config = new CorsConfiguration();

        config.setAllowCredentials(true);

        config.addAllowedOrigin("*");

        config.addAllowedHeader("*");

        config.addAllowedMethod("OPTIONS");

        config.addAllowedMethod("GET");

        config.addAllowedMethod("POST");

        config.addAllowedMethod("PUT");

        config.addAllowedMethod("DELETE");

        source.registerCorsConfiguration("/**", config);

        return new CorsFilter(source);

    }

//Api call->
http api call
1.first HttpClient import in service or component class;//from '@angular/common/http';
2.import HttpClientModule in 'app.module.ts" -root module file (always import the all module in module.ts file .)
eg.
app.module.ts file->
---------------------------
import { NgModule }         from '@angular/core';
import { BrowserModule }    from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    // import HttpClientModule after BrowserModule.
    HttpClientModule,
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Note : in @NgModule -we have 3 array imports[],declarations[],bootstrap[];

app.component.ts
----------------------
-import the HttpClient in this file
-inject it.
 then define dependency injection and call the define api .

//multiple file upload
-use following package to upload the npm i ng2-file-upload --save
-npm i ng2-file-upload --save
Desc:Above commands will generate a new Angular project and adds ng2-file-upload and material designing to it. It also adds our file upload component to it

-Currently ng2-file-upload contains two directives: ng2-file-select and ng2-file-drop. ng2-file-select is used for 'file-input' field of form and ng2-file-drop is used for area that will be used for dropping of file or files.

ng new angular-file-upload
cd angular-file-upload
npm i ng2-file-upload --save
ng g component file-upload
ng add @angular/material

eg.

let data = new FormData();

let fileItem = this.uploader.queue[j]._file;

console.log(fileItem.name);

data.append('file', fileItem);

data.append('fileSeq', 'seq'+j);

data.append( 'dataType', this.uploadForm.controls.type.value);

data.append('name',this.name);

this.uploadFile(data).subscribe(data => alert(data));

}

this.uploader.clearQueue();

}

uploadFile(data: FormData)//: Observable<FormData>

{

return this.http.post('http://localhost:8080/upload', data);

}

-