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
Note the code and the article itself is not maintained anymore.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
- removesbuild
directorycompile
- TypeScript compilation (with sourcemaps)build
- build the projectstart
- runs lite server which uses configuration frombs-config.json
It also useswatch
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.
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 ;).
ReplyDeleteHi Nicolas,
DeleteDebugging 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).
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.
ReplyDeleteand 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
================
Sean,
DeleteThanks for the link! Will check this out for sure.
Hi , How to combine lumen /Laravel with angular 2 for build ?
ReplyDeleteI just clone git repo and run "npm install".
ReplyDeleteAfter I run "npm start" I get an error in my google chrome:
"Cannot GET /"
I get an error - Cannot GET /
ReplyDeleteP.S. Google Chrome
Hi,
DeleteDid 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!
Thx Rafał, all works.
ReplyDeleteHi! Thanks for good tutorial, could you make same tutorial for PhoneGap? It`ll be great!
ReplyDeleteI hope you will do it)
Good tutorial
ReplyDeletegood tutorial , thanks
ReplyDeletewhen running: typings install es6-shim -ambient -save
ReplyDeleteI get ERR! message Unable to find "es6-shim" ("npm") in the registry.
Chris,
DeleteI updated typings to 1.0.4, the commands too.
Thanks.
I fixed this by switching to a newer version on Node.js (and npm) but now I am stuck at
ReplyDeleteTSError: ⨯ Unable to compile TypeScript
gulpfile.ts (1,14): Cannot find name 'require'.
when executing `npm run clean`
This is strange, because compilation of gulpfile.ts is not needed. Did you install ts-node?
DeleteThis article is outdated... good job tho!
ReplyDeleteHi,
DeleteThanks for feedback. What is outdated? Could you please point it out so I can fix it and make it up to date?
Thanks
The article is now updated to Angular 2.0.0
DeleteI get an error when I bootstrap HTTP_PROVIDERS.
ReplyDelete(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?
This comment has been removed by the author.
ReplyDeleteThanks 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.
ReplyDeleteI 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
DeleteSeems like Typings are not recognized. Does it happen in CLI too?
Delete@Vijender
DeleteI am having similar problems, were you able to solve the issue?
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.
DeleteOh, and typescript and typings - see which version you have globally installed
DeleteFinally 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
DeleteThanks, great tutorial btw!
Thanks.
DeleteContribution more than welcomed :)
Hi, thanks for this post !
ReplyDeleteI 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 ?
Thanks.
DeleteStart script is using watch task. This task is described here: http://blog.codeleak.pl/2016/03/quickstart-angular2-with-typescript-and_4.html
I just change gulpfile.ts to gulpfile.js then those errors disappear.
ReplyDelete[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
I just updated the article - with ts-node 1.3.0 - this is no more an issue.
DeleteHi, is it possible to use in intelliJ the Debugger? If Yes How I need to configure it? Thanks a lot
ReplyDeleteOne 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.
ReplyDeleteI think sourceRoot path is incorrect. Fixed in gulpfile. Now in maps you should get: "sourceRoot":"/src".
DeleteI 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
Everything seems to be working, but the browser console has a few of these errors:
ReplyDeletecore.umd.js:3468 Error: Uncaught (in promise): Error: Cannot match any routes: ''
Default route is missing:
Delete{path: '', redirectTo: 'tasks', pathMatch: 'full'}
Pushed to the repository.
libs are not moving to build/lib folder
ReplyDeleteI rechecked this just a moment ago, build contains lib and app - as expected (after running the build task)
DeleteThis is simply perfect article. Really Very Useful. Thanks !!!
ReplyDeleteThanks. Please share :)
Deletecan we use gulp-webserver instead of lite-server ?
ReplyDeleteI believe so.
DeleteYou 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.
ReplyDeleteHow would you achieve the same?
Indeed, there are gulp plugins for that. You may have a look at this: https://www.npmjs.com/package/gulp-inject
DeleteNice post :) Just a question are their benefits to using the above typings dependencies over npm installed ones.
ReplyDeleteAre dt~core-js and dt~node the equivalent of npm @types/core-js and @types/node
hi
ReplyDeletei 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
can you kindly teach how to write
ReplyDeletebs-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 .
I strongly advice to find some good tutorials on that.
Deletecould you please teach us regarding bundling and uglification as well
ReplyDeleteYou may want to have a look here: https://www.npmjs.com/package/gulp-uglify
DeleteI have an error when I build project. It shows me: Missing whitespace at app.component.ts
ReplyDeleteThe code here is outdated. I am sorry, I don't maintain anymore. I suggest you will try with angular-cli to simplify the process of creating an app.
DeleteThanks guy so much. It's a nice post. I have fixed this problem but i have other issue when using lite-server. It loaded a lot script files when start project and after refresh page. Loading time looks so slowly. Do you have any ideas for this ? and I need your help. I am also sorry with my English language
Deletehttps://pastebin.com/CniV4db4 I get this error upon build.. How can I fix this?
ReplyDelete