Angular2 is around the corner. The new version of the framework is much simpler to learn thanks to easier and more concise concepts like component-based architecture, new dependency injection or built-in modularity. In this step-by-step tutorial you will learn how how to get started with Angular2 with TypeScript and Gulp. Source code available on Github.<\/p>\n
Angular 1.x is probably still the most popular Front-end framework these days and there is no doubt Angular 1.x is a great framework. However it is incredibly difficult to master. The complex API and many concepts introduced since its launch make understanding the framework and thus using it effectively really hard.<\/p>\n
Angular2, on the other hand, is a new opening. The new version of the framework is much simpler to learn thanks to easier and more concise concepts like component-based architecture, new dependency injection or built-in modularity.<\/p>\n
If you want to practice and start learning Angular2 there is no better place than angular.io<\/a>. But if you are looking for the ways of utilizing Angular2 with Gulp – this tutorial is for you.<\/p>\n Note<\/em><\/strong>: The source code for this article can be found on Github: https:\/\/github.com\/kolorobot\/angular2-typescript-gulp<\/a>. I assume the repository gets updated quite often.<\/p>\n The initial project is based on the Angular2 Quickstart: https:\/\/angular.io\/docs\/ts\/latest\/quickstart.html<\/a> with some changes. The most important change is to separate source files from build files: The script for creating directory structure:<\/p>\n Assuming node and npm is already installed, you may install global dependencies by invoking the following command:<\/p>\n Required global dependencies in order to run the project:<\/p>\n Compiled files will be saved intto Note: If you import your project to IDE (e.g. IntelliJ) let the IDE use this file too.<\/p>\n To get started we need only one definition run the following command:<\/p>\n which will append the following content to Typings will be download to A word about scripts:<\/p>\n By default the content is served from the current directory so this needs to be changed. And since Lite Server uses BrowserSync it enough to provide To get started we need a task(s) that compiles TypeScript files, copies assets and dependencies to a It is a high time to install all dependencies. Run:<\/p>\n Build the project:<\/p>\n Run the server:<\/p>\n The empty page should be displayed in the browser.<\/p>\n All the basic infrastucture<\/em> is in place. It is a high time to create the application.<\/p>\n The libraries are reference from IntelliJ handles the proposed setup with no problem. If TypeScript compiler is used in IntelliJ it should use the project\u2019s tsconfig.json. In such case, changes to ts files will be reflected in https:\/\/github.com\/kolorobot\/angular2-typescript-gulp<\/a><\/p>\n Much more is needed to make real use of this project. Therefore more features will be added soon. If you have any suggestion, comment or add Github issues.<\/p>\n If you need more mature starter, have a look at angular2-seed project https:\/\/github.com\/mgechev\/angular2-seed<\/a>. angular2-seed uses gulp in much more advanced way and it is already supporting production and development build, unit and integration tests and many more.<\/p>\nProject layout<\/h2>\n
src<\/code> directory contains all the source files and build<\/code> contains all compiled and processed files. The server uses build<\/code> directory as a base directory to serve content.<\/p>\nangular2-typescript-gulp\r\n| .gitignore\r\n| bs-config.json -> BrowserSync configuration\r\n| gulpfile.ts -> Gulp in TypeScript\r\n| package.json -> npm configuration\r\n| tsconfig.json -> TypeScript configuration\r\n| typings.json -> TypeScript typings definitions\r\n|\r\n\\---src\r\n | index.html -> Starting point for the application\r\n |\r\n \\---app -> Application modules\r\n app.component.ts -> Main application component\r\n app.html -> Main application template\r\n main.ts -> Application bootstrap<\/pre>\n
\r\nmkdir angular2-typescript-gulp\\src\\app\r\ncd angular2-typescript-gulp\r\ntouch .gitignore bs-config.json gulpfile.ts package.json tsconfig.json typings.json\r\ncd src\r\ntouch index.html\r\ncd app\r\ntouch app.component.ts app.html main.ts\r\n<\/pre>\n
NPM global dependencies<\/h2>\n
npm i -g <dependency><\/pre>\n
\n
TypeScript confguration – tsconfig.ts<\/h2>\n
build\/app<\/code>. Please note that gulpfile.ts<\/code> is excluded from the compilation.<\/p>\n{\r\n \"compilerOptions\": {\r\n \"outDir\": \"build\/app\",\r\n \"target\": \"es5\",\r\n \"module\": \"system\",\r\n \"moduleResolution\": \"node\",\r\n \"sourceMap\": true,\r\n \"emitDecoratorMetadata\": true,\r\n \"experimentalDecorators\": true,\r\n \"removeComments\": false,\r\n \"noImplicitAny\": false\r\n },\r\n \"exclude\": [\r\n \"gulpfile.ts\",\r\n \"node_modules\",\r\n \"typings\/main\",\r\n \"typings\/main.d.ts\"\r\n ]\r\n}<\/pre>\nTypings – typings.json<\/h2>\n
\r\ntypings install es6-shim \u2013ambient \u2013save\r\n<\/pre>\n
typings.json<\/code><\/p>\n{\r\n \"ambientDependencies\": {\r\n \"es6-shim\": \"github:DefinitelyTyped\/DefinitelyTyped\/es6-shim\/es6-shim.d.ts#4de74cb527395c13ba20b438c3a7a419ad931f1c\"\r\n }\r\n}<\/pre>\ntypings<\/code> directory and they will be downloaded on npm install<\/code>.<\/p>\nnpm configuration – package.json<\/h2>\n
{\r\n \"name\": \"angular2-typescript-gulp\",\r\n \"version\": \"1.0.0\",\r\n \"description\": \"Angular2 with TypeScript and Gulp QuickStart\",\r\n \"scripts\": {\r\n \"clean\": \"gulp clean\",\r\n \"compile\": \"gulp compile\",\r\n \"build\": \"gulp build\",\r\n \"server\": \"lite-server\",\r\n \"postinstall\": \"typings install\"\r\n },\r\n \"repository\": {\r\n \"type\": \"git\",\r\n \"url\": \"https:\/\/github.com\/kolorobot\/angular2-typescript-gulp.git\"\r\n },\r\n \"author\": \"Rafa\u0142 Borowiec\",\r\n \"license\": \"MIT\",\r\n \"bugs\": {\r\n \"url\": \"https:\/\/github.com\/kolorobot\/angular2-typescript-gulp\/issues\"\r\n },\r\n \"dependencies\": {\r\n \"angular2\": \"2.0.0-beta.7\",\r\n \"systemjs\": \"0.19.22\",\r\n \"es6-promise\": \"^3.0.2\",\r\n \"es6-shim\": \"^0.33.3\",\r\n \"reflect-metadata\": \"0.1.2\",\r\n \"rxjs\": \"5.0.0-beta.2\",\r\n \"zone.js\": \"0.5.15\"\r\n },\r\n \"devDependencies\": {\r\n \"concurrently\": \"^2.0.0\",\r\n \"del\": \"^2.2.0\",\r\n \"gulp\": \"^3.9.1\",\r\n \"gulp-typescript\": \"^2.12.0\",\r\n \"gulp-sourcemaps\": \"^1.6.0\",\r\n \"lite-server\": \"^2.1.0\",\r\n \"typescript\": \"^1.8.2\",\r\n \"typings\": \"^0.6.8\"\r\n }\r\n}<\/pre>\n\n
clean<\/code> – removes build<\/code> directory<\/li>\ncompile<\/code> – TypeScript compilation (with sourcemaps)<\/li>\nbuild<\/code> – build the project<\/li>\nserver<\/code> – runs lite server which uses configuration from bs-config.json<\/code><\/li>\n<\/ul>\nBrowserSync configuration (lite-server)<\/h2>\n
bs-config.json<\/code> that configures the server to serve content from build<\/code> directory.<\/p>\n{\r\n \"port\": 8000,\r\n \"files\": [\r\n \"build\/**\/*.{html,htm,css,js}\"\r\n ],\r\n \"server\": {\r\n \"baseDir\": \"build\"\r\n }\r\n}<\/pre>\nBuilding the project with Gulp<\/h2>\n
build<\/code> directory. Several tasks are needed in order to achieve it.<\/p>\nvar gulp = require(\"gulp\");\r\nvar del = require(\"del\");\r\nvar tsc = require(\"gulp-typescript\");\r\nvar sourcemaps = require('gulp-sourcemaps');\r\nvar tsProject = tsc.createProject(\"tsconfig.json\");\r\n\r\n\/**\r\n * Remove build directory.\r\n *\/\r\ngulp.task('clean', (cb) => {\r\n return del([\"build\"], cb);\r\n});\r\n\r\n\/**\r\n * Compile TypeScript sources and create sourcemaps in build directory.\r\n *\/\r\ngulp.task(\"compile\", () => {\r\n var tsResult = gulp.src(\"src\/**\/*.ts\")\r\n .pipe(sourcemaps.init())\r\n .pipe(tsc(tsProject));\r\n return tsResult.js\r\n .pipe(sourcemaps.write(\".\"))\r\n .pipe(gulp.dest(\"build\"));\r\n});\r\n\r\n\/**\r\n * Copy all resources that are not TypeScript files into build directory.\r\n *\/\r\ngulp.task(\"resources\", () => {\r\n return gulp.src([\"src\/**\/*\", \"!**\/*.ts\"])\r\n .pipe(gulp.dest(\"build\"))\r\n});\r\n\r\n\/**\r\n * Copy all required libraries into build directory.\r\n *\/\r\ngulp.task(\"libs\", () => {\r\n return gulp.src([\r\n 'es6-shim\/es6-shim.min.js',\r\n 'systemjs\/dist\/system-polyfills.js',\r\n 'angular2\/bundles\/angular2-polyfills.js',\r\n 'systemjs\/dist\/system.src.js',\r\n 'rxjs\/bundles\/Rx.js',\r\n 'angular2\/bundles\/angular2.dev.js',\r\n 'angular2\/bundles\/router.dev.js'\r\n ], {cwd: \"node_modules\/**\"}) \/* Glob required here. *\/\r\n .pipe(gulp.dest(\"build\/lib\"));\r\n});\r\n\r\n\/**\r\n * Build the project.\r\n *\/\r\ngulp.task(\"build\", ['compile', 'resources', 'libs'], () => {\r\n console.log(\"Building the project ...\")\r\n});<\/pre>\nInstalling dependencies and checking the build<\/h2>\n
\r\nnpm install\r\n<\/pre>\n
node_modules<\/code> and typings<\/code> directories should be created during the install.<\/p>\n\r\nnpm run clean & npm run build\r\n<\/pre>\n
build<\/code> directory should be created during the build<\/p>\nbuild \r\n| index.html \r\n| \r\n+---app \r\n| app.component.js \r\n| app.component.js.map \r\n| app.html \r\n| main.js \r\n| main.js.map\r\n| \r\n\\---lib \r\n +---angular2 \r\n | \\---bundles \r\n | angular2-polyfills.js\r\n | angular2.dev.js \r\n | router.dev.js \r\n | \r\n +---es6-shim \r\n | es6-shim.min.js \r\n | \r\n +---rxjs \r\n | \\---bundles \r\n | Rx.js \r\n | \r\n \\---systemjs \r\n \\---dist \r\n system-polyfills.js \r\n system.src.js<\/pre>\n
\r\nnpm run server\r\n<\/pre>\n
Creating the application<\/h2>\n
src\/app\/app.component.ts<\/h3>\n
import {Component} from \"angular2\/core\";\r\nimport {OnInit} from \"angular2\/core\";\r\n\r\n@Component({\r\n selector: \"app\",\r\n templateUrl: \".\/app\/app.html\"\r\n})\r\nexport class AppComponent implements OnInit {\r\n\r\n ngOnInit() {\r\n console.log(\"Application component initialized ...\");\r\n }\r\n}<\/pre>\nsrc\/app\/app.html<\/h3>\n
<p>Angular 2 is running ... <\/p><\/pre>\n
src\/app\/main.ts<\/h3>\n
import {bootstrap} from \"angular2\/platform\/browser\";\r\nimport {AppComponent} from \".\/app.component\";\r\n\r\nbootstrap(AppComponent);<\/pre>\nsrc\/index.html<\/h3>\n
lib<\/code> directory that is created during the build<\/code> task.<\/p>\n<html>\r\n<head>\r\n <title>Angular 2 TypeScript Gulp QuickStart<\/title>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n\r\n <!-- 1. Load libraries -->\r\n <!-- IE required polyfills, in this exact order -->\r\n <script src=\"lib\/es6-shim\/es6-shim.min.js\"><\/script>\r\n <script src=\"lib\/systemjs\/dist\/system-polyfills.js\"><\/script>\r\n\r\n <script src=\"lib\/angular2\/bundles\/angular2-polyfills.js\"><\/script>\r\n <script src=\"lib\/systemjs\/dist\/system.src.js\"><\/script>\r\n <script src=\"lib\/rxjs\/bundles\/Rx.js\"><\/script>\r\n <script src=\"lib\/angular2\/bundles\/angular2.dev.js\"><\/script>\r\n\r\n <!-- 2. Configure SystemJS -->\r\n <script>\r\n System.config({\r\n packages: {\r\n app: {\r\n format: 'register',\r\n defaultExtension: 'js'\r\n }\r\n }\r\n });\r\n System.import('app\/main')\r\n .then(null, console.error.bind(console));\r\n <\/script>\r\n\r\n<\/head>\r\n\r\n<!-- 3. Display the application -->\r\n<body>\r\n<app>Loading...<\/app>\r\n<\/body>\r\n\r\n<\/html><\/pre>\nBuilding and running<\/h2>\n
\r\nnpm run clean & npm run build\r\nnpm run server\r\n<\/pre>\n
Notes on IntelliJ<\/h2>\n
build<\/code> directory immediately.<\/p>\nSource code<\/h2>\n
What\u2019s next?<\/h2>\n
angular2-seed<\/h2>\n