Home

#Welcome to the angular2-webpack wiki! In this project we will learn step by step how to create angular2 appilcation using webpack, typescript, karma all in visual studio 2013.

LEARNING STEP BY STEP

Hi I am learning angular 2 using nodejs and webpack using below website. "https://semaphoreci.com/community/tutorials/setting-up-angular-2-with-webpack"
Learn webpack from "https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/"
I will be using node js command lines if you need more info on CLI's then go to below website "https://docs.npmjs.com/all"
I will keep check-in my learning to this repository. Stay Tune !!

Enabled NPM

Create an empty asp.net project run below command to enable node js. npm init -f -f is alias of force
It will create package.json file in your project.

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Installing Angular2 Dependencies

Run below command to install node_module folder which will have all of below javascript files. npm i -S @angular/common @angular/compiler @angular/core @angular/platform-browser @angular/platform-browser-dynamic es6-shim reflect-metadata rxjs@5.0.0-beta.6 zone.js
i is an alias for install, -S is an alias for --save.
i or install they install the javascript files under node_module folder.
-S or --save command updates the package.json file also.
after installation done you will see package.json updated like below

 "dependencies": {
    "@angular/common": "^2.4.9",
    "@angular/compiler": "^2.4.9",
    "@angular/core": "^2.4.9",
    "@angular/platform-browser": "^2.4.9",
    "@angular/platform-browser-dynamic": "^2.4.9",
    "es6-shim": "^0.35.3",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.0.0-beta.6",
    "zone.js": "^0.7.7"
  }

Install Typescript Dependencies

install typescript
install type definitions
install tslint
in order to install of above run below command
npm i -D typescript tslint typings
-D is an alias for --save-dev.
After installing them u will see your node_module folder got updated with some new folders. Also package.json gets updated with devDependencies ("devDependencies": these packages are only needed for development and testing)

"devDependencies": {
    "tslint": "^4.5.1",
    "typescript": "^2.2.1",
    "typings": "^2.1.0"
  }

Webpack Dependencies

Install webpack and its other loaders and plugins needed for angular 2. Run below command

npm i -D webpack webpack-dev-server html-webpack-plugin raw-loader ts-loader tslint-loader

It will install webpack and it's dev dependencies.

"devDependencies": {
    "html-webpack-plugin": "^2.28.0",
    "raw-loader": "^0.5.1",
    "ts-loader": "^2.0.1",
    "tslint": "^4.5.1",
    "tslint-loader": "^3.4.3",
    "typescript": "^2.2.1",
    "typings": "^2.1.0",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }

Unit Testing Dependencies

Installing Karma , jasmine, phantomjs,

npm i -D karma karma-jasmine jasmine-core karma-chrome-launcher karma-phantomjs-launcher phantomjs-prebuilt karma-sourcemap-loader karma-webpack

It will update your package.json devDependencies

 "devDependencies": {
    "html-webpack-plugin": "^2.28.0",
    "jasmine-core": "^2.5.2",
    "karma": "^1.5.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.1.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.2",
    "phantomjs-prebuilt": "^2.1.14",
    "raw-loader": "^0.5.1",
    "ts-loader": "^2.0.1",
    "tslint": "^4.5.1",
    "tslint-loader": "^3.4.3",
    "typescript": "^2.2.1",
    "typings": "^2.1.0",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }

Configurations

Type Definitions

First we need typing.json file where we put all typings that we want to install. For that run below command.

./node_modules/.bin/typings init

After runing above command you will see typing.json file is added to your project.

{
  "name": "sample",
  "dependencies": {}
}

Now Let's install typescript definitions for below libraries. We are using Typings to install type definitions.
- nodejs
- jasmine
- es6-promise
Run below command for jasmine and node.

./node_modules/.bin/typings install dt~jasmine env~node --save --global
We'll run a second install command for the es6-promise shim.

./node_modules/.bin/typings install es6-promise --save
Then you will typings.json will be updated as below:

{
  "name": "sample",
  "dependencies": {},
  "globalDependencies": {
    "jasmine": "registry:dt/jasmine#2.5.0+20170207112528",
    "node": "registry:env/node#6.0.0+20170213133316"
  }
}

Configuring TsLint

Add tslit.json file in the root of project and add below json

{
    "class-name": true,
    "comment-format": [
        true,
        "check-space"
    ],
    "indent": [
        true,
        "spaces"
    ],
    "no-duplicate-variable": true,
    "no-eval": true,
    "no-internal-module": true,
    "no-trailing-whitespace": true,
    "no-var-keyword": true,
    "one-line": [
        true,
        "check-open-brace",
        "check-whitespace"
    ],
    "quotemark": [
        true,
        "single"
    ],
    "semicolon": true,
    "triple-equals": [
        true,
        "allow-null-check"
    ],
    "typedef-whitespace": [
        true,
        {
            "call-signature": "nospace",
            "index-signature": "nospace",
            "parameter": "nospace",
            "property-declaration": "nospace",
            "variable-declaration": "nospace"
        }
    ],
    "variable-name": [
        true,
        "ban-keywords",
        "check-format"
    ],
    "whitespace": [
        true,
        "check-branch",
        "check-decl",
        "check-operator",
        "check-separator",
        "check-type"
    ]
}

TypeScript Configuration

The TypeScript compiler requires a configuration file, tsconfig.json lets add this file and paste below json

{
    "compilerOptions": {
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "module": "commonjs",
        "moduleResolution": "node",
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5"
    },
    "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]
}

Configuring Karma

Create a directory named karma in the root of your project. Copy the json as mentioned in project.
Add karma.conf.js ( In this file We describe which file and how it should be tested)
Add karma.entry.js (In this file We will describe setup for angular2 and webpack )

Configuring Webpack

In your project directory, create a sub-directory named webpack, which will house both of these files.
we will have just a webpack.dev.js and a webpack.test.js. The .dev configuration will be used when spinning up the Webpack development server so that we can see our application in the browser.

Setting up webpack.test.js

Create webpack.test.js inside webpack folder.
put below json as it is my github sourcecode.

'use strict';

const path = require('path');
const webpack = require('webpack');

module.exports = {
    devtool: 'inline-source-map',
    module: {
        preLoaders: [
            { exclude: /node_modules/, loader: 'tslint', test: /\.ts$/ }
        ],
        loaders: [
            { loader: 'raw', test: /\.(css|html)$/ },
            { exclude: /node_modules/, loader: 'ts', test: /\.ts$/ }
        ]
    },
    resolve: {
        extensions: ['', '.js', '.ts'],
        modulesDirectories: ['node_modules'],
        root: path.resolve('.', 'src')
    },
    tslint: {
        emitErrors: true
    }
};

Provide feedback

Saved searches

Use saved searches to filter your results more quickly