A tester !

Unit testing routes configuration with angular.

Exemple upload côté client :
fichier html

<input type="file" #package (change)="prepareFile(package.files)" class="is-small fileupload"/>
<button type="button" class="button is-small" (click)="importPackage()" [disabled]="!this.validPackage">Valider</button>

fichier ts :

selectedPackage: any;

prepareFile(files: any) {
   this.selectedPackage = files;
    //exemple pour bloquer l'upload si on a pas affaire à un zip :
   if(files != null){
      let extension = files[0].name.split('.').pop();
      if(extension == "zip" || extension == "ZIP"){
         this.validPackage = true;
      }else{
         this.validPackage= false;
      }
   }
}

importPackage(): void {
   let file: File = this.selectedPackage[0];
   this.packageService.uploadFile(file).subscribe(
       result => this.onFileUploaded(result)
   );
}

onFileUploaded(result: any): void {
   this.selectedPackage = null;
}

packageService.ts

uploadFile(file: File): Observable<Entity[]> {
   let formData: FormData = new FormData();
   formData.append('file', file, file.name);

   const url = `${this.getUrl()}/upload`;
   return this.http.post(url, formData)
                                .map(res => this.extractListFromResponse(res))
                                .catch(res => this.handleError(res))
}

Dans notre cas, le retour de la requete est une liste d'item. A vous de voir de votre côté.

Controller côté java:

@RequestMapping(value = "/upload", method = RequestMethod.POST)
public ResponseEntity uploadFile(@RequestParam("file") MultipartFile file) {

        if (!file.isEmpty()) {
            try {
                return new ResponseEntity<>(this.packageService.uploadPackage(file.getBytes()), HttpStatus.OK);
            } catch (GenericBELException | IOException e) {
                return super.forwardException("Impossible de récupérer le package " + file.getOriginalFilename(), e);
            }
        } else {
            return this.createStructuredResponse("Impossible de récupérer le package " + file.getOriginalFilename() + ". Il était vide à la réception.", HttpStatus.NO_CONTENT);
        }
}

A partir du file, vous pouvez extraire le contenu avec des BufferReader.

http.service.ts

import {Injectable} from '@angular/core';
import {Http, XHRBackend, RequestOptions, Request, RequestOptionsArgs, Response, Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class HttpService extends Http {

  constructor (backend: XHRBackend, options: RequestOptions) {
    let token = localStorage.getItem('auth_token'); // your custom token getter function here
    options.headers.set('Authorization', `Bearer ${token}`);
    super(backend, options);
  }

  request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
    let token = localStorage.getItem('auth_token');
    if (typeof url === 'string') { // meaning we have to add the token to the options, not in url
      if (!options) {
        // let's make option object
        options = {headers: new Headers()};
      }
      options.headers.set('Authorization', `Bearer ${token}`);
    } else {
    // we have to add the token to the url object
      url.headers.set('Authorization', `Bearer ${token}`);
    }
    return super.request(url, options).catch(this.catchAuthError(this));
  }

  private catchAuthError (self: HttpService) {
    // we have to pass HttpService's own instance here as `self`
    return (res: Response) => {
      console.log(res);
      if (res.status === 401 || res.status === 403) {
        // if not authenticated
        console.log(res);
      }
      return Observable.throw(res);
    };
  }
}

Cettte technique géniale permet de distinguer deux applications autonomes au sein d'un seul et même repo angular2 (ou 4).

Super option.

Gérer la récupération des fichiers avec Angular4 peut être un vrai casse-tête : entre les problèmes de compatibilité lié au navigateur et l'API de service qui ne répond pas facilement à ce besoin, j'ai trouvé cette petite librairie bien pratique.

On l'appelle de cette manière :

import { Component } from '@angular/core';
import { ZipService} from '../services/ZipService';
import { saveAs as importedSaveAs } from "file-saver";

@Component({
  selector: 'zip-zip',
  templateUrl: './zip-component.html'
})
export class ZipComponent {

  private zipService: ZipService;

  constructor(zipService: ZipService) {
    this.zipService= zipService;
  }

  public getZipFile(): any {
    this.zipService.downloadZipFile().subscribe(
              (data: any) => {
                importedSaveAs(new Blob([data], {type: 'application/zip'}), 'filename.zip');
            },
            error => this.doSomething(),
            () => this.doSomething()
        );
  }

}

Mes petites options de build pour la prod : ng build --prod --env=prod --aot

Bon, personnellement, je ne suis pas fan du ng-cli, mais reconstruire le build angular à la main, c'est juste la croix et la bannière.

Heureusement, il y a le .angular-cli.json, qui permet de configurer à minima le tin-touin. C'est notamment utile lorsque l'on souhaite changer l'icône du site ou rajouter des fichiers css perso, voire des fonts.

Exemple :

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "Mon application"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",   
        "logo-brand.png"    <-------- nouvelle icone qui apparaitra dans l'onglet navigateur (à configurer ensuite dans le index.html)
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test/test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",                                                  <------ On peut changer le nom du composant de base
      "styles": [
        "assets/css/bulma.css",                              <------ On peut rajouter ici des css perso
        "assets/css/fontawesome-all.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

Les différents binding de key event définis dans Angular4.

Certains codes de retour HTTP sont gérés directement par le framework Angular et ne peuvent pas être récupérés au niveau de la requête. C'est notamment le cas pour le code 401, très souvent utilisé puisqu'il informe que l'utilisateur n'est pas loggué en session.

Une manip existante consiste à surcharger le comportement natif du composant HTTP en spécifiant le comportement sur le code erreur de votre choix.

Voici comment rajouter la gestion des codes 401 à une application Angular 4 :

app.module.ts

import { HttpModule, Http } from '@angular/http';

import { AppComponent } from './app.component';

import { AuthenticatedHttpService } from './services/AuthenticatedHttpService';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule
  ],
  providers: [ { provide: Http, useClass: AuthenticatedHttpService } ],
  bootstrap: [ AppComponent ]
})

authenticatedHttpService.ts

import { Injectable } from '@angular/core';
import { Request, XHRBackend, RequestOptions, Response, Http, RequestOptionsArgs, Headers } from '@angular/http';
import { Router, NavigationEnd, Event } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

/**
 * This class handles generically the error on authentication (code 401).
 */
@Injectable()
export class AuthenticatedHttpService extends Http {

  private router: Router;

  constructor(backend: XHRBackend, defaultOptions: RequestOptions, router: Router) {
    super(backend, defaultOptions);
    this.router = router;
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    return super.request(url, options).catch((error: Response) => {
            if ((error.status === 401 || error.status === 403) && (window.location.href.match(/\?/g) || []).length < 2) {

                      //DO SOMETHING HERE
                      //exemple : 
                      if(window.location.href != '/login') {
                            this.router.navigate(['/login']);
                       }

            }
            return Observable.throw("request authentication");
        });
  }
}