Why does reloading my Angular 2 App return a 404 error?
I've been having some issues with Angular 2 [now Angular 4] and the RouterModule. I put together this screencast to demonstrate the problem and how I fixed it:
How do I move ColdFusion Configuration to Another machine without Exporting Settings?
I've written in the past about migrating ColdFusion instances from one machine to another. Most of the time when I have to do this it is because of a hardware failure and I'm setting up a machine from scratch. This seems to happen every 4-6 years. Despite it's impending immediate death, 20 years running, I still do a quite bit of ColdFusion development. It's the devil that I know on the server side.
Without a working machine, I can't sign into the CF Administrator and export CF Admin settings, so I have to go to other methods to get my config up and running. I've written about similar experiences with ColdFusion 8 and migrating from ColdFusion 8 to 9. But, time moves on and most of my production clients use CF10, so that is the version I have installed on my local.
How do I get the old CF configuration set up the new machine when all I have access to is the old CF installation directory? this is how I did it.
- Install Apache: ColdFusion is useless without a web server, so first I installed and configured the Apache web server.
- Install ColdFusion 10: Get ColdFusion 10 from the cfmlRepo site. More specifically, go here. be sure to download app the patches. And send thanks to whomever takes care of that site.
- Install CF Hotfixes: Next, install all the ColdFusion hotfixes. You'll have to install the first few manually before you can use the update feature inside the ColdFusion administrator. Uses these instructions, but basically do this:
C:\ColdFusion10\jre\bin\java -jar hotfix_008.jarI installed hotfixes 7-13. The rest I updated through the ColdFusion administrator.
- Compare Directories: Now compare your old ColdFusion install directory to the new ColdFusion install directory. You'll be surprised at how many of the files will be flagged as identical. Those aren't the ones you need to worry about. I focused on the config files in cfusion\lib\*.xml, and copied them over from the old directory to the new one. These are the configurations I moved:
- new-cron.xml: Not sure what this one is for.
- neo-datasource.xml: this file contains DSN configuration information.
- neo-debug.xml: This contains CF Debugging settings.
- neo-logging: This contains log related settings.
- neo-mail.xml: This contains mail server settings.
- neo-metric.xml: I couldn't figure out which settings this one contains, but I copied it anyway.
- neo-runtime.xml: This file contains misc settings.
- Restart ColdFusion: After the restart, you should find all your CF settings restored.
- Change DNS Passwords: I did notice that I had to reenter the passwords for all my data sources.
Overall, the process worked a lot better than I would have hoped.
How do I do a search and replace in SQL?
I recently upgraded this blog to run exclusively on SSL. The first thing I noticed is that many of the links and image references inside blog posts were not HTTPS and the browser would show one of those 'this page is not secure errors'. The reason that the text of my posts use absolute links instead of relative is so that they'll show up properly for those who consume the blog via RSS and read it elsewhere.
I spent a few hours white boarding a bubble sort algorithm before deciding I was getting nowhere, I decided to try a Google Search for the answer.
In SQL Server, which is my blog's data store, you can use a replace function to make the change. I can do a simple search for text inside a column and replace it with something else. Perfect, that is what I need.
Here is a StackOverflow answer with more details. The query they recommend is:
update my_table
set column = replace(column,'oldstring', 'newstring')
Of course, when I did that I immediate got a conversion error. The body of these posts are stored as ntext fields inside the database. and the replace() function will not work on ntext or text fields. Thankfully, there is a solution to that too. A simple cast addressed the issue.
update my_table
set column = cast(replace(cast(column as nvarchar(max)),'oldstring', 'newstring') as ntext)
If you use BlogCFC and need to do this on one of your blogs, here is the final script I used:
update tblBlogEntries
set body = cast(replace(cast(body as nvarchar(max)), 'http://www.jeffryhouser.com', 'https://www.jeffryhouser.com') as ntext)
where body like '%http://www.jeffryhouser.com%'
update tblBlogEntries
set morebody = cast (replace(cast(morebody as nvarchar(max)), 'http://www.jeffryhouser.com', 'https://www.jeffryhouser.com') as ntext)
where morebody like '%http://www.jeffryhouser.com%'
I hope this helps someone.
Watch For Code Changes - Building Angular 2 Applications with Gulp - Part 10
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, Part 7, Part 8, and Part 9.
There was one more thing I wanted to touch on for the purposes of this article. When changing code, I want the app to automatically be recompiled. Gulp provides built in functionality to make that happen. Iterative builds help improve performance, and get you reviewing your app in the browser without having to manually compile every time.
Watch for TypeScript changes
Create a task named buildWatch:
gulp.task('buildWatch', ['build'], function(){
}
The first thing this task does is build the application. The array before the function does this. This makes sure that we have the most recent code in the build directory before we start making changes.
Then we need to start watching for changes. We can use the watch() method of gulp to do this. First, the TypeScript files:
gulp.watch(typeScriptSource,['buildTS'])
.on('change', function(event){
console.log('File Path' + event.path);
})
The first argument to the watch() function is the glob array that points to the TypeScript source. The second argument is an array which represents the tasks to execute when a change is detected. In this case, the buildTS task is executed. When a change is detected, I chained an on() event after the watch() task. This outputs the name of the file that changed.
Let's try this:
gulp buildWatch
You should see something like this:
Notice that you are not sent back to the console prompt after running this. The task is waiting for something to happen. Change the main.ts file by adding something simple like this to the end:
console.log('something');
Then look at the console:
The changed file was output the console, and the buildTS was re-run. The buildTS task runs tslint before building the code; that has not changed.
Watch for HTML and JavaScript Changes
You can use the exact same approach for watching changes with HTML and the JS Libraries. Add these to the buildWatch task:
gulp.watch(htmlSource,['copyHTML']).on('change', function(event){
console.log('File Path' + event.path);
})
gulp.watch(javaScriptLibraries,['copyJSLibraries']).on('change', function(event){
console.log('File Path' + event.path);
})
As files are changed, the relevant tasks are rerun. I don't usually watch the Angular libraries because they are rarely changed or updated during development unless it is a big project decision.
Final Thoughts
Build scripts are important. When I started doing Angular 1 development with JavaScript, I could just use JavaScript directly in the browser and was able to push off dealing with build scripts to a future time. However, when using Angular 2 with TypeScript, the build process became much more important since a compile process is needed before you can test your code. I had to jump in earlier than I would have otherwise.
Remember, you can get all the code for this series in our seed project repository. Thank you for reading, be sure to sign up on our mailing list to get information like this direct to your inbox each month.
Creating a Production Build - Building Angular 2 Applications with Gulp - Part 9
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, Part 7, and Part 8.
Sometimes I like to create a build intended for production servers which does not include source maps. To make that happen, I use a gulp-if plugin to conditionally decide whether to generate the source maps, or not. First, install gulp-if:
npm install --save-dev gulp-if
You'll see an install screen like this:
Now, import the gulp-if library as part of the gulpfile.js:
var gulpIf = require('gulp-if');
Before we modify the buildTS task, let's add a variable named devMode:
var devMode = true;
This is the variable we will use to determine whether or not to generate the source maps. It is set to true by default. Primarily we will change this variable as part of tasks, not as a configuration option. Review the buildTS task:
gulp.task("buildTS", ["tslint"], function() {
return gulp.src(typeScriptSource)
.pipe(sourcemaps.init())
.pipe(tsProject())
.pipe(uglify())
.pipe(sourcemaps.write(mapPath))
.pipe(gulp.dest(destinationPath));
});
We want to use gulp-if as part of the two source map statements. First replace the source map init statement:
.pipe(gulpIf(devMode,sourcemaps.init()))
Instead of just calling sourcemaps.init(), we now wrap it in a gulpIf. This will check the devMode variable and conditionally init the source maps.
Also change the sourcemaps.write() pipe:
.pipe(gulpIf(devMode,sourcemaps.write(mapPath)))
With the buildTS task updated, we can now create a task for building a production version of the app. The purpose of this task is to set the devMode value to false; and then run the cleanBuild task:
gulp.task('buildProd', function(){
devMode = false;
gulp.start('cleanBuild')
});
We can use gulp.start() to run the cleanBuild task. Running cleanBuild will delete the build directory, and then run the build task to compile the TypeScript files, move the HTML, and move the JavaScript libraries.
Run the task:
gulp buildProd
You should see this:
Take a look at the build directory:
You'll notice that the maps directory is missing; meaning that the sourcemaps were successfully bypassed when running the cleanBuild. We can use this same approach to perform other actions as part of a build process. In the future, I plan to make changes to the buildProd script to force the Angular application into production mode, instead of development mode by default.
What's Next?
I have one final entry prepared for this blog series. The next one will talk about recompiling code as you make changes.
Get our white paper for even more information:
Creating a Clean Build - Building Angular 2 Applications with Gulp - Part 8
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, and Part 7.
This part of the series will show you how to delete the build directory and produce something that I call a clean build. This is important when refactoring code, which may leave remnants of old files in the build directory.
Delete the Build Directory
To delete a directory, we can use the NodeJS Plugin, del. This isn't a Gulp plugin, but can be wrapped in a gulp task. First, install it:
npm install --save-dev del
You'll see the install screen, like this:
Next, you can load the del library inside your gulpfile.js:
var del = require('del');
Create a glob array with everything that needs to be deleted:
var deletePath = [destinationPath + '/**']
The destinationPath variable is used, with a wild card after it. This tells the del task to delete everything. Next, create the task:
gulp.task('clean', function () {
return del(deletePath);
});
The task is named clean. It calls the del() module with the deletePath value. Run the task:
gulp clean
You'll see this:
Check your project directory:
The build directory is noticeably absent, which is exactly what we want.
Run Clean, then Build
Let's combine the clean task with the build path. To do that we'll want to run the two tasks in sequence, as we don't want the clean task to delete files the build task is creating. To do that we'll use a gulp plugin named run-sequence.
Install the plugin:
npm install --save-dev run-sequence
You'll see this:
With it installed, we can create an instance of it in the gulpfile.js:
var runSequence = require('run-sequence');
Then, create the task:
gulp.task('cleanBuild', function () {
runSequence('clean', 'build');
});
I named the gulp task, cleanBuild. It uses the runSequence library to run the clean task--which deletes everything in the build directory, and the build task--which will create a fresh build.
Run the task:
gulp cleanBuild
You'll see something like this:
You see that the clean task is run first; and after it is finished the build tasks start. This will delete the build directory and all other relevant files, and then re-generate using the other tasks we wrote about earlier in this chapter.
What's Next?
The next part of this series will create what I call a production build. The final part will show you how to watch directories for changes while the code is in development.
Sign up to our mailing list to get an expanded version of this series.
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.
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');
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.
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!
