The purpose of this article is to specify a working architecture that everyone can use for any Angular applications. This architecture aims to achieve the following goals:

  • Ensure that all parts of an application have a home so that anyone can pick up any application that uses this architecture and modify the application without having to learn where everything lives.
  • Reduce the overall complexity of any one application by using well-established design patterns that work within the Angular ecosystem.
  • Reduce the number of bugs introduced into an application by reducing the need for duplicate code.

Guiding Principles


This past week, I needed to be able to upload an image in my application to the server as a file so that I could crop it and upload it.

Now, uploading an image that you pulled up using the file upload control is relatively straight forward. But, in our case, the image we want to be able to upload didn’t always come from the user’s file system. This causes two problems.

First, you can’t crop an image you retrieved from a different URL using the HTML Canvas because of Cross Origin restrictions and second, you can’t upload the file…


As I’ve traveled around to various enterprises, I’ve run into a question that keeps repeating itself in various forms. “How do we upgrade to angular from…?” As I’ve considered the question, several patterns have emerged.

Photo credit: MTAPhotos on VisualHunt.com / CC BY

From a Portal

The first time I was asked this question, the team I was talking with had an existing Web 1.0 site setup using WebSphere Portal. Not something that you can easily plug any Single Page Application (SPA) into. But all is not lost.

One of the easiest ways to solve the problem is to create a reverse proxy. One popular tool for this is mod_proxy for…


I don’t know about you, but one of the main problems I’ve always had with NgRX is that the Action Type relies on strings. And, every time I create a new set of Actions, I typically copy and paste from an existing actions file and modify the strings. Of course, some times I forget and then I end up with code in two different places firing at strange times and getting results showing up that I didn’t expect.

Photo on Visualhunt

Getting On The Same Page

First, let’s review what an NgRX Actions file should look like:

You may have seen a form of this file that…


One of the most popular questions for new Angular developers seems to be “How do I add CSS and JavaScript to an Angular CLI project?”

Often, these programmers are coming from an AngularJS background and their world has changed.

In this article, we explore several “correct” methods of adding CSS and JavaScript into an existing project in a way that will work consistent with the bundling, minifying, and tree shaking that the Angular CLI does for us.

Adding CSS and JavaScript

The temptation is to add the external files directly to your index.html file. But if you do this, the files won’t get bundled…


Because this is a frequent problem, because it is so often done incorrectly and because there is a great alternative, today I want to discuss where to store Angular configurations. You know, all that information that changes as you move from your local development environment to the Development, QA and Production servers?

There’s a place for that!

Photo credit: Shawn T. O’Neil on VisualHunt.com / CC BY

Wrong Place

I know it is tempting, but the environment.ts and environment.prod.ts files were never meant for configuration information other than to tell the run-time you are running a production version of the code instead of developing the code locally. Yes, I know it is…


This past week, I ran into a need to dynamically add components using Angular. My specific reason for doing this is that the component I am using is a port of an AngularJS component and so it doesn’t quite conform to the Angular way of doing things. Specifically, I can’t change input values and have the component respond reliably. But, regardless of why I need this functionality, or even why you may need this functionality, I think being able to do this at all is pretty cool.

Photo via Visualhunt.com

Prerequisites

For the purposes of this post, I’m going to assume that you have…


I’ve been working on a new project over the last weeks that involves getting TypeScript and Electron working together. Unfortunately, the amount of information available on how to do this correctly is pathetically none existent.

That isn’t to say there aren’t sites that don’t try. But in the end, all they show you is how to write essentially the same JavaScript code you would have written using JavaScript with a little bit of type information thrown in. What I was looking for was something a little more object oriented. Let’s use ALL of TypeScript.

And then there is the whole…


There are two basic ways to structure the code you will be working on to Unit test the code in your main application using NUnit. Arrange/Act/Assert (AAA) is what I refer to as the “Classic” method. It has been around for as long as I’ve known about unit testing. The second method is the Given/When/Then (GWT) structure.

While both methods get the job done and both methods essentially help you structure your test, I think that the Given/When/Then structure helps us think about what we are trying to test from a more functional perspective. …

Dave Bush

Dave Bush is an Agile/Scrum/Extreme Architect and Programmer who is currently focused on the world of Angular.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store