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