Back our Angular 4 Book on Kickstarter.

Creating a Simple Build Task - Building Angular 2 Applications with Gulp - Part 7

This is part of an ongoing series about building Angular 2 TypeScript applications with Gulp. Start with Part 1, and then read Part 2, Part 3, Part 4, Part 6.

In previous parts of this series, we created a lot of different build tasks. One for validating the TypeScript, one for compiling the TypeScript, and a few tasks for copying JavaScript and HTML files. What if we want to run them all in one command? This article will show you how.

It is pretty simple to create a Gulp task which will run multiple other Gulp tasks:


gulp.task("build", ['buildTS', 'copyJSLibraries',
'copyAngularLibraries','copyHTML']);

This creates a new Gulp task named build. The argument to the task is an array and each element of the array is a string which represents another Gulp task. We saw this approach with buildTS task built in Part 3. In that part, the tslint task was executed as part of the buildTS task. In this case, the build task does not have its own functionality it just combines together the existing tasks.

Run this task:


gulp build

You'll see something like this:

All the tasks are run, creating a build.

What's Next?

The next part of this series will show you how to delete everything in the build directory before creating the build. I call this approach a clean build.

All the information is already available, so sign up for our newsletter to start reading right away.

Get our expanded 38-page version: Building Angular 2 Applications with Gulp.

Minimizing the JavaScript Code - Building Angular 2 Applications with Gulp - Part 6

This is part of an ongoing series about building Angular 2 TypeScript applications with Gulp. Start with Part 1, and then read Part 2, Part 3, Part 4, and UglifyJS. An important aspect of modern HTML5 development is to make your JavaScript files as small and optimized as possible. The minification process shortens variable names, removes whitespace, and deletes comments. It can perform other optimizations too. The purpose is to provide a smaller download to the end user. The process can, sometimes, be significantly especially with larger applications. UglifyJS is my preferred minimizer, so we'll use that.

Install gulp-uglify

The first step is to install the gulp-uglify module. Run this command:


npm install --save-dev gulp-uglify

You'll see feedback like this:

We are ready to use Uglify in our script.

Modify Gulp Script

First, load the gulp-uglify script in the gulpfile.js:


var uglify = require('gulp-uglify');
] Now, jump to the buildTS task. Here it is in the current state:


gulp.task("buildTS", ["tslint"], function() {
return gulp.src(typeScriptSource)
.pipe(sourcemaps.init())
.pipe(tsProject())
.pipe(sourcemaps.write(mapPath))
.pipe(gulp.dest(destinationPath));
});

We want to run Uglify before the source map is written, but after the TypeScript is converted. Add a single line, like this:


.pipe(uglify())

The line should be placed in the script before the source maps are written:


return gulp.src(typeScriptSource)
.pipe(sourcemaps.init())
.pipe(tsProject())
.pipe(uglify())
.pipe(sourcemaps.write(mapPath))
.pipe(gulp.dest(destinationPath));

The pipe() after tsProject() calls the uglify() method. We could configure the Uglify Script with various options, but for the purposes of this sample I used the default setup.

Review the Minimized Code

Run the updated script:


gulp buildTS

See it run:

The directory structure will not have changed, but the contents of the custom JS files have. Assuming you're using our default hello world application, take a look at the app.module.js:


"use strict";var __decorate=this&&this.__decorate||function(e,o,r,t){var p,n=arguments.length,c=n<3?o:null===t?t=Object.getOwnPropertyDescriptor(o,r):t;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)c=Reflect.decorate(e,o,r,t);else for(var a=e.length-1;a>=0;a--)(p=e[a])&&(c=(n<3?p(c):n>3?p(o,r,c):p(o,r))||c);return n>
3&&c&&Object.defineProperty(o,r,c),c},core_1=require("@angular/core"),platform_browser_1=require("@angular/platform-browser"),app_component_1=require("./app.component"),AppModule=function(){function e(){}return e}();AppModule=__decorate([core_1.NgModule({imports:[platform_browser_1.BrowserModule],declarations:[app_component_1.AppComponent],bootstrap:[app_component_1.AppComponent]})],AppModule),exports.AppModule=AppModule;

This is a minimized version of the translated TypeScript code. It includes some SystemJS configuration that we didn't write manually--that was added by the TypeScript compilation. If you look closely, you see a lot of the function arguments are changed into single character values. White space and line breaks are removed. Other optimizations can be made by the Uglify library, such as variable definition optimizations. Such things are not present in the existing code.

Run the final code in the browser, and you'll find it still runs as expected, and the source maps still work.

What's Next

The next few article in this series will talk about different build techniques, and some tasks I write to handle different options. The final article of this series will show you how to build a script that will recompile your code as changes are made on the fly.

All the information is already available, so sign up for our newsletter to start reading right away.

Get our expanded 38-page version: Building Angular 2 Applications with Gulp.

Thoughts on Adobe's ColdFusion Roadshow in New York

Adobe had a ColdFusion Roadshow Event in New York last week and I attended. I had a moment between two projects, so I thought why not take a trip to the city and network a bit?

I wanted to formalize some of my thoughts about the event in no particular order.

I was personally invited by Kishore Balakrishnan, the Senior Product Marketing Manager for Adobe ColdFusion. I'm not sure why I got the invite. My software development company has been an Adobe partner in the past, but not in ages. I was part of the Adobe ACP program in the past, but am not currently a member. It could be that they just emailed everyone who had downloaded CF from their website. I'm not sure, but I also didn't ask.

The even was sparsely attended, maybe 20 people tops. I did meet someone from one town over who is running a medical startup that plans to use ColdFusion. That was a treat.

The event started with a presentation by Elishia Dvorak about What's new in ColdFusion 2016. My big takeaway was that they had built an API Manager tool. This is a way to manage REST APIs, whether they are built in CF or something else. This is a completely separate product from ColdFusion. I sounded to me like a proxy or entry point that could be used to manager other APIs, load balancing, documentation, and user management. I can see a benefit if you're a big company moving to a reusable service based architecture to power your organization, or a company whose business is providing services to external clients or vendors. It was an interesting approach. Since I've focused on UI Programming I don't know what else is out there that does that. If you need something like this, and are already a ColdFusion customer, it is worth checking out.

Everything else new to CF was related to performance, security, and stability. Apparently when Adobe talks to customers there are the three areas of focus. I'm not surprised, though. ColdFusion is a mature technology that does what I need it to do. What is left to add? I've had trouble answering that question for 10 years.

Then Kishnore got up to present about Tackling Future Challenges using ColdFusion. He started by talking about how ColdFusion success. Apparently ColdFusion is thriving. They said that each release doubles the sales of the previous release. I'm a bit surprised by the numbers. The next version of ColdFusion will be released in 2018, the only feature I can recall was a revamped version of CFScript which will offer more OO Features. And of course, more stability, better performance, and better security. All good things, but not the whiz bangy features to make new people interested.

Since ColdFusion is doubling it's sales with each release that means there must be a huge demand, right? Nope! The two biggest complaints from the audience were the inability to find CF Developers and the inability to find CF Jobs. I hope those two networked with each other. My impression is that the ones who can't find CF Developers are you for beginners. The bulk of CF Devs have lots of experience with it, and no new blood is coming into the fold. Kishnore suggested that CF is easy to train people in. I agree. However, another attendee complained that it is hard to book people for CF Training courses from major training centers. The course always gets cancelled last minute because not enough people signed up. That is troublesome and won't help train up a new breed of devs. The topic of IDEs came up. A lot of people complained about CF Builder, how it is a mess, but and how they still use Dreamweaver. I have to admit this surprised me to find people are using Dreamweaver for coding? I admit that Eclipse, which is the base of CF Builder, takes a learning curve. For simple code hinting, IntelliJ has addressed my needs well. It is also worth nothing that CF Builder is now included with the license cost of CF. That's a nice touch.

The topic of Rapid Application Development came up, and the attendees agreed that CF is RAD. I agree, especially when compared to Java. However, a lot of attendees said nothing can beat CF. I'm not sure that is still the case. One big benefit to CF being a RAD language is that it is loosely typed. However, a lot of server platforms offer that today. I was left with the impression that a lot of attendees had not played with more current tech. I do expect that you'll be more effective when dealing with a tech you've worked with for 20 years than you will be with something you just learned. But, once up the learning curve of new technology I'm not sure CF has the lead many championed. I worry that CFs push to add more Object Oriented features may hinder CF's RAD ability.

With such high sales numbers, I'm a bit surprised that they couldn't get a bigger crowd in NYC. My perception is that CF has big usage in government, but it seems all but abandoned in the commercial markets I usually work in.

Those are some random thoughts on the experience. Primarily I focus on UI technologies these days, but still have a few CF clients and every now and then. I'm glad I could fit the visit into my schedule. I'm glad CF is still around and kicking.

Check out my Angular 4 Book Kickstarter

I launched a Kickstarter for an Angular 4 book. Check it out here. There are a lot of details on the Kickstarter page. I kept the price low, but that means I need a lot of backers. The full book will be released under a Creative Commons License upon completion. This is your chance to help me create a great tutorial resource for the Angular community.

What are you waiting for? Back now!

Creating Source Maps - Building Angular 2 Applications with Gulp - Part 5

This is part of an ongoing series about building Angular 2 TypeScript applications with Gulp. Start with Part 1, and then read Part 2, Part 3, and Part 4.

This entry will teach you about Source Maps. With a TypeScript application, the code running in the browser is not the same as the code we wrote. It has been translated from one language, TypeScript, to another, JavaScript. When an error occurs how can we debug it? The answer is to create a source map. We can look at the source maps in the browser, to learn where we went wrong in the TypeScript code. The usual browser debugging tools, such as break points and watches, will work with source maps.

Install Source Map Plugin

Gulp has a source map plugin that allows us to easily create source maps. First install it:


npm install --save-dev gulp-sourcemaps

You'll see something like this:

The plugin is now available to use within your gulp script.

Generate Source Maps

The first step is to load the source map plugin in your gulpfile.js:


var sourcemaps = require('gulp-sourcemaps');

I am going to add a configuration variable for the location of the maps:


var mapPath = 'maps';

I like to keep my maps separate from the generated code, but you do not have to specify a separate path if you do not prefer.

Now, you can add the source map generation to the buildTS task. First, here is the task unedited:


gulp.task("buildTS", ["tslint"], function() {
return gulp.src(typeScriptSource)
.pipe(tsProject())
.pipe(gulp.dest(destinationPath));
});

There are two steps to the source map generation. The first is to initialize the maps. We want to do this as close to the front of the chain as possible so that the map code can keep track of all the changes. Then we want to save the maps. We want to do this as close to the end of the chain as possible. This is the modified task body:


return gulp.src(typeScriptSource)
.pipe(sourcemaps.init())
.pipe(tsProject())
.pipe(sourcemaps.write(mapPath))
.pipe(gulp.dest(destinationPath));

The second pipe calls the init() method on the source map module. The second to last pipe saves the source maps with the write() method.

Run the task:


gulp buildTS

You'll see this:

Check the build directory:

A source map was generated for each TypeScript source file. Success!

Open up the app in a browser, and bring up the source in your dev tools:

The chrome dev tools let us drill down into the TypeScript files, just as we had written them. They support watches and breakpoints, just as if the browser was running them directly. This is a very useful debug tool.

What's Next?

Te next article in this series I'll show you how to minimize the JavaScript code. Future articles will cover compiling code on the fly, and various different build techniques.

You can get all this information right now by signing up for my newsletter using the form below. Do it to help you become a better Angular 2 Developer.

Get our expanded 38-page version: Building Angular 2 Applications with Gulp.

Copying Static Files - Building Angular 2 Applications with Gulp - Part 4

This is part of an ongoing series about building Angular 2 TypeScript applications with Gulp. Start with Part 1, and then read Part 2, and Part 3.

This entry will show you how to use Gulp to copy files. We'll copy the Angular libraries from the node_modules directory to the build directory, HTML files from the source directory to the build directory, and JavaScript files from the source/js directory to the build directory. These can be done using Gulp directly, you will not need to install additional plugins.

Copy the Angular Libraries

There are a lot of required Angular libraries and we don't want to write a script for each one. Thankfully, we don't have to, as we can specify an array of glob directories to cover all the relevant libraries:


var angularLibraries = [
'core-js/client/shim.min.js',
'zone.js/dist/**',
'reflect-metadata/Reflect.js',
'systemjs/dist/system.src.js',
'@angular/**/
bundles/**',
'rxjs/**/
*.js',
'angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
]

This covers all the JavaScript libraries required for Angular 2 applications such as zonejs and the shim library. It includes the Angular library bundles and the SystemJS library. The use of globs wildcard match files make it easy to find the relevant files needed.

Next, we'll need a destination path to put the libraries:


var destinationPathForJSLibraries = destinationPath + '/js';

I put all the external libraries in the 'js' directory as an organizational tactic. Now the actual task:


gulp.task('copyAngularLibraries', function () {
gulp.src(angularLibraries, {cwd: "node_modules/**"})
.pipe(gulp.dest(destinationPathForJSLibraries));
});

The task is named copyAngularLibraries. It is simple. It takes the array as a source. The cwd flag with the src specifies the current working directory, meaning all the libraries are located in node_modules. Then the task specifies the destination path. This will copy all the required angular files from the node_modules directory to the build/js directory.

Run this task:


gulp copyAngularLibraries

You should see results like this:

You should see an updated build directory:

This is the first step.

Copy JS Libraries

If we have any JavaScript libraries put in the src/js folder we want to copy those to the build directory. The SystemJS Configuration file is one example. The same approach from above can be used, but is even simpler since there are less directories to deal with.

First, create a glob array to find the JS files:


var javaScriptLibraries = [sourceRoot + 'js/**/*.js'];

Then create the task:


gulp.task('copyJSLibraries', function () {
gulp.src(javaScriptLibraries)
.pipe(gulp.dest(destinationPathForJSLibraries));
});

This is a simple task that specifies the input source and the destination. It uses the same destination variable that was used for the Angular libraries in the previous section.

Run the task:


gulp copyJSLibraries

You'll see this:

Check the build directory and see the final file:

The systemjs.config.js file was successfully copied from the src directory to the build directory.

Copy HTML Files

If you're using my Hello World app, it only has a single HTML file. It is likely that a full app will have more, especially if you use external HTML templates. I want to write a task copy all HTML Files from the src directory to the build directory. First, create a glob array to find the HTML files:


var htmlSource = [sourceRoot + '**/*.html'];

Then create the task:


gulp.task('copyHTML', function () {
return gulp.src(htmlSource)
.pipe(gulp.dest(destinationPath));
});

This is a simple task that specifies the input source and the destination. It uses the same destination variable that was used for the Angular libraries in the previous two sections. It could be easily combined with the copyJSLibraries task, however I prefer to keep them separate for logistical reasons, since HTML files and JS files are different. Run the task:


gulp copyHTML

You'll see this:

Check the build directory and see the final file:

The index.html file was successfully copied from the root of the src folder to the root of the build directory.

If you're using our sample Hello World application, a side effect of finishing this part is that your app will run in the browser:

Not an interesting app, but proof our scripts work.

What's Next?

Even though we have a workable application now; there is still a lot we can do as part of our build scripts. In the next article in this series I'll show you how to create source maps. Later articles will cover JavaScript minificiation, how to compile code on the fly, and various different build techniques. You can get all this information right now by signing up for my newsletter using the form below, so do it and be on your way to become an expert Angular 2 Developer.

Get our expanded 38-page version: Building Angular 2 Applications with Gulp.

Compiling TypeScript - Building Angular 2 Applications with Gulp - Part 3

This is part of an ongoing series about building Angular 2 TypeScript applications with Gulp. Start with Part 1, and then read Part 2.

This section will build a Gulp task for compiling TypeScript into JavaScript.

Install Dependencies

First, install a gulp plugin, gulp-typescript.

Run this code:


npm install --save-dev gulp-typescript

You should see results like this:

This makes the gulp-typescript plugin available for use in our gulpfile.js.

Compile TypeScript to JavaScript

Before we start the compilation task, let's create some variables. First, the destination path for the output files:


var destinationPath = 'build';

I always put the processed files in a directory called build. Then, create an instance of the gulp-typescript module:


var tsc = require("gulp-typescript");

Use the gulp-typescript library to create a project:


var tsProject = tsc.createProject("tsconfig.json");

This refers to an external tsconfig.json file. I don't want to expand on the full details of the config file; but there are two important things I want to draw attention to. The first is a few items in the compilerOptions:


"compilerOptions": {
"target": "es5",
"module": "commonjs",
}

The module type is 'commonjs' which is the module type used behind the scenes by Angular 2. The second important thing here is the target, es5. This stands for EcmaScript 5; JavaScript is an implementation of and most browsers support.

The second important item in the config file is:


"exclude": [
"node_modules"
]

The exclude option tells the type script project not to process files in the node_modules directory. In essence, it ignores all the Angular libraries installed via NodeJS. These libraries already come with compiled bundles. We'll deal with moving those later.

Now, create a buildTS task:


gulp.task("buildTS", ["tslint"], function() {
});

This gulp task is named BuildTS. Before this task is run; the tslint task will execute. The tslint task was created in the previous part of this series. The main task first specifies the source:


return gulp.src(typeScriptSource)

It uses the same typeScriptSource variable that the tslint task used. Then, it adds the tsProject as a gulp pipe:


.pipe(tsProject())

Finally, it specifies the destination path:


.pipe(gulp.dest(destinationPath));

What the full script does is take all the TypeScript files in our source directory, run them through the gulp-typescript compiler, and save the output to a build directory.

Run the script:


gulp buildTS

You'll see results similar to this:

You can see from the output that both the tslint and buildTS process ran. No errors; so let's review the output.

Review Generated JavaScript Code

Look in your project directory and you'll see a brand new build directory:

Each TypeScript file was turned into a JavaScript file. Let's examine the main.js file; as it is simple:


"use strict";
var platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
var app_module_1 = require("./app.module");
platform_browser_dynamic_1.platformBrowserDynamic().bootstrapModule(app_module_1.AppModule);

The first thing you'll notice is that the JavaScript iteration replaces the import statements with require statements.

You'll recognize the require statement from the NodeJS code we are writing. However, browsers don't inherently support that. This is here because of commonJS module creation was specified in the compiler options. The systemJS library allows require() to be used in the browser, and that is what Angular 2 uses.

Beyond that, the JavaScript code is not all that different from the original TypeScript code. You can review the other two JS files and you'll find similar results.

What's Next

The first few articles of this series focused on TypeScript, but the full intent is to provide you with everything you need to build your own applications. The next in the series will focus on moving the JavaScript Libraries and HTML files from their install locations to the build directory.

Get our expanded 38-page version: Building Angular 2 Applications with Gulp.

Linting TypeScript - Building Angular 2 Applications with Gulp - Part 2

This is part of an ongoing series about building Angular 2 TypeScript applications with Gulp. Check out Part 1 here.

This section will build a Gulp task for Linting TypeScript. The lint tool is a syntax checker that looks for errors.

Install Dependencies

First, install a NodeJS Plugin, tslint and a gulp plugin, gulp-tslint.

Run this code:


npm install --save-dev tslint gulp-tslint

You should see results like this:

Once the install is complete, you're good to start creating your gulpfile.js

Create the Gulp Lint Task

If you don't already have one, create a file named gulpfile.js in the root directory of the project. Our first task to create is going to lint the TypeScript code. The first step is to import the gulp and gulp-tslint libraries:


var gulp = require("gulp");
var tslint = require('gulp-tslint');

This will make them available for use within our gulp script.

Next, I'm going to define the location of the typeScriptSource:


var sourceRoot = "src/";
var typeScriptSource = [sourceRoot + "**/*.ts"];

This is split up into two variables. The first just points to the source directory and that will be used throughout our script. The second uses the sourceRoot to create a wildcard glob that will cover all existing type script files in the main directory.

Now, create the gulp task to lint the TypeScript:


gulp.task('tslint', function() {
});

This is an empty task that does nothing. Use gulp.src() to tell gulp which items to process:


return gulp.src(typeScriptSource)

Then, run the tslint() task:


.pipe(tslint({
formatter: 'prose'
}))

This will parse the TypeScript, and make a collection of any errors. Then, report the errors:


.pipe(tslint.report());

That is the completed task. Before we run it, we'll need to configure it. Specific configuration options are beyond the scope of this article. Put this tslint.json file, in your root directory and you'll be fine. The file comes from the official Angular 2 Quickstart documentation.

Run the task:


gulp tslint

You'll see something like this:

No issues. What happens when there are issues? I removed a semi-colon and added some random characters to the main.ts file and reran the lint process:

It correctly found the error. The lint process performs a syntax validation; it does not validate the code for accuracy of imports or other bugs; but those will be flagged as part of the compilation process which we'll tackle in part 3.

Get our expanded 38-page version: Building Angular 2 Applications with Gulp.

Directories and SystemJS Config - Building Angular 2 Applications with Gulp - Part 1

I wrote an extended white paper on my Gulp process to compile Angular 2 TypeScript applications, and decided to turn some of it into a series of blog posts. The first part of this series will talk about the directory structure of the project, the initial setup, and SystemJS configuration. By the end of this series you'll have a good architecture for building Angular 2 applications with Gulp.

Directory Structure

You can find all the code for this series in our DotComIt GitHub Repository for project seeds. We structure our projects like this:

  • build: The directory where the compiled code is placed. The root will most contain the main index file.
    • com: Our compiled JavaScript code is put in a com directory, mimicking the package structure of a lot of Java package code. This may also include HTML Templates. For Angular 2 applications, I've seen this directory called 'app' in some uses
    • maps: Source Maps are placed in this directory, if they are generated.
    • js: JavaScript libraries are placed here, if any are required for the project. Some of these are copied over from node_modules, while others may be copied from the src directory.
  • node_modules: A directory that contains relevant modules installed by Node, such as Gulp, TypeScript, and the Angular libraries.
  • src: The directory where our source code goes. The root directory will contain the main index.html file, but not usually much else.
    • com: Our TypeScript code is put in a com directory, mimicking the package structure of a lot of Java package code.
    • js: JavaScript libraries are placed here, if any are required for the project. A default SystemJS Configuration is put in the source directory.

I am not going to examine a sample TypeScript application in detail as part of this series. The GitHub repository includes a simple Hello World application, which will suffice for our demonstration purposes.

Initial NodeJS Setup

Gulp runs on top of NodeJS, so you'll need that. After that, we need to create a package.json in the root directory of your project. Copy and paste this into the file:


{
"name": "TypeScriptAngular2Sample",
"version": "0.0.1",
"description": "TypeScript Angular 2 Sample for Article.",
"author": "Jeffry Houser",
"license": "ISC",
"dependencies": {
"@angular/common": "~2.4.0",
"@angular/compiler": "~2.4.0",
"@angular/core": "~2.4.0",
"@angular/forms": "~2.4.0",
"@angular/http": "~2.4.0",
"@angular/platform-browser": "~2.4.0",
"@angular/platform-browser-dynamic": "~2.4.0",
"@angular/router": "~3.4.0",
"angular-in-memory-web-api": "~0.2.2",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.1",
"zone.js": "^0.7.4"
},
"devDependencies": {
"gulp": "^3.9.1",
"typescript": "^2.1.5"
},
"repository": {}
}

This includes all the major Angular 2 libraries and dependencies in the dependency section. The devDependencies section includes Gulp and TypeScript. Install all this stuff with one command:


npm install

You'll see something like this:

This creates the node_modules directory; and installs all the modules specified in the package.json, along with any related dependencies. This is the base we use for creating our build scripts. As we need Gulp plugins we'll install them individually in future installments.

SystemJS Configuration

Angular 2 uses a module loader system named SystemJS to give the browser require() functionality like you'd use on the server side with NodeJS. We need to provide a configuration to SystemJS so that it knows how to find our custom app code, and the required Angular libraries. I put this file in the src/js/systemJSConfig directory.

Setup the file with an Immediately Invoked Function Express (IIFE):


(function (global) {
})(this);

This is the JavaScript method to create a self-executing function. Inside the function, we want to configure SystemJS:


System.config({
});

The config() method is used to configure the SystemJS library. It takes an object, which is currently empty. Add in a paths configuration:


paths: {
'js:': 'js/'
},

This configuration object tells the library that the js path will point to the js directory. When we write build scripts, we'll put all the relevant Angular libraries in the JS sub-directory of our final build. Next, create a map configuration:


map: {
app: 'com',
'@angular/core': 'js:@angular/core/bundles/core.umd.js',
'@angular/common': 'js:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'js:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'js:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'js:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'js:@angular/http/bundles/http.umd.js',
'@angular/router': 'js:@angular/router/bundles/router.umd.js',
'@angular/forms': 'js:@angular/forms/bundles/forms.umd.js',
'rxjs': 'js:rxjs',
'angular-in-memory-web-api': 'js:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},

The map configuration tells the code 'when we reference 'x' in code; go look for this library. The main angular libraries are listed. Explanation of the Angular libraries are beyond the scope of this article. The important things to notice are that the js path is specified in the file location for most of the libraries. The second thing to notice is that the app map points to our com directory, where all our custom code is located.

Next, specify the packages. A package is a collection of files that have shared functionality:


packages: {
app: {
main: './dotComIt/sample/main/main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}

Two packages are specified. The first is app, which is our main application and custom code. It defines the main entry point, main.js--the name of the file that main.ts will be converted too. It also specifies the default extension of js. The second package specified is a package used by Angular, rxjs.

I wanted to cover the SystemJS configuration as part of this article because it is specific to getting Angular to work, but has nothing to do with TypeScript or creating Index files required for the application.

Setup Node and install Angular Dependencies

What's Next

Get our expanded 38-page version: Building Angular 2 Applications with Gulp.

Why doesn't Flex Remoting work with ColdFusion 10 and Apache Web Server?

I'm doing some maintenance on an AIR application with a ColdFusion backend. For testing purposes, I installed a brand new copy of ColdFusion 10 and Apache Web Server 2.2.

My first step was to test this new setup the Flex Remoting connection between ColdFusion and Flex. It was borked! The flex2remoting URL would return a 404. What was wrong? I do not remember having problems in the past. ColdFusion 10 introduced a new version of Flex Remoting, so maybe that was somehow the cause. There are a few people complaining about errors they've encountered. I tried all the fixes.

First, I tried tweaking ColdFusion's urlworkermap.properties file, as described by my good friend Joseph. That didn't work for me. I found another suggestion which recommended commenting out some lines of ColdFusion's web.xml file. No luck there either. I went over all of ColdFusion's Flex Remoting Configs in an attempt to find something amiss, no luck.

I started grasping at straws and experimenting. I know that in IIS, there is a virtual directory called Jakarta which is a Java Mapping and helps Flex Remoting, among other things run. Does Apache have something similar and could the setup be wrong? Apparently the answer is yes! Open up the mod_jk.conf file. It was created when you used the ColdFusion Web Server Configuration Tool to configure the Apache web server. There are a bunch of 'jk' properties:


LoadModule jk_module "C:\ColdFusion10\config\wsconfig\1\mod_jk.so"
JkWorkersFile "C:\ColdFusion10\config\wsconfig\1\workers.properties"
JkMountFile "C:\ColdFusion10\config\wsconfig\1\uriworkermap.properties"

As best I can tell this is the Apache equivalent of the Jakarta mapping in IIS. I started researching the different options around the module loading.

When using virtual hosts with Apache Web Server, the mappings do not trickle down. I added this command to my Apache config:


JkMountCopy All

And everything started working magically.

There are reports of similar problems with CF11. It is frustrating that problems like this still exist.

More Entries

All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.