If you haven't done so already, you may want to read last week's post about generating an Angular 6 project to use SASS instead of regular CSS files. There is a ton of documentation out there on how to do this for Angular 5 or before and they direct you to use ng set to modify the Angular config file. None of that works for Angular 6, because the

get/set have been deprecated in favor of the config command.

I had two problems. First, I found the documentation on how to use the config command a bit lacking. Second, you already have to know the properties you want to change before you can use the command.

Create a new project that is set to use SCSS and you'll find something like this:

This is what we want to create in our SASS-free project. Here is the command to add it to a new project:

You won't get a command line response, but your angular.json will not be updated.

If you want to CSS files that were already modified, you'll have to change them on your file system--and any code that references them such as a @component metadata. Be sure to open up the angular.json file and change the other defaults:

Those are the only two references to the default styles folder for the main project, but be sure to do a file search through your Angular.json file just to make sure.

I've been doing some architecture work on a new project, and setting up the project infrastructure using Angular 6 CLI. Without thinking I created a project normally.

You'll see something like this:

Notice that the CSS Files generated have the CSS extension. That's not what I wanted, SASS files have the scss extension. To tell Angular CLI how to create a project using SCSS files, you need to specify the style command like attribute:

Now look:

The files are properly updated. Next week, I'll show you how to update a project that was already generated to make it use SCSS by default.

Can you use an underscore in a domain name? The short answer is no. The longer is maybe, but don't do it.

I'm working on a project, and I'm the first Windows user on the team. They set up there local dev domains to point to sites:

I set it up using a hosts file on my Windows unit. I was able to ping that domain without issues and was able to telnet to the port. But, the web browsers wouldn't load the URL. This was confusing.

I resolved all the site load issues by changing the URL from

To make things extra odd, I can't replicate this on my own personal machine. Sites with URLs seem to load perfectly, so I'm wondering if the issue is with Tomcat--not Apache Web Server--or Docker which I'm not using on my own machine.

There is a great write up on this here. The general gist is don't use the underscore in URLs host names, or Fully Qualfiied Domain Names, but they might be okay in other types of DNS lookups.

Aside from being swamped with client work, I've just updated the Learn With series for Angular 6.

This is a relatively minor update as there were not a lot of changes between Angular 5 and 6, but if you want to find out the information on the latest version that is the best way to get it.

Right now I'm working on a series of longer articles about using Redux and Angular. They should be out soon.

When you build an Angular application, you're probably going to use a router. The router is a library that allows you to change the URL of the application, and with that URL change to load new components. How do you protect parts of your application from being accessed by users who are not authorized? You use a Route Guard.

What is a Route Guard?

A Route Guard is code that Angular will execute when processing the route. I have been using one to determine whether a user should have access to the route or not. However, they can be used for any purpose. There are a handful of different hooks that can be used:

• CanActivate to mediate navigation to a route. This is the one I'll demonstrate today.
• CanActivateChild to mediate navigation to a child route.
• CanDeactivate to mediate navigation away from the current route.
• Resolve to perform route data retrieval before route activation.
• CanLoad to mediate navigation to a feature module loaded asynchronously.

That list is copied from the documentation, because I don't think a lot of elaboration is needed.

Using CanActivate

I'm going to use modified code from my latest book on Angular 6, which you should get if you want a beginner's introduction to Angular.

The first step is to create a Service:

The guard is marked as Injectable and implements the CanActivate method. I greatly simplified the algorithm for determining whether a user has logged in or not, but it can be as complex as you need it. I'm just returning a Boolean value. If the user has logged in--via the userHasLoggedIn value, then the user can activate this route and the canActviate() method returns true. If the user has not logged in, then canActivate() returns false and Angular will know now to load the route.

Since this is a service, load it in your module. In the LearnWith books, I set up a module strictly for routing purposes, so it looks something like this:

A constant named ROUTES defines the application's roots:

The object which defines the router has a canActivate property and uses the AuthGuard class as it's value. So, when the user purposely tries to load the GotIn route, the canActivate() method inside the AuthGuard class will execute and determine whether the user can view this route based on their logged in status.

Route Guards a powerful and something to learn if you care about the security if your application.

Be sure to pick up my full book series on Angular 6.

This comes in from a reader, and I thought it might make an interesting blog post.

After reading your "general life lessons" blog

I consider this a programming blog as opposed to general life lesson blog. But, then again, I'm writing this post, so...

I wanted to ask if you have known anyone who has came into the field of programming at a later age with no prior experience and if so how did they learn?

I know tons of people who came to the field or programming later in life w/ no prior experience. Of course, the bulk of them entered the field in the 80s and 90s. It might be harder to do that today. I'll get to the 'how did they learn' later.

and can the field of programming be for everyone?

I'd like to think so.

Im turning 30 next year with 12 years of blur behind me.

I just want to point out that, from my perspective, you are not entering the field 'later in life'. Unless you plan to spend the next 20 or so years studying before trying to enter the workforce. 30 isn't old nor later in life.

I just finished my AA and intro classes into programming(basically C++ Syntax and excercises). what brings me down is the guidance from other people. when I ask for advice from people in the field most answers are "get an internship", "things will come together when you graduate", and "work on real-world applications".

It sounds like you're too beginner to be considered for an internship, but maybe in a year or two. If you can get an internship or Co-op or similar work-study program I highly recommend it. It gives you work experience and programming experience with no expectations of preexisting knowledge. I cannot say enough good things about my own co-op experience--back in the mid 90s.

As an entry-level CS student with a plethora of information its difficult for me to understand what should i be learning not necessarily in order but things i need to know to break into the field one day. I think i pretty much hit a HUGE learning curve after learning how to print to screen, receive input, ifs and switches, loops, arrays, pointers, and classes.

Earlier you asked how people learn. People learn in a lot of different ways. I, personally, learn by experimenting with stuff and writing about it which is why my blog is full of programming posts, some stuff about obscure bugs, some about weird trivia, and some are just super basic stuff.

C, or C++, is pretty low-level. Not bad for basics, but it is unlikely you will graduate to work in that language. The thing I recommend concentrating on is learning concepts. It sounds like you have very basics. But, learn about how to use classes to create your own data types. Learn about encapsulation principles and separation of logic and data, and how loosely coupled pieces can fit together to build something more. That sort of stuff will, hopefully, come in some more advanced classes. Also experiment with other languages; especially other language types. SQL is a different type of language than C, and LISP is completely different than either of those, as some random examples.

All those things will make you a better programmer, and while in school for programming that should be your primary goal.

That said, I fully believe that being a good programmer will not help you get a job. For that you'll need to learn some marketing and networking. An internship can give you a jump start on that.

Unfortunately, interviewing has changed in the past 3-5 years. It becomes more about programming trivia than about how to get things done. I've been on some brutal client interviews where even when I do awesome I have no desire to move forward.

There are some random thoughts. What do you think?

just updated DotComIt's build scripts for building Angular 6 applications. I wrote these before the AngularCLI was king of the heap and keep these around because I haven't had time to update my LearnWith series, which contains an introduction to Angular.

Anyway, I copied my Angular5 scripts, updated the package.json to a bunch of new versions, build the sample app, and then started getting errors from the application:

My local dev server has directory browsing turned on, so instead of loading the actual files behind rxjs it was trying to load the directory listing. That won't work. I also saw this error in my experimentation, which said that '"rxjs/operators" not found'. Supposedly that issue was fixed long before RXJS 6.0.0, but alas I was still seeing it.

The solution was to list all the rxjs directories as a package inside of SystemJS Config:

It took me a while to find this solution, and even then I couldn't get it to work until I removed the quotes around the last package definition.

Weird stuff,

I've been writing unit tests for clients. It's a nice change to finally have some clients who care about such things.

I have this Angular method that creates an object, then emits an event.

The method was something like this:

I want to be compare the properties of the eventParameters argument with what I expect them to be. However, I have no way to access the eventParameters directly because it is local to the method. My first thought was to do something like this:

However my intent was to test the code inside the method, whereas this bypasses calling the method altogether. That would not suffice.

So, how'd I do it?

First, I saved an instance to the Spy:

I can drill down into this spy to get the results of the most recent call:

Once I have the argument object, I can introspect it to compare the arguments created by the method with what I expected them to be.

TaDa!

This is a followup to last week's post about using Object.assign() to combine two JavaScript objects. Today I'll show you how to use the spread, or ellipsis, operator to do the same thing.

The scenario is that we have a configuration object being passed into a method. A lot of the config values are optional, and we want to default them if they are left out before the method does it's magic. We could write a lot of manual conditions to accomplish this, like this:

The code works, but it is tedious to write. We can use the Spread Operator to simplify it.

The Spread Operator

The spread operator is an ellipsis, or three dots. It has a handful of uses, but today I'm going to show you how to combine two objects.

Start with a function and an object that contains all the default values:

Notice I didn't close the object yet. We have one more property to add to the object:

That last property is our spread operator. It tells the underlying engine to take all the properties from the config object and copy them into the defaultObject. If a property already exists in the defaultObject, it is overwritten. If a property does not exist it will not be changed.

For demonstration purposes, log the two objects:

You can test this like this:

Look at the console output and you'll see that the original config object is unchanged, but the default object contains all the new values:

The custom values from our config argument are retained and the unset default value--option4--is set with the new config.

You have to be careful when doing this to keep around a clean version of the default object since it is modified with this approach. I addressed that by creating the default config inside the function, as opposed to some permanent store.

Play with the code here.

It is a nice shorthand to be aware about.

Let's say we have a config object being passed into a method. A lot of the config values are optional, and we want to default them if they are left out before the method does it's magic. The structure is like this:

The code works great, but it is tedious to write all those conditionals. Is there a way to simplify it? Yes there is and I'm going to talk about two ways to do that. Today we'll cover object.assign().

Object Assign

The first way to simplify this code is to use object.assign(). Object.assign() will copy all the values from one object into another. First, create an object instance with all the default values:

Now use Object.assign() to combine that with your function argument:

You can test this like this:

Look at the console output and you'll see that the original config object is unchanged, but the default object contains all the new values:

The custom values from our config argument are retained and the unset default value--option4--is set with the new config.

You have to be careful when doing this to keep around a clean version of the default object since it is modified with this approach. I addressed that by creating the default config inside the function, as opposed to some permanent store.

Play with the code here.

Next week I'm going to talk about the Spread operator which can be used to accomplish the same thing.