In today’s front-end development, it’s all about components. And so is Angular. But there are very different kinds of components.

This post will:

The post assumes you’re already familiar with Angular basics.

A French version of this post is available here.

Visual Studio Code extension


Now that TypeScript has been widely adopted, it’s time to get serious and go to the end of the idea: fully statically typed code.

typescript-strictly-typed enables configurations for strictly typed TypeScript, ESLint or TSLint, and optionally Angular. But let’s explain first.

A French version of this article is available here.

Disclaimer

The purpose of this post is not to convince anyone about the benefits of TypeScript. Its target is developers who are already aware that now JavaScript is used to code applications (ie. …


The 2018 State of JavaScript survey initiated a buzz about its Angular stats: about 30% of users are supposed to have used Angular, but would not use it again, mainly because it is supposed to be “bloated and complex”.

The bias of the survey seems obvious and can be discussed, but we should face a reality: Angular indeed have a bad reputation — undeserved but real. It comes from having kept the same name as AngularJS (Angular v1) while it’s in fact a different framework, and having neglected the documentation at the beginning.

Those were just communication errors. Technically, Angular…


I’m happy to announce the stable release of Angular schematics extension for Visual Studio Code!

A French version of this article is available here.

Why this extension?

No more manual command lines, you can now ng generate components, services and any other schematics with a visual interface. Save time!

No more errors

Remember all the times you misspelled a command and had to delete all files, remove all the imports and start again? No more! Angular schematics extension for Visual Studio Code will ensure the command is well formed, and you’ll have a chance to check before launching complex commands.

No more search

Remember all the times you erratically…


You know the Angular async pipe, right? Ever wanted to use it everywhere in your app? Then you’ll want @ngx-pwa/offline.

A French version of this post is available here.

Angular async pipe: reminder

When you have an asynchronous operation, let’s say a service getting data from an HTTP request:

you normally have to manually subscribe to the Observable:

Well, let’s use some Angular magic:

With the async pipe, not only Angular is doing the subscription for you, but it will also do the unsubscription for you. Amazing!

Angular async pipe: the pitfall

Much better, right? But we lost control on something: the error callback. …


One year ago, I published Understanding Angular modules (NgModule). This post was focused on a technical point: scope, to know when to import a NgModule. You should read it first, but it didn’t explain how to organize your own modules.

Recently, I was challenged about architecture in Angular projects. Until now, I was mostly following what is suggested in Angular doc. But against big projects, several flaws appeared and something was wrong.

So I dove into Angular documentation: there are now 12 long pages to explain how NgModules work, including a FAQ. But after reading all this stuff, I was…


Many people think Angular is too complex and other frameworks like React or Vue.js are easier. Think again.

A French version of this article is available here.

Angular today: a Progressive Web App in 2 minutes

npm install @angular/cli -g
ng new myapp --routing
cd myapp
ng add @angular/pwa
ng build --prod

That’s it. You have a real web app, working offline.

You also have out of the box (non-exhaustive list):


The Universal project started a long time ago, while Angular was still in beta. After one year and half of waiting, it is now possible to activate server-side rendering on a real Angular app !

But that’s not just a config property to activate for now, so I’ll explain all the steps. Thanks to Philippe Martin and his article Creating an Angular Universal app with the Angular CLI, reproduced in the CLI official wiki. I started from here and many points are already explained, but some points are missing to apply it on a real app, so let’s start.

A…


NgModule is the first basic structure you meet when coding an app with Angular, but it’s also the most subtle and complex, because of different scopes. Angular documentation has done a whole FAQ about NgModules, but it’s still quite a mess to teach this during courses, students are often confused, so I decided to sum it up in this post for everyone.

A French version of this post is available here.

Why NgModule?

It’s done automatically with Angular CLI, but the first thing you have to do in Angular is to load a root NgModule :

The purpose of a NgModule…


When I created angular-async-local-storage, it was easy to create an Angular module and use it directly in my app. But as it could help other developers, I wanted it to be a reusable module, packaged and consumed like any other Angular modules.

I struggled with this building part. I found almost no documentation about this, so I tried to copy how the official Http module works. Now it’s done, I’m sharing my experience on how to build and publish an Angular module.

This post is for experienced developers, who already know the core concepts of Angular and how to create…

Cyrille Tuzi

JavaScript and Angular trainer, PHP certified, @formationjs

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