Subscribe: Jeffry Houser's Blog
http://www.jeffryhouser.com/rss.cfm?mode=full
Added By: Feedage Forager Feedage Grade B rated
Language: English
Tags:
angular  build directory  build  code  create  directory  file  files  gulp  javascript  npm err  npm  part  source  task  typescript 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: Jeffry Houser's Blog

Jeffry Houser's Blog



Jeffry Houser's Blog



Published: Wed, 26 Apr 2017 13:24:47 -0600

Last Build Date: Tue, 18 Apr 2017 09:07:00 -0600

 



Check out my Angular 4 Book Kickstarter

Tue, 18 Apr 2017 09:07:00 -0600

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

Tue, 11 Apr 2017 09:00:00 -0600

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: 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. First Name Email Address * [...]



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

Tue, 04 Apr 2017 09:00:00 -0600

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', 'zone/dist/**', 'reflect-metadata/Reflect', 'systemjs/dist/system.src', '@angular/**/bundles/**', 'rxjs/**/*', 'angular-in-memory-web-api/bundles/in-memory-web-api.umd' ] 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/**/*']; 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 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: gu[...]



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

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

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. 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 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[...]



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(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. 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 Syste[...]



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 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.



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

Tue, 24 Jan 2017 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: This is a simple index.html file. There is one item I want to draw attention to. The script tag which imports a JavaScript file named sample.min. This is the file we will generate from the TypeScript code. Next, create a file named greeter.ts. The ts extension is the standard extension for TypeScript files, similar to how 'js' is the standard extension for JavaScript files. For this sample I'll put all the files inside the root of the src directory, however in a more complex application, I may categorize the files under a descriptive directory structure. This is the greeter.ts: export function sayHello(name: string) { return `Hello from ${name}`; } This file exports a function named sayHello(). The export is not something you'll commonly see in browser JavaScript, but is used when creating NodeJS Modules. It, basically, says that "This is an API I Want people to use to access code in this file." The sayHello() method has a single parameter, name. The type of the name is specified, something that doesn't happen in JavaScript but adding it allows for type checking at the compiler level. The body of the method returns a string, referencing the name variable inside the string. The syntax is very similar to JavaScript, so learning TypeScript should not be a big hurdle for you to climb. Now create a file named main.ts. This is the entry point to our application. Back in my school days we'd call the routine that ran the app a main routine, so this is a similar approach. The first thing the main.ts does is import the greeter file: import { sayHello } from "./greeter"; This makes all the code from the greeter.ts file available to use in the main.ts file. Now, create a showHello() method: function showHello(name: string) { document.body.innerHTML = sayHello(name); } This method looks a lot like a JavaScript method definition, the only difference is that the name variable is given a type of string. The code accesses the innerHTML of the web pages body tags and outputs the results of the sayHello method, which will just be a string that says hello from the given name. Finally, call the showHello() method: showHello("World"); That completes the super simple TypeScript application. I could write a lot about TypeScript, however I wanted this article to focus on the build process of turning TypeScript into a JavaScript web application. As such, I'll leave the JavaScript there. When you finally compile the application, it should look something like this in the browser: A Basic Compile Script To compile TypeScript into JavaScript we are going to use NodeJS and a bunch of plugins. Install and Setup NodeJS The first step is to install NodeJS if you haven't already. The formal instructions will give you more detailed instructions if you haven't already done so. Then cr[...]



@types/node is not found in the npm registry

Tue, 17 Jan 2017 10:00:00 -0600

I'm trying to run through the Angular 2 Quickstart with TypeScript. When I try to run the npm install command I am getting a ton of errors like this: npm ERR! 404 Not Found npm ERR! 404 npm ERR! 404 '@types/node' is not in the npm registry. npm ERR! 404 You should bug the author to publish it npm ERR! 404 It was specified as a dependency of 'angular-quickstart' npm ERR! 404 npm ERR! 404 Note that you can also install from a npm ERR! 404 tarball, folder, or http url, or git url. npm ERR! System Windows_NT 6.2.9200 npm ERR! command "C:\\Program Files\\nodejs\\\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli" "install" npm ERR! cwd C:\quickstart npm ERR! node -v v0.10.29 npm ERR! npm -v 1.4.14 npm ERR! code E404 npm ERR! npm ERR! Additional logging details can be found in: npm ERR! C:\quickstart\npm-debug.log npm ERR! not ok code 0 It is very frustrating to jump into something new only to find their quick start documentation does not work. The solution appears to be to update NodeJS and npm. I downloaded a new version of NodeJS from the NodeJS.org web site. After it was installed, you can update npm like this: npm install npm@latest -g Check your versioning like this: node -v npm -v This upgrade appears to have solved my issues.