Configuration d’un projet Angular 2.1.0 (version finale) avec Webpack

Avec l’automne, la version finale de Angular 2 est arrivé. Actuellement en version 2.1.0, le Framework JavaScript de Google offre beaucoup de fonctionnalités et mets le développement du stack Front-End des applications JavaScript sur un autre niveau super agréable, mais surtout fun.

Après avoir travaillé avec Angular 2 dépuis la version RC 2, j’ai suivi pas mal de changements dans le développement du Framework pendant les derniers mois.

Dans cet article-ci j’aimerais bien partager quelques conclusions pour un setup de base d’un application Single Page Angular 2.1.0. J’utilise le module bundler Webpack, NPM, le compiler de TypeScript et je montre le rechargement en live et comment on peut faire source mapping pour debugger l’application Angular 2 facilement dans un navigateur comme Chrome. En gros j’aimerais bien donner un aperçu de base aux questions suivants :

  • C’est quoi WebPack
  • Comment utiliser WebPack dans un appli Angular 2
  • Comment peut-on transpiler un appli en mode développement et production

Tout d’abord il faut créer la structure d’un projet, et l’ouvrir dans un editor de choix – ici Visual Studio Code, un très bon editor gratuit de Microsoft.

01-projectsetup

Les fichiers les plus importants sont package.json, tsconfig.json et webpack.config.js. Dans ceux fichiers-ci on retrouve la logique de configuration de ce projet-là.

{
  "name": "angular2-starter",
  "version": "0.1.0",
  "scripts": {
    "build": "webpack --progress",
    "build:prod": "webpack -p --progress",
    "postinstall": "typings install",
    "serve":"webpack-dev-server --inline --progress"
  },
  "dependencies": {
    "@angular/common": "~2.1.1",
    "@angular/compiler": "~2.1.1",
    "@angular/core": "~2.1.1",
    "@angular/http": "~2.1.1",
    "@angular/forms": "~2.1.1",
    "@angular/platform-browser": "~2.1.1",
    "@angular/platform-browser-dynamic": "~2.1.1",
    "@angular/router": "~3.1.1",
    "@angular/upgrade": "~2.1.1",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "html-webpack-plugin": "^2.24.1",
    "ts-loader": "^1.0.0",
    "typescript": "^2.0.7",
    "typings": "^1.5.0",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  }
}

package.json est utilise pour charger les libraries dépendantes pour l’application. C’est conseillé de télécharger une version spécifique d’une bibliothèque pour ne pas briser l’application un jour. Néanmoins, ici j’utilise la dernière version des bibliothèques de la journée de la création. Ici on configure aussi les modes dev et prod.

{
    "compilerOptions": {
        "target": "es5",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    }
}

tsconfig.json est important pour configurer TypeScript. Alors que c’est possible de développer un appli Angular 2 aussi avec JavaScript par exemple, on peut se vraiment faciliter la vie en utilisant TypeScript au lieu de JS.

On met le target de la transpilation sur es5, pour permettre aussi aux vieux navigateurs d’utiliser notre application. En plus il faut permettre quelques features de es6 de fonctionner dans notre TypeScript codage.

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devtool: 'source-map',
    entry: './src/main.ts',
    output: {
        path: './dist',
        filename: 'app.bundle.js'
    },
    module: {
        loaders: [
            {test: /\.ts$/, loader: 'ts'}
        ]
    },
    resolve: {
        extensions: ['', '.js', '.ts']
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
};

webpack.config.js, c’est le cœur de notre application, on configure WebPack avec.

En gros, WebPack c’est un module bundler, donc un outil qui permet de mettre le codage JS d’un server sur la côté du client. C’est-à-dire, WebPack peut faire pas mal de choses, et est riche de plugins. Ici on l’utilise pour :

  • Ajouter un lien vers bundle.js dans le index.html
  • Transpiler notre TS et Uglify notre JavaScript
  • Source Mapping (Map Js to TypeScript, pour debugger)
  • Live Reload

Au-dessous se trouvent les fichiers TypeScript et HTML qui sont utilisés par notre application. On utilise un main.ts pour bootstraper l’appli, un index.html, un app module et un premier component. Pour savoir plus autour de Angular 2, je conseille le Quick Start sur le site Web de Angular.

import 'core-js';
import 'reflect-metadata';
import 'zone.js/dist/zone';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';

import { AppModule } from './app/app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8" />
        <title>Angular 2 Appli</title>
    </head>
    <body>
        <my-app>Chargement...</my-app>
    </body>
</html>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

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

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations:[
        AppComponent
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }
import { Component } from '@angular/core';

@Component({
    selector:'my-app',
    template:`
        <h1>Mon Appli</h1>
    `
})
export class AppComponent {
    
}

Avant que ça fonctionne, il faut exécuter quelques commands de NPM et WebPack dans notre console :

  1. npm install
  2. npm install –save-dev typescript
  3. npm install –save-dev typings
  4. npm install –save-dev webpack
  5. npm install –save-dev ts-loader
  6. npm install –save-dev html-webpack-plugin
  7. npm install –save-dev webpack-dev-server
  8. npm run build (npm run build:prod)
  9. webpack –progress
  10. npm run serve

Ben, c’est tout 😉 Depuis récemment il y a aussi le Angular CLI, qui peut faciliter le setup de base d’un appli Angular 2. Néanmoins, le CLI est encore en version Beta en ce moment.

De toute façon Angular 2 Rocks !!