Angular2 With Typescript And Webpack

I’m just starting to get into angular2 with TypeScript. I decided to give the angular2 quickstart application a try. At first glance I wanted to use webpack instead of systemjs for module loading.

To begin here is my package.json file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
"name": "angular2-typescript-webpack",
"version": "1.3.0",
"scripts": {
"postinstall": "typings install",
"build": "webpack",
"start": "webpack-dev-server"
},
"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",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.23"
},
"devDependencies": {
"ts-loader": "0.8.2",
"typescript": "1.8.10",
"typings": "1.3.0",
"webpack": "1.13.0",
"webpack-dev-server": "1.14.1"
}
}

I have typescript and typings installed globally npm install typescript typings -g but included them in the devDependencies section just in case some people don’t want to install those globally.

You’ll need a file named typings.json to install a es6-shim

1
2
3
4
5
{
"globalDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
}
}

You can now run typings install

I included webpack and webpack-dev-server. There are two npm scripts, build and start, that use webpack and webpack-dev-server respectively.

Read More

Asp.net Dropdownlist Control Datasource Expression

I’m fairly new to .NET and I’m finding it a challenge locating solutions for some problems I was having. I decided to start writing down the solutions I found or created. There might be better ways to solve the problems. If you find a better way please let me know.

Now on the problem. To start off the application is written in VB.NET 2.0. There is a form with a asp dropdown control that I needed to set the datasource. This dropdown control lives inside a asp repeater control. I wanted to set the datasource inside an expression like the following:

1
<asp:DropDownList runat="server" DataSource='<%# CreateDataSource() #%>' />

Read More

Simple Async With RxJS

I had a previous project that involved a lot of asynchronous javascript code. I wasn’t entirely pleased with the result but it worked. “I wish things could be a little simpler.” I kept saying to myself. The part of the application in question was a piece that grabbed data from a API call returning xml. That data had to be parsed and then inserted into a database. I used hyperquest to make the API call, xml-stream to parse the xml response and sequelize for the database logic.

The Problem

xml-stream emits events while parsing and sequelize uses promises during it’s querying. Having that work together and be readable/maintainable was a challenge.

Read More

Node.js and Docker Using Host Volumes

A previous post, Nginx and Node.js with Docker, I created a Node.js Docker container that copied source files inside a Docker image. It’s a challenge to change any of the files in the Node.js Docker container since it’s baked into the Docker image. A different approach would be to mount a host folder in the Docker container. This way I can edit/add/delete files which would be reflected in the Docker container. The idea is to create a bare Node.js server that I can conintue to develop.

Full source code for this example docker-nodejs-unbaked

Read More