
When creating services to be used with Angular's *Dependency Injection* system, a provider is needed for each service. 

## Providers in AppModule

By adding services as `providers` in the `AppModule`, the build tools and compilers are unable to know
if that code is actually used in the application. They will always make these services available throughout the application even if they are never used. These services will not be able to take advantage of *tree-shaking*. More on *tree-shaking* down below.

```javascript
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [],
  providers: [
    UserService,
    PostService,
    CategoryService, 
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

Rather than adding all of your services into the `providers` array of `AppModule`, as seen above, Angular recommends setting the `providedIn` property of a service's `@Injectable()` decorator. This will make such services *tree-shakable*. The service will still need to be injected where it is used.

## Root application injector

```javascript
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class UserService { } 
```

By using `root`, we specify that Angular should provide the `UserService` in the root injector. It will be available throughout the application. We've just created a *singleton* service, which is a service for which only one instance exists in an application. 

When using `providedIn` on services, they will only be bundled in the application if they get used. These are called *tree-shakable providers*.

## What is tree-shaking?

Tree shaking is a build process operation that helps with removing unused code from a code base. It's like shaking a a tree and having the dead leaves fall off the tree. Tree shaking only includes the code that is needed for the app to run.

## Feature modules

We can also specify that a service should be provided in a particular `@NgModule`. If we don't want `UserService` to be available unless a `UserModule` is imported, then we can specify that the service should be provided only in the module.

```javascript
import { Injectable } from '@angular/core';
import { UserModule } from './user.module';

@Injectable({
  providedIn: UserModule,
})
export class UserService { }
```

This is the recommended way to provide a service in a feature module. This method enables tree-shaking of the service if nothing ends up injecting it. 



Laravel uses Eloquent, an object-relational mapper (ORM) that makes it very easy to interact with the database to determine if a record exists.

## Using first()

If you need to use the object if it exists and is returned by the database query, you can use `first()`.

```php
$user = User::where('email', $request->email)->first();
if ($user === null) {
  // user does not exist
}
```

## Using count()

If you don't need to use the object, and only need to check if such a record exists in the database, you can use `count()`.

```php
if (User::where('email', $request->email)->count() > 0) {
  // user exists
}
```

## Using exists()

There is also an `exists()` function that can be used to further simplify the query.

```php
if (User::where('email', $request->email)->exists()) {
  // user exists
}
```


I was attempting to install [Storybook](https://storybook.js.org/docs/angular/) on an Angular 9 application and kept getting the following error when running the `build-storybook` command-line utility: `92% chunk asset optimization TerserPlugin previousExtractedCommentsSource.replace is not a function`.

I tried upgrading the Angular application from Angular 9 to Angular 11 but I noticed that the `build-storybook` error was still occuring on Angular 11.

When I had first used `npx sb init` to install Storybook, I got the following version installed in the `package.json` file of my Angular application. I was not able to get `build-storybook` to work with this version.

```json
"@storybook/angular": "^6.2.9",
```

I then decided to try upgrading my Storybook installation with the latest pre-release version of Storybook by using `npx sb upgrade --prerelease`. This gave me the following version.

```json
"@storybook/angular": "^6.3.0-beta.14",
```

I'm now able to run `build-storybook` from the command-line of the Angular 9 app successfully with this prerelease version of Storybook. I hope this can help anyone else struggling with the same error.



In this post, we'll look at quick and easy ways to remove duplicates in JavaScript from:

- arrays
- arrays of objects

## Removing duplicates from arrays

### Using Set

```javascript
const brands = ['Wilson', 'Babolat', 'Wilson'];

console.log([...new Set(brands)]);
// ["Wilson", "Babolat"] 
```

### Using Filter

```javascript
const brands = ['Wilson', 'Babolat', 'Wilson'];

const filtered = brands.filter((item, index) => brands.indexOf(item) === index);

console.log(filtered);
// ["Wilson", "Babolat"] 
```

The `filter` method will create a new array of elements that meet the boolean condition that we provide to it. If the condition for an element returns true, it will be included in the filtered array. If the condition for an element returns false, it will not be in the filtered array.

The `indexOf` method finds the first index position of the `item`. If the array contains duplicates for an item, the first index position returned by `indexOf` will not match the current (duplicate) item's index position.

We can also get back the duplicates from the array if we need them by switching the condition on `indexOf` to an inequality one rather than an equality one.

```javascript
const brands = ['Wilson', 'Babolat', 'Wilson'];

const filtered = brands.filter((item, index) => brands.indexOf(item) !== index);

console.log(filtered);
// ["Wilson"] 
```

### Using Reduce

The `reduce` function might be one of the hardest to understand in JavaScript. 

`reduce` applies a reducer function to the elments of the array. The `reduce` function's first two parameters are a function and an initial value. The reducer function is called on each element of the array with the `accumulator` as the first parameter. The accumulator starts with the initial value. The return value of each reducer function call becomes the new accumulator.

```javascript
const brands = ['Wilson', 'Babolat', 'Wilson'];

const result = brands.reduce((accumulator, current) => {
  if (accumulator.includes(current)) {
    return accumulator;
  } 
  return [...accumulator, current];
}, []);

console.log(result);
// ["Wilson", "Babolat"] 
```

The initial value for `reduce()` is an empty array `[]`. This is the initial value of the `accumulator`. If the accumulator does not contain the current item, then the current item gets returned along with any items in the accumulator as a new array. If the accumulator already contains the current item, then only the accumulator is returned for the next iteration of the `reduce` function. 

Here is a look at the values of the accumulator during the `reduce()` operation on the brands array.

```javascript
[LOG]: [] 
[LOG]: ["Wilson"] 
[LOG]: ["Wilson", "Babolat"] 
```

## Removing duplicates from arrays of objects

Removing duplicate objects from an array of objects is a bit more complex. 

### Set and filter

We can use a `Set` and the array `filter` method to remove duplicate objects from an array of objects.

```javascript
const brands = [
  { name: 'Wilson' },
  { name: 'Babolat' },  
  { name: 'Wilson' },
];

// a Set to track seen brands
const seen = new Set();

const filtered = brands.filter(brand => {
  // check if the current brand is a duplicate
  const isDuplicate: boolean = seen.has(brand.name);
  // add the current brand to the Set
  seen.add(brand.name);
  // filter() returns the brand when isDuplicate is false
  return !isDuplicate;
});

console.log(filtered);
// [{ "name": "Wilson" }, { "name": "Babolat" }] 
```

### Map

We can also use the JavaScript `Map` object to remove duplicates from an array of objects. `Map` holds key-value pairs and remembers the original order that keys were inserted. `Map` is similar to an `Object`, but the difference is that `Map` allows keys of any type, not just strings.

```javascript
const myMap = new Map();

myMap.set(1, 'foo');
myMap.set(1, 'bar');

console.log(map1.get(1)); 
// bar
```

As we can see from the example above, keys must be unique. The `bar` value replaces `foo` because `Map` can only hold one pair with the key `1`.

Now, let's use `Map` to help us remove duplicates from an array of objects.

```javascript
const brands = [
  { name: 'Wilson' },
  { name: 'Babolat' },  
  { name: 'Wilson' },
];

// brand name is the key for the Map
const map = new Map(brands.map(brand => [brand.name, brand]));
// put unique brand objects in an array
const uniques = [....map.values()];

console.log(uniques);
// [{ "name": "Wilson" }, { "name": "Babolat" }] 
```


Here are ways that you can turn a TypeScript `enum` into an array that you can iterate over. Let's say we have the following enum called `Categories` that has different names for its keys and values.

```javascript
enum Categories {
  AllCategories = 'All',
  ActionAdventure = 'Action/Adventure',  
  Comedy = 'Comedy',
}
```

## Keys

We can get the enum's keys by doing the following.

```javascript
const categoryKeys: Array<string> = Object.keys(Categories);

console.log(categoryKeys);
// ["AllCategories", "ActionAdventure", "Comedy"]  
```

We can iterate over the enum's keys to get it's values.

```javascript
const values: Array<Categories> = categoryKeys.map(categoryKey => Categories[categoryKey]);
// with 'noImplicitAny' disabled in tsconfig.json

console.log(values);
// ["All", "Action/Adventure", "Comedy"] 
```

Without `noImplicitAny` being disabled in `tsconfig.json`, the `Categories[key]` reference will throw an error because we are trying to access a `Categories` property using a `string` key. TypeScript warns that since `key` is a `string`, it can be equal to anything, not just the key names in `Categories`. 

We can fix this error by defining a new `key` variable with `keyof typeof Categories` and casting `categoryKey` to the same type using the `as` keyword. The possible values of `key` will now be limited to only the names of the `Categories` keys. TypeScript will be fine with this adjustment that we've made.

```javascript
const values: Array<Categories> = categoryKeys.map(categoryKey => {
  const key: keyof typeof Categories = categoryKey as keyof typeof Categories;
  return Categories[key];
});

console.log(values);
// ["All", "Action/Adventure", "Comedy"] 
```

## Values

We can also get the enum's values by doing the following.

```javascript
const values: Array<Categories> = Object.values(Categories);

console.log(values);
// ["All", "Action/Adventure", "Comedy"] 
```


Hi, I'm Steven 👋

Latest Blog Posts

Angular services as tree-shakable providers

How to check if a record exists in Laravel

Fix the TerserPlugin Storybook build error in Angular

Removing duplicates from arrays and arrays of objects

Iterating over a TypeScript Enum