Check out our Angular Book Series.

How do I send JSON to a Server in Angular 2+?

I have a lot more trouble answering Angular questions on StackOverflow than I did answering Flex questions. The bulk of Angular problems seem to come from integrating different systems and libraries together. But, every once in a while I see a question that I seem to be the perfect person to answer. This question is about Sending JSON from Angular to PHP. I wrote a book about that.

When sending JSON to PHP--or Java or ColdFusion or any server side tech--you need to be sure to set the headers to application/json.

If you are using Angular 2, this is how you do it:

let optionHeaders : Headers = new Headers();
optionHeaders.append('Content-Type', 'application/json');
let options: RequestOptions = new RequestOptions({headers:optionHeaders});
this.http.post(serverEndPoint, JSONPayload,options);

We create an instance of a RequestOptions object, and add the Headers onto it. The RequestOptions object is sent as part of your server request, in this case using a post() method. This is all part of the now deprecated Http library.

Angular 5 introduced the new HttpClient library, which does things a bit differently:

let options : Object;
let optionHeaders : HttpHeaders = new HttpHeaders().set('Content-Type', 'application/json');
options = {headers:optionHeaders};
this.http.post(serverEndPoint, JSONPayload,options);

You create a generic options object, and add an HttpHeaders() instance inside of it. Send that as the options argument to the http method, also a post().

Debug an Angular Application with a Chrome Plugin

I just discovered Augary, a Chrome Plugin for debugging angular applications. I can't believe I never came across this before.

Install Augary and then an Augary tab will appear as part of the Chrome Debugger tools. Here it is for the Learn With application:

Instead of trying to unravel the application through compiled source files and some guesses, Augaray models out the application for you and allows you drill into services, components, and routes to give you a deeper understanding of what is going on in your Angular application.

I've been playing around with it and it is pretty awesome.

How to specify the CSS extension when generating a Component with Angular CLI 6?

I created a brand new Angular CLI 6 project:


ng new foo --style=scss

I wrote about this in another blog post.

Now generate a component:


ng generate component myComp/display

As expected, the new component is generated using SCSS:

That's good. But, what if you want to use something other than the project settings, like creating a normal CSS file as part of your new component or using the styleext command line argument:


ng generate component myComp/otherdisplay --styleext=css

Now look at the generated files:

It changed the SCSS files from the first command to CSS Files in the second command. In case you are experimenting with different preprocessors for whatever reason, this has you covered.

How do I modify an existing Angular6 Project to use SASS?

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:


"projects": {
"myAppSetToUseCSS ": {
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
....

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


ng config projects.myAppNotSetToUseCSS.schematics.@schematics/angular:component.styleext scss

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:


"projects": {
"myAppNotSetToUseCSS": {
"architect": {
"build": {
"styles": [
"src/styles.scss"
],
"test": {
"options": {
"styles": [
"src/styles.scss"
],
....

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.

How to set up an Angular 6 Project to use SASS?

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.


ng new foo

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:


ng new bar --style=scss

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 I use an Underscore in a URL?

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:


site.com_local

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

site.com_local
to
site.com.local
.

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.

My Angular 6 Books are Out

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.

What are Route Guards in Angular?

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:


import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {
constructor() {}
canActivate() {
return userHasLoggedIn
}
}

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:


import {AuthGuard} from "./auth-guard.service";
@NgModule({
imports: [ RouterModule.forRoot(ROUTES) ],
exports: [ RouterModule ],
providers: [AuthGuard],
})

A constant named ROUTES defines the application's roots:


const ROUTES : Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'GotIn', component: MainApplicationComponent, canActivate: [AuthGuard] },
];

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.

When am I too old to learn programming?

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?

Using Angular, RXJS, and SystemJS

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:


Error: Unexpected token <
Evaluating http://local10.dciseed.dot-com-it.com/Angular6TypeScript/build/js/rxjs

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:


packages: {
'rxjs/ajax': {main: 'index.js', defaultExtension: 'js' },
'rxjs/operators': {main: 'index.js', defaultExtension: 'js' },
'rxjs/testing': {main: 'index.js', defaultExtension: 'js' },
'rxjs/websocket': {main: 'index.js', defaultExtension: 'js' },
rxjs: { main: 'index.js', defaultExtension: 'js' }
}

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,

More Entries

All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.