Who else wants to learn how to properly test an Angular application — in half the time?
Say!
Why does testing Angular applications have to be so complicated?
Where do you start when you have to write tests for your Angular application?
What are the first steps?
What should you test?
Not sure how to mock a dependency? Or if you should just inject it directly?
And what Angular testing tools should you use?
What’s Karma anyway?
And how do I use Jasmine?
Or is Mocha better?
Should you test everything? Are unit or integration tests better? What about smock or E2E tests?
Getting started with Angular testing can be overwhelming — it’s hard to know where…
So you can shake the bugs outta your Angular code.
Want to skip the read and get to the code right away? Then click here.
Have you ever noticed…
That…
A common dependency inside an Angular service file is the HttpClient? 😸
Maybe your experience with Angular has been different than mine but I find that the HttpClient is a common dependency in an Angular service.
And rightly so.
It’s considered best practice to put your data logic inside a service that can be shared across the application. This leaves the job of displaying or rendering the data to your front-end components. …
Every. Single. Time.
How do make sure that your Angular application is always production ready every single time it’s deployed?
What can you do to make sure you never deploy a slow Angular application?
How do use the Lighthouse package with your Angular project to make sure it scores well every single time you deploy?
Well…
Let’s start with a story …
…about a booming startup company named LeanTech with an Angular app that served millions of users.
LeanTech had a team of 5 senior developers that knew Angular well. …
In less than 30 seconds.
Here’s how to configure code coverage to discover which chunks of your Angular application are being tested.
Three.
Two.
One.
GO!
1. Change the angular.json
Open the angular.json file in the root folder of your Angular project.
Scroll to the test section and add the codeCoverage: true line.
Like this.
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
...
"codeCoverage": true
}
},Now, when you restart the Angular testing process, you’ll see a new folder in your project called coverage. This is the code coverage report for your Angular application.
2. Set up the code coverage report in Visual Studio Code.
So now that we’ve got our code coverage reports generated, how do we show them?
Well, there’s an extension that will do this for us. It’s called Coverage Gutters.
Go to Extensions…
Frustrated with your slow Angular app? Here’s how to double or even triple the speed of your Angular application.
Need to make your Angular app perform faster RIGHT NOW? Then click here to view and download the complete Angular performance checklist.
Otherwise, if you want to dive deep…
…into all the mechanics and logic of how we improve the performance of an Angular application, then read on.
We’ve got so much to cover and you’re in for a real ride!
Introduction
Imagine doubling or tripling the performance of your angular application.
What if your Angular application loaded twice as fast?
Or once it had loaded, it performed many times faster than it currently does?
We can even take it a…
Using the Mocha reporter to make your Angular tests prettier and more readable. 😄
Some Angular developers grumble about the jumbled output that appears in the terminal when they test their Angular applications.
They want a nicer report that’s easier to understand at a glance….
So…
Karma Mocha Reporter to the rescue!
Once installed and configured, here’s what the outputs will look like.
Here’s the complete guide to setting up a login form and authentication with Angular.
Angular.
Authentication.
And authorization.
How do you do it?
How do you add a login form to your Angular application?
And how do you make sure that users that aren’t logged in automatically see your login page? And the logged-in (authenticated) users see the dashboard or something else?
In this guide, I’m going to show you how to add authentication to your Angular app.
Why?
Because I want to make you a better Angular developer.
How would it feel if you could quickly add authentication features to your Angular app? Or whip together a beautiful login form? …
Data models are the backbone of any .NET Core API server.
At least, that’s been my experience.
And building on the data models are the API controllers that give the world access to your data.
Here’s a quick shortcut that could drastically accelerate the performance of your Angular application. 💥
Frustrated with the build size of your Angular app? 😟
Is your Angular application as slow as a waddling-250-pound turtle?
Does it take a long time for your Angular app to load?
Say, what can you do to improve the performance of your Angular app? And make it load faster?
Large bundle builds are a common Angular problem. To prove my point just run over to Stack Overflow, there’s a popular Angular question — How to decrease prod bundle size?.
And almost every Angular developer finds themselves sooner or later rubbing a lot of brain cells on this Angular performance…
Here are 4 ways you can reduce the bundle size. And make it load faster.
Angular developers commonly struggle with performance issues.
It’s one of the biggest drawbacks and largest troubles of the Angular framework.
How do I know?
Recently I surveyed a handful of Angular developers and asked them what their biggest frustration with Angular is. Here’s what they told me.
