Tuesday, March 1, 2016

Quickstart: Angular2 with TypeScript and Gulp

Angular2 is out. 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.

General notes

Change Log

  • 15/09/2016 - Upgraded Angular2 to 2.0.0 Revisited the article, added new code to reflect code in the repository. Added quickstart guide.
  • 06/09/2016 - Upgraded Angular2 to 2.0.0-rc.6
  • 05/06/2016 - typings updated to 1.0.4. Section related to that part changed too.
  • 05/05/2016 - Upgraded Angular2 to 2.0.0-rc.1
  • 22/04/2016 - Upgraded Angular2 to 2.0.0-beta.15
  • 26/03/2016 - Upgraded Angular2 to 2.0.0-beta.12, README, npm start instead of npm run server, minor gulpfile.ts adjustments (const instead of let)
  • 21/03/2016 - Upgraded Angular2 to 2.0.0-beta.11 (the post itself as well as the source code)

Get started quickly

If you are not interested in a step by step tutorial, simply follow the below steps to get started quickly.

1. Prerequisites

nodejs must be installed on your system and the below global node packages must be installed:

  • gulp

npm i -g gulp

  • gulp-cli

npm i -g gulp-cli

  • typings

npm i -g typings@1.3.3

  • typescript

npm i -g typescript@2.0.2

  • ts-node

npm i -g ts-node@1.3.0

2. Cloning the repository

Clone the repository:

git clone https://github.com/kolorobot/angular2-typescript-gulp.git

Navigate to angular2-typescript-gulp directory:

cd angular2-typescript-gulp

3. Installing dependencies

Install dependencies by running the following command:

npm install

node_modules and typings directories will be created during the install.

4. Building the project

Build the project by running the following command:

npm run clean & npm run build

build directory will be created during the build

5. Starting the application

Start the application by running the following command:

npm start

The application will be displayed in the browser.

Introduction

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.

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.

If you want to practice and start learning Angular2 there is no better place than angular.io. But if you are looking for the ways of utilizing Angular2 with Gulp - this tutorial is for you.

Note: The source code for this article can be found on Github: https://github.com/kolorobot/angular2-typescript-gulp.

Project layout

The initial project is based on the Angular2 Quickstart: https://angular.io/docs/ts/latest/quickstart.html with some changes. The most important change is to separate source files from build files: src directory contains all the source files and build contains all compiled and processed files. The server uses build directory as a base directory to serve content.

angular2-typescript-gulp
|   .gitignore
|   bs-config.json  -> BrowserSync configuration
|   gulpfile.ts     -> Gulp in TypeScript
|   package.json    -> npm configuration
|   tsconfig.json   -> TypeScript configuration
|   typings.json    -> TypeScript typings definitions
|   tslint.json     -> tslint configuration
|
\---src
│   │   index.html                 -> Starting point for the application
│   │   systemjs.config.js         -> SystemJS configuration
│   │
│   \---app                       -> Application modules
│       │   app.component.ts          -> Main application component
│       │   app.html              -> Main application template 
│       │   app.module.ts         -> Application module definition       
│       │   app.routing.ts        -> Routing configuration      
│       │   main.ts               -> Application bootstrap   
│       │
│       \---about 
│       │   └───components
│       │           about.components.ts
│       │           about.html
│       │
│       \---todo
│           ├───components
│           │       task-list.component.ts
│           │       task-list.css
│           │       task-list.html
│           │       task.component.ts
│           │       task.html
│           │
│           \---models
│           │       task.ts
│           │
│           \---services
│                   task-service.ts

NPM global dependencies

Assuming node and npm is already installed, you may install global dependencies by invoking the following command:

npm i -g <dependency>

Required global dependencies in order to run the project:

  • gulp and gulp-cli

npm i -g gulp
npm i -g gulp-cli

  • typings

npm i -g typings@1.3.3

  • typescript

npm i -g typescript@2.0.2

  • ts-node

npm i -g ts-node@1.3.0

Note: To check global dependencies use the following command:

npm -g –depth 0 ls

Creating project directories and files

Create directory and files structure as presented above.

Build configuration

1. TypeScript confguration - tsconfig.ts

Compiled files will be saved intto build/app. Please note that gulpfile.ts is excluded from the compilation.

{
  "compilerOptions": {
    "outDir": "build/app",
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "gulpfile.ts",
    "node_modules"
  ]
}

Note: If you import your project to IDE (e.g. IntelliJ) let the IDE use this file too.

2. Typings - typings.json

To get started we need some definitions to be installed. Run the following commands:

typings install –global –save dt~core-js
typings install –global –save dt~node

which will append to typings.json

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

Typings will be download to typings directory and they will be downloaded on npm install.

3. npm packages and scripts configuration - package.json

A word about the scripts:

  • clean - removes build directory
  • compile - TypeScript compilation (with sourcemaps)
  • build - build the project
  • start - runs lite server which uses configuration from bs-config.json It also uses watch tasks to synchronize any changes to the source directory
{
  "name": "angular2-typescript-gulp",
  "version": "1.0.0",
  "description": "Angular2 with TypeScript and Gulp QuickStart",
  "scripts": {
    "clean": "gulp clean",
    "compile": "gulp compile",
    "build": "gulp build",
    "start": "concurrent --kill-others \"gulp watch\" \"lite-server\"",
    "postinstall": "typings install"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/kolorobot/angular2-typescript-gulp.git"
  },
  "author": "Rafał Borowiec",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/kolorobot/angular2-typescript-gulp/issues"
  },
  "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"
  },
  "devDependencies": {
    "concurrently": "^2.2.0",
    "del": "^2.2.0",
    "gulp": "^3.9.1",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-tslint": "^6.1.1 ",
    "gulp-typescript": "^2.13.6",
    "lite-server": "^2.2.2",
    "tslint": "^3.5.0",
    "typescript": "^2.0.2",
    "typings": "^1.3.3",
    "ts-node": "^1.3.0"
  }
}

4. BrowserSync configuration - lite-server

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 bs-config.json that configures the server to serve content from build directory.

{
  "port": 8000,
  "files": [
    "build/**/*.{html,htm,css,js}"
  ],
  "server": {
    "baseDir": "build"
  }
}

5. tslint - tslint.json

TSLint checks TypeScript code for readability, maintainability, and functionality errors and in Gulp it can be used with gulp-tslint plugin.

tslint.json is used to configure which rules that get run. Simply add the file to the root directory of the project. You should adjust rules to your needs. You can find more information about the rules here: http://palantir.github.io/tslint/usage/tslint-json/

{
  "rules": {
    "class-name": true,
    "curly": true,
    "eofline": false,
    "forin": true,
    "indent": [
      true,
      4
    ],
    "label-position": true,
    "label-undefined": true,
    "max-line-length": [
      true,
      140
    ],
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [
      true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-key": true,
    "no-duplicate-variable": true,
    "no-empty": false,
    "no-eval": true,
    "no-string-literal": false,
    "no-trailing-whitespace": true,
    "no-unused-variable": false,
    "no-unreachable": true,
    "no-use-before-declare": true,
    "one-line": [
      true,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-whitespace"
    ],
    "radix": true,
    "semicolon": true,
    "triple-equals": [
      true,
      "allow-null-check"
    ],
    "variable-name": false,
    "whitespace": [
      true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator"
    ]
  }
}

Note: For IntelliJ users, configure TSLint as described here: https://www.jetbrains.com/idea/help/tslint.html to get instant notifications during file editing.

6. Build configuration with Gulp - gulpfile.ts

To get started we need a task(s) that compiles TypeScript files, copies assets and dependencies to a build directory. Several tasks are needed in order to achieve it.

Note: Gulp file is created in TypeScript instead of JavaScript. It requires ts-node to execute as stated in the beginning of this tutorial.

"use strict";

const gulp = require("gulp");
const del = require("del");
const tsc = require("gulp-typescript");
const sourcemaps = require('gulp-sourcemaps');
const tsProject = tsc.createProject("tsconfig.json");
const tslint = require('gulp-tslint');

/**
 * Remove build directory.
 */
gulp.task('clean', (cb) => {
    return del(["build"], cb);
});

/**
 * Lint all custom TypeScript files.
 */
gulp.task('tslint', () => {
    return gulp.src("src/**/*.ts")
        .pipe(tslint({
            formatter: 'prose'
        }))
        .pipe(tslint.report());
});

/**
 * Compile TypeScript sources and create sourcemaps in build directory.
 */
gulp.task("compile", ["tslint"], () => {
    let tsResult = gulp.src("src/**/*.ts")
        .pipe(sourcemaps.init())
        .pipe(tsc(tsProject));
    return tsResult.js
        .pipe(sourcemaps.write(".", {sourceRoot: '/src'}))
        .pipe(gulp.dest("build"));
});

/**
 * Copy all resources that are not TypeScript files into build directory.
 */
gulp.task("resources", () => {
    return gulp.src(["src/**/*", "!**/*.ts"])
        .pipe(gulp.dest("build"));
});

/**
 * Copy all required libraries into build directory.
 */
gulp.task("libs", () => {
    return gulp.src([
            'core-js/client/shim.min.js',
            'systemjs/dist/system-polyfills.js',
            'systemjs/dist/system.src.js',
            'reflect-metadata/Reflect.js',
            'rxjs/**',
            'zone.js/dist/**',
            '@angular/**'
        ], {cwd: "node_modules/**"}) /* Glob required here. */
        .pipe(gulp.dest("build/lib"));
});

/**
 * Watch for changes in TypeScript, HTML and CSS files.
 */
gulp.task('watch', function () {
    gulp.watch(["src/**/*.ts"], ['compile']).on('change', function (e) {
        console.log('TypeScript file ' + e.path + ' has been changed. Compiling.');
    });
    gulp.watch(["src/**/*.html", "src/**/*.css"], ['resources']).on('change', function (e) {
        console.log('Resource file ' + e.path + ' has been changed. Updating.');
    });
});

/**
 * Build the project.
 */
gulp.task("build", ['compile', 'resources', 'libs'], () => {
    console.log("Building the project ...");
});

7. Installing dependencies and checking the build

It is a high time to install all dependencies. Run:

npm install

node_modules and typings directories should be created during the install.

Build the project:

npm run clean & npm run build

build directory should be created during the build

Note: Make sure you have at least ts-node 1.3.0 if you see the below during the compilation:

[00:49:42] Failed to load external module ts-node/register
[00:49:42] Failed to load external module typescript-node/register
[00:49:42] Failed to load external module typescript-register
[00:49:42] Failed to load external module typescript-require

Project configuration

1. Index - src/index.html

The libraries are reference from lib directory that is created during the build task.

<html>
<head>
    <title>Angular 2 TypeScript Gulp QuickStart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="lib/core-js/client/shim.min.js"></script>

    <script src="lib/zone.js/dist/zone.js"></script>
    <script src="lib/reflect-metadata/Reflect.js"></script>
    <script src="lib/systemjs/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app')
                .then(null, console.error.bind(console));
    </script>

</head>

<!-- 3. Display the application -->
<body>
<app>Loading...</app>
</body>

</html>

2. SystemJS configuration - src/systemjs.config.js

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'lib/'
        },
        // 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'
        },
        // 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'
            }
        }
    });
})(this);

Application components

1. Main application component - src/app/app.component.ts

import {Component, OnInit} from "@angular/core";

@Component({
    selector: "app",
    templateUrl: "./app/app.html"
})
export class AppComponent implements OnInit {
    ngOnInit() {
        console.log("Application component initialized ...");
    }
}

And its template (src/app/app.html):

<p>Angular 2 is running ... </p>

2. About module

About module consists of two basic building blocks - component and its template.

src/app/about/components/about.component.ts

import {Component} from "@angular/core";
import {OnInit} from "@angular/core";

@Component({
    templateUrl: './app/about/components/about.html'
})
export class AboutComponent implements OnInit {

    ngOnInit() {

    }
}

src/app/about/components/about.html

<h1>About</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

3. Todo module

Todo module is a bit complicated - it contains components, models and services sub-packages.

src/app/todo/components/task.component.ts

import {Component} from "@angular/core";
import {Input} from "@angular/core";

import {Task} from "../models/task";
import {Output} from "@angular/core";
import {EventEmitter} from "@angular/core";

@Component({
    selector: 'task',
    templateUrl: './app/todo/components/task.html'
})
export class TaskComponent {
    @Input() task:Task;
    @Output() statusChanged:any = new EventEmitter<any>();

    toggleDone() {
        this.task.toggleDone();
        this.statusChanged.emit(null);
    }
}

src/app/todo/components/task.html

<form role="form">
    <input title="Name" type="text" [(ngModel)]="task.name" name="name" [disabled]="task.done" />
    <input title="Done" type="checkbox" (click)="toggleDone()" [checked]="task.done" />
</form>

src/app/todo/components/task-list.component.ts

import {Component} from "@angular/core";
import {Task} from "../models/task";
import {OnInit} from "@angular/core";
import {TaskService} from "../services/task-service";
import {TaskComponent} from "./task.component";

@Component({
    selector: 'task-list',
    templateUrl: './app/todo/components/task-list.html',
    styleUrls: ['./app/todo/components/task-list.css'],
    providers: [TaskService]
})
export class TaskListComponent implements OnInit {

    todoCount:number;
    selectedTask:Task;
    tasks:Array<Task>;

    constructor(private _taskService:TaskService) {
        this.tasks = _taskService.getTasks();
        this.calculateTodoCount();
    }

    ngOnInit() {
        console.log("Todo component initialized with " + this.tasks.length + " tasks.");
    }

    calculateTodoCount() {
        this.todoCount = this.tasks.filter(t => !t.done).length;
    }

    select(task:Task) {
        this.selectedTask = task;
    }
}

src/app/todo/components/task-list.css

li.selected {
    background-color: #8a8a8a;
}

src/app/todo/components/task-list.html

<h1>Todo tasks ({{todoCount}})</h1>
<ul>
    <li *ngFor="let task of tasks" [class.selected]="task == selectedTask">
        <a href="javascript:void(0)" (click)="select(task)">
            {{task.name}}
            <span [ngSwitch]="task.done">
                <template [ngSwitchCase]="true">[Done]</template>
                <template [ngSwitchCase]="false">[Todo]</template>
            </span>
        </a>
    </li>
</ul>

<task *ngIf="selectedTask" [task]="selectedTask" (statusChanged)="calculateTodoCount()"></task>

src/app/todo/models/task.ts

export class Task {

    constructor(public name:string, public done:boolean) {
    }

    toggleDone() {
        this.done = !this.done;
    }
}

src/app/todo/services/task-service.ts

import {Injectable} from "@angular/core";
import {Task} from "../models/task";

@Injectable()
export class TaskService {

    private tasks:Array<Task> = [
        new Task("Task 1", false),
        new Task("Task 2", false),
        new Task("Task 3", false),
        new Task("Task 4", false),
        new Task("Task 5", false)
    ];

    getTasks():Array<Task> {
        return this.tasks;
    }

    addTask(name:string) {
        this.tasks.push(new Task(name, false));
    }

}

4. Angular2 Router - src/app/app.routing.ts

import {Routes, RouterModule} from '@angular/router';
import {TaskListComponent} from "./todo/components/task-list.component";
import {AboutComponent} from "./about/components/about.component";
import {ModuleWithProviders} from "@angular/core";

const appRoutes: Routes = [
    {path: 'tasks', component: TaskListComponent, data: {title: 'TaskList'}},
    {path: 'about', component: AboutComponent, data: {title: 'About'}}
];

export const appRoutingProviders: any[] = [];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, { useHash: true });

5. Module definition - src/app/app.module.ts

Angular Modules help organize an application into cohesive blocks of functionality.

import {NgModule}      from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

import {AppComponent} from "./app.component";
import {TaskListComponent} from "./todo/components/task-list.component";
import {AboutComponent} from "./about/components/about.components";
import {TaskComponent} from "./todo/components/task.component";

import {routing, appRoutingProviders} from './app.routing';
import {FormsModule} from "@angular/forms";

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        routing
    ],
    declarations: [
        AppComponent,
        TaskComponent,
        TaskListComponent,
        AboutComponent
    ],
    providers: [
        appRoutingProviders
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

6. Application bootstrap - src/app/main.ts

///<reference path="../../typings/index.d.ts"/>

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

const platform = platformBrowserDynamic();

platform.bootstrapModule(AppModule);

Building and running

npm run clean & npm run build
npm start

You should see the application running in your browser.

Notes on IntelliJ

IntelliJ handles the proposed setup with no problem. If TypeScript compiler is used in IntelliJ it should use the project’s tsconfig.json. In such case, changes to ts files will be reflected in build directory immediately.

Source code

https://github.com/kolorobot/angular2-typescript-gulp

What’s next?

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.

angular2-seed

If you need more mature starter, have a look at angular2-seed project https://github.com/mgechev/angular2-seed. 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.

49 comments:

  1. Hi Rafał, thank you for this great article! I started working on a similar architecture with a typescript gulpfile but I'm currently struggling to find a solution to debug the gulpfile.ts inside IntelliJ. I should probably generate a sourcemap for the gulpfile.ts and try to use it for debugging. If you already tried something similar or have another solution, I'll be happy to hear it ;).

    ReplyDelete
    Replies
    1. Hi Nicolas,

      Debugging with IJ and Chrome works fine. I just checked this with AppComponent. Sourcemaps generated in the Gulp task are correctly pointing to the TS files. I set breakpoint in a TS file and run index.html in debug mode (I don't run vie lite-server, but IJ).

      Delete
  2. great article.. many people are not aware of this... but system.js is really just a stepping stone into JSPM... which is from the same dev.
    and JSPM is OMG amazing,


    Regards,

    Checkout the Ultimate Angular 2 Boorstrap App: @ http://ng2.javascriptninja.io
    Source@ https://github.com/born2net/ng2Boilerplate

    I demo jspm and in browser compilation, it's the only way to code and bundle.

    Sean
    ================

    ReplyDelete
    Replies
    1. Sean,

      Thanks for the link! Will check this out for sure.

      Delete
  3. Hi , How to combine lumen /Laravel with angular 2 for build ?

    ReplyDelete
  4. I just clone git repo and run "npm install".
    After I run "npm start" I get an error in my google chrome:

    "Cannot GET /"

    ReplyDelete
  5. I get an error - Cannot GET /

    P.S. Google Chrome

    ReplyDelete
    Replies
    1. Hi,

      Did you run npm run build after npm install?

      ------------------

      λ git clone https://github.com/kolorobot/angular2-typescript-gulp
      Cloning into 'angular2-typescript-gulp'...

      λ npm -v
      2.14.12

      npm install

      No errors

      npm run build

      [22:50:24] Finished 'build' after 372 μs

      npm start

      All OK!

      Delete
  6. Hi! Thanks for good tutorial, could you make same tutorial for PhoneGap? It`ll be great!
    I hope you will do it)

    ReplyDelete
  7. when running: typings install es6-shim -ambient -save
    I get ERR! message Unable to find "es6-shim" ("npm") in the registry.

    ReplyDelete
    Replies
    1. Chris,

      I updated typings to 1.0.4, the commands too.

      Thanks.

      Delete
  8. I fixed this by switching to a newer version on Node.js (and npm) but now I am stuck at

    TSError: ⨯ Unable to compile TypeScript
    gulpfile.ts (1,14): Cannot find name 'require'.

    when executing `npm run clean`

    ReplyDelete
    Replies
    1. This is strange, because compilation of gulpfile.ts is not needed. Did you install ts-node?

      Delete
  9. This article is outdated... good job tho!

    ReplyDelete
    Replies
    1. Hi,

      Thanks for feedback. What is outdated? Could you please point it out so I can fix it and make it up to date?

      Thanks

      Delete
    2. The article is now updated to Angular 2.0.0

      Delete
  10. I get an error when I bootstrap HTTP_PROVIDERS.

    (index):14 Error: SyntaxError: Unexpected token <
    Evaluating http://127.0.0.1:53484/node_modules/@angular/http
    Error loading http://127.0.0.1:53484/app/main.ts

    Anyone has an idea why this happens?

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. Thanks for the post. I am getting errors on build, its about 3000+ errors and some of them are Build: '=' expected, Build ';' expected, duplicate identifier readonly etc in ng_for.d.ts, component_factory.d.ts, ng_model.d.ts etc. What could be the issue ?. I am building project in Visual studio 2015.

    ReplyDelete
    Replies
    1. I get errors only when I build the application after I run gulp build task. All the errors are from lib/@angular, Rafal any idea on why I am getting so may errors on ts library files after gulp build task

      Delete
    2. Seems like Typings are not recognized. Does it happen in CLI too?

      Delete
    3. @Vijender

      I am having similar problems, were you able to solve the issue?

      Delete
    4. Did you update npm, ts-node and everything else? Did you followed the quick tutorial on top? I re-checked this several times while working with this project. Maybe you could provide more details so I could try reproducing.

      Delete
    5. Oh, and typescript and typings - see which version you have globally installed

      Delete
    6. Finally figured it out, the issue was with one of the 3rd party components I was using, it required different version of typescript. Solved by using by following this https://github.com/ivogabe/gulp-typescript#typescript-version

      Thanks, great tutorial btw!

      Delete
    7. Thanks.

      Contribution more than welcomed :)

      Delete
  13. Hi, thanks for this post !
    I have a simple question : In your package.json you write a script with "gulp watch" command but your gulpfile.ts doesn't contain any "watch" task.
    Why do you have written this ? Does the "gulp watch" script work without task in gulpfile.ts ?

    ReplyDelete
    Replies
    1. Thanks.

      Start script is using watch task. This task is described here: http://blog.codeleak.pl/2016/03/quickstart-angular2-with-typescript-and_4.html

      Delete
  14. I just change gulpfile.ts to gulpfile.js then those errors disappear.
    [00:49:42] Failed to load external module ts-node/register
    [00:49:42] Failed to load external module typescript-node/register
    [00:49:42] Failed to load external module typescript-register
    [00:49:42] Failed to load external module typescript-require

    ReplyDelete
    Replies
    1. I just updated the article - with ts-node 1.3.0 - this is no more an issue.

      Delete
  15. Hi, is it possible to use in intelliJ the Debugger? If Yes How I need to configure it? Thanks a lot

    ReplyDelete
  16. One More: I think the *.map file have the wrong source path. The path is: app/app.component.ts for example, but it should point to ../src/app/app.component.ts . Anybody an idea? I cloned the repository from https://github.com/kolorobot/angular2-typescript-gulp and same here.

    ReplyDelete
    Replies
    1. I think sourceRoot path is incorrect. Fixed in gulpfile. Now in maps you should get: "sourceRoot":"/src".

      I checked debugging in Chrome - it works fine.

      In IntelliJ this is a bit trickier - I set breakpoints in JS code in build folder, I run index.html in debug and once the breakpoint is reached I am moved to TS file. When I set breakpoint in TS directly - it does not work

      Delete
  17. Everything seems to be working, but the browser console has a few of these errors:
    core.umd.js:3468 Error: Uncaught (in promise): Error: Cannot match any routes: ''

    ReplyDelete
    Replies
    1. Default route is missing:

      {path: '', redirectTo: 'tasks', pathMatch: 'full'}

      Pushed to the repository.

      Delete
  18. libs are not moving to build/lib folder

    ReplyDelete
    Replies
    1. I rechecked this just a moment ago, build contains lib and app - as expected (after running the build task)

      Delete
  19. This is simply perfect article. Really Very Useful. Thanks !!!

    ReplyDelete
  20. can we use gulp-webserver instead of lite-server ?

    ReplyDelete
  21. You have already pointed the libraries to lib folder in Index.html before build process. But in ideal scenario this should be part of build process.
    How would you achieve the same?

    ReplyDelete
    Replies
    1. Indeed, there are gulp plugins for that. You may have a look at this: https://www.npmjs.com/package/gulp-inject

      Delete
  22. Nice post :) Just a question are their benefits to using the above typings dependencies over npm installed ones.

    Are dt~core-js and dt~node the equivalent of npm @types/core-js and @types/node

    ReplyDelete
  23. hi
    i m new in angular 2 i try to build your project but i receive this error:
    dont find all file in the lib

    http://localhost:54713/angular2-typescript-gulp/src/lib/core-js/client/shim.min.js

    why?

    Thanks

    ReplyDelete
  24. can you kindly teach how to write
    bs-config.json
    gulpfile.ts
    package.json
    tsconfig.json
    typings.json
    tslint.json

    instead of copy paste i want to learn how to write these using command

    hope you will help me out .

    ReplyDelete