Subscribe: Jeffry Houser's Blog
Preview: Jeffry Houser's Blog

Jeffry Houser's Blog

Jeffry Houser's Blog

Published: Sat, 25 Mar 2017 03:36:15 -0600

Last Build Date: Tue, 21 Mar 2017 09:00:00 -0600


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

Tue, 21 Mar 2017 09:00:00 -0600

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 Create the Gulp Lint Task If you don't already have one, create a file named gulpfile 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(; 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. First Name Email Address * [...]

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

Tue, 14 Mar 2017 09:00:00 -0600

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": "^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 obje[...]

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

Thu, 09 Mar 2017 08:51:00 -0600

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 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\" JkWorkersFile "C:\ColdFusion10\config\wsconfig\1\" JkMountFile "C:\ColdFusion10\config\wsconfig\1\" 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.

Submit a Form Post Asyncronously to a New Window with AngularJS - Approach 4

Thu, 29 Dec 2016 09:00:00 -0600

I was working on a client's AngularJS project. When the user clicked a button to open another application, we wanted to make a service call to log the request and make sure we redirected the user to the right place. Some users would see different versions of the other application, and the service call told us the proper variables to pass to setup the secondary app. Unfortunately, after we made the service call the link would not open. I started to research for more information as to what the problem may be. A browser won't open external pages if they aren't done in response to a user interaction such as clicking a button. The browser assumed user request was ended by the time our service call ended and the promise object resolved. This is one solution we considered for the issue, which uses a form post to open the new link. By, the way, this is the fourth in the series about opening links through AngularJS. Check out the first and second, and third . The Setup First, add Angular to your Application: Angular 2 is split into a lot of individual libraries instead of one big one like AngularJS 1.x branch. Next create the component: (function(app) { app.AppComponent = ng.core.Component({ selector: 'colorpicker-app', }) .Class({ constructor: function() { } }); })( || ( = {})); This is a typical Angular component. The name is colorpicker-app. We'll put a lot of code in the constructor later in this article. A template is not specified, but is required. We'll create that in the next section. Next create the Angular module: (function(app) { app.AppModule = ng.core.NgModule({ imports: [ ng.platformBrowser.BrowserModule ], declarations: [ app.AppComponent ], bootstrap: [ app.AppComponent ] }) .Class({ constructor: function() {} }); })( || ( = {})); The module declares our custom AppComponent and also bootstraps it. Finally, boot strap the main module: (function(app) { document.addEventListener('DOMContentLoaded', function() { ng.platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(app.AppModule); }); })( || ( = {})); In the HTML body, use the colorpicker-app directive to load the component: Loading... Run the code as is: Not too impressive, we get an error because of the missing template. There are two ways we could add a template. Create an in-line template It is easy to create an in-line template. Just add the template property to the colorpicker-app component definition: ng.core.Component({ selector: 'colorpicker-app', template : 'something' }) Rerun the app: I hate dealing with in-line templates because as the HTML gets wordy they are complicated to maintain and change. Create the external template We can create an external template using the templateUrl property: ng.core.Component({ selector: 'colorpicker-app', templateUrl : '02canvas.html' }) The templateUrl property is put on the colorpicker-app component and replaces the template property we used in the last section. The templateUrl specifies the URL location of a template, in this case I refer to a template in the same directory, canvas.html: Something in external template The template code is just some text. Run the code: When building AngularJS 1 applications, the templateUrl sometimes caused a problem with relative URLs after you ran the code through a build script with minimizers. This was because the location of the final minimized code was not always the location of the original code; and the browser wouldn't find the template. The same problem exists in Angular 2 applications. It can be solved by using a path relative to the root directory of the web server; but for now I kept it simple. What's Next I'm going to stop this article h[...]

Unhandled rejection Error: Not running at Server.close (net:1236:11) with Karma and Jasmine

Tue, 20 Dec 2016 18:44:00 -0600

I'm writing some addendum to my LearnWith AngularJS training series. One of those will detail how to unit test an AngularJS web application. I'm setting something up with Gulp, Karma, and Jasmine. Trying to get this running gave me a full day of this error: Unhandled rejection Error: Not running at Server.close (net:1236:11) at C:\Users\jhouser\Documents\career\clients\ActiveClients\LearnWith\Development\www_codearchive\Scripts_Test\node_modules\karma\lib\server:388:17 at tryCatcher (C:\Users\jhouser\Documents\career\clients\ActiveClients\LearnWith\Development\www_codearchive\Scripts_Test\node_modules\karma\node_modules\bluebird\js\release\util:16:23) at Promise._settlePromiseFromHandler (C:\Users\jhouser\Documents\career\clients\ActiveClients\LearnWith\Development\www_codearchive\Scripts_Test\node_modules\karma\node_modules\bluebird\js\release\promise:510:31) at Promise._settlePromise (C:\Users\jhouser\Documents\career\clients\ActiveClients\LearnWith\Development\www_codearchive\Scripts_Test\node_modules\karma\node_modules\bluebird\js\release\promise:567:18) at Promise._settlePromise0 (C:\Users\jhouser\Documents\career\clients\ActiveClients\LearnWith\Development\www_codearchive\Scripts_Test\node_modules\karma\node_modules\bluebird\js\release\promise:612:10) at Promise._settlePromises (C:\Users\jhouser\Documents\career\clients\ActiveClients\LearnWith\Development\www_codearchive\Scripts_Test\node_modules\karma\node_modules\bluebird\js\release\promise:691:18) at Async._drainQueue (C:\Users\jhouser\Documents\career\clients\ActiveClients\LearnWith\Development\www_codearchive\Scripts_Test\node_modules\karma\node_modules\bluebird\js\release\async:138:16) at Async._drainQueues (C:\Users\jhouser\Documents\career\clients\ActiveClients\LearnWith\Development\www_codearchive\Scripts_Test\node_modules\karma\node_modules\bluebird\js\release\async:148:10) at Async.drainQueues (C:\Users\jhouser\Documents\career\clients\ActiveClients\LearnWith\Development\www_codearchive\Scripts_Test\node_modules\karma\node_modules\bluebird\js\release\async:17:14) at process._tickCallback (node:419:13) There is a lot of Google hits for this error; but none actually relate to my issue, so I hope this helps someone. After much head pounding and experimentation; I finally deciphered the cause. When creating the Karma config file, make sure that your files are put in proper dependency order. Simply put; I was listing the AngularJS library at the end of the file list instead of the beginning, so the code didn't know how to create angular modules, services, or other elements, because that Angular library wasn't defined yet. Changing the order of dependencies solved the issue and I can run unit tests as expected. I hope that helps someone.
Sign up for DotComIt's Monthly Technical Newsletter