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.
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.
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.
I’m happy to announce the stable release of Angular schematics extension for Visual Studio Code!
No more manual command lines, you can now ng generate components, services and any other schematics with a visual interface. Save time!
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.
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:
async pipe, not only Angular is doing the subscription for you, but it will also do the unsubscription for you. Amazing!
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…
npm install @angular/cli -g
ng new myapp --routing
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.
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.
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.