Créer un projet Angular2

Introduction :

Nous allons voir comment créer un projet de développement avec Angular2 et TypeScript.

 

Prérequis :

  • Installer Node.js et npm

ou

Si vous utilisez Visual Studio suivez les étapes de la Partie 1 A sinon suivez la Partie 1 B.

 

Partie 1 A :

Lancez Visual Studio et créer un nouveau projet.

Vous devriez voir apparaître dans Templates->Visual C#->Angular2WebTemplate (comme l'illustration ci dessous).

Le template génère toute la structure d'un projet Angular2 compilable sous Visual Studio.

Une fois le projet créer faites une restauration des packages via NuGet, en faisant un clic droit sur votre projet et Manage NuGetPackage puis Restore.

Installer les derrières dépendances NuGet que votre projet aurait besoin si toutefois elle n'y serait pas, tels que :

  • Node.js v5.x.x
  • Npm.js v3.x.x
  • Typescript.Compiler v2.x.x

Vous pouvez maintenant passé à la partie 2.

 

Partie 1 B :

Utilisez le terminal ou invite de commande pour créer le répertoire du projet et déplacez-vous à ce dernier.

mkdir angular2-quickstart
cd angular2-quickstart

Il nous faut maintenant créer nos fichiers de configurations:

  • package.json (ce fichier contient les dépendances du projet, npm)
  • tsconfig.json (ce fichier définit la façon dont le compilateur de Typescript génère du Javascript à partir des fichiers du projet)
  • typings.json
  • systemjs.config.js

 

Partie 2 :

Créer/Modifiez chacun des fichiers citez plus haut dans le répertoire de votre projet. Copier-Coller le contenu ci-dessous:

package.json

{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"@angular/upgrade": "2.0.0",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23",
"angular2-in-memory-web-api": "0.0.20",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.2.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.2",
"typings":"^1.3.2"
}
}

tsconfig.json

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}

typings.json

{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160725163759",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160909174046"
}
}

systemjs.config.js

/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);

Votre projet Angular2 est maintenant créé et configuré pour son développement.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *