How about autocomplete for imports and such for components?

This extension provides a rich editing experience for Angular templates, both inline and external templates including:

Completions lists
AOT Diagnostic messages
Quick info
Go to definition
This extension uses @angular/language-service@5.0.0-beta.5 and typescript@2.4.2

Angular (not js) with Google Material via the CLI tooling

I have been playing around with Angular & the Google Material design specification coupled with Angular-CLI.

Here is my github repo (extremely basic) but to get it working there are a bunch of installs and configurations you will need to do.

  • Make sure you are running an updated version of Node and NPM
  • The official recipe guide.
  • Install the Angular Material CDK – npm install –save @angular/material @angular/cdk
  • If you want the animations of course you need to install them too – npm install –save @angular/animations

Once you have all that done…
Use Angular CLI (make sure it is updated globally) and follow this recipe guide.

Angular’s template syntax

Angular’s template syntax:

  • [property]="expression": set property of an element to the value of expression
  • (event)="statement": execute statement when event occurred
  • [(property)]="expression": create two-way binding with expression
  • [class.special]="expression": add special CSS class to element when the value of expression is truthy
  • [style.color]="expression": set color CSS property to the value of expression

If you’re not familiar with Angular’s template syntax, you should definitely read the official template syntax documentation.


We have been undergoing a major upgrade to our tech stack and here is what we are implementing now…  WOOT WOOT



žCloud Formation – A service that allows the entire stack to be built, provisioned, provisioned, and torn down demand.

žELB – A load balancer that works with autoscaling to create and destroy servers as needed by the traffic load.

žEC2 – Cloud-based virtual machines.

žEFS – A network file system that allows multiple EC2 instances to share a file system, even across availability zones.

žS3 – A Simple Storage Service designed to hold static resources, such as images and documents.

žRDS – Relational Database Services that cross availability zones, provide high availability, provide fail-over, and provide backup.

Angular2 Constructor Guards…

Right from the angular docs

You can use this method to prevent accidental loading of a previously loaded module..

How can I tell if a module or service was previously loaded?

Some modules and its services should only be loaded once by the root AppModule. Importing the module a second time by lazy loading a module could produce errant behavior that may be difficult to detect and diagnose.

We can guard against that danger by writing a constructor that attempts to inject the module or service from the root app injector. If the injection succeeds, the class has been loaded a second time. We can throw an error or take other remedial action.

Certain Angular modules (such as BrowserModule) implements such a guard as does this Angular Module chapter sample’s CoreModule constructor.

constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
 if (parentModule) {
 throw new Error(
 'CoreModule is already loaded. Import it in the AppModule only');