matt-raible

Matt Raible is a well-known figure in the Java community and has been building web applications for most of his adult life. For over 20 years, he has helped developers learn and adopt open source frameworks and use them effectively. He's a web developer, Java Champion, and Developer Advocate at Okta. Matt is a frequent contributor to open source and a big fan of Java, IntelliJ, TypeScript, Angular, and Spring Boot. 

Developer Advocate

Matt Raible

Learn how to build a secure CRUD app with Spring Boot and Angular. You'll use Auth0 for authentication and authorization and Cypress to verify it all works.

Build a Beautiful CRUD App with Spring Boot and Angular

37590801?s=460&v=4

A software engineer who dreams about non-electric sheep and autonomous vehicles and likes to champion security.

Software Engineer

Dan Arias

Learn how to add user authentication to Angular using Observables and HTTP Interceptors.

The Complete Guide to Angular User Authentication with Auth0

Build an Ionic + Angular frontend for your Spring Boot backend, all using the power of JHipster! Secured by OpenID Connect.

Build Secure Ionic Apps with Angular and JHipster

William Juan

I am a Frontend Developer working primarily in the web and hybrid mobile spaces. The majority of my work has revolved around the Angular ecosystem, including working with other Angular-related frameworks such as NativeScript and Ionic. My passion lies in converting a design into code and achieving a close to pixel-perfect end-product.

Frontend Developer

See how it's easy to manage your Angular application's state using NGXS and learn how you can use NGXS with Auth0's SDK to handle user-related functionalities.

State Management in Angular Using NGXS

**TL;DR:** In the first part of the state management in Angular with NGXS series, we learned about the basics of NGXS, how it works, and how to use it to manage our application's state. In part 2, I will show you how to use Auth0 with NGXS to manage use-related states.

<hr/>

## User State Management

The user store will work similarly to how the menus state management works. I won't detail how each part of the state works and will focus more on the Auth0 and NGXS integration.

The starter app uses the Auth0 SDK directly and manages the roles through the `RolesService`. This tutorial section will walk you through migrating to using Auth0's SDK through NGXS and managing the roles by using the NGXS's `Select` function.

## Create User Model

Let's start with defining the interface for the user state object. Open `user.model.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.model.ts

import { User as Auth0User } from "@auth0/auth0-spa-js";

export interface UserStateModel {
  userDetails: Auth0User | undefined;
}
```

Create a barrel export for the `user` directory with the following code 👇

```typescript
// src/app/core/state/user/index.ts

export * from "./user.model";
```

To further simplify our imports, add the user folder to the barrel export in the `state` folder and add the following code 👇

```typescript
// src/app/core/state/index.ts

export * from "./menus";

// ✨ New 👇
export * from "./user";
```

## Create User Actions

We have three user-related Actions that we need for our user Store. Login, logout, and user changed Action to keep the user details in our Store in sync with Auth0's SDK.

Since we have several user Actions that will originate from the Navbar component, you can group them under `AllNavbarAction` to ensure you aren't reusing these Actions in a different part of the application (following the Good Action Hygiene pattern).

Because the `UserChangedFromAuth0SDK` Action originates from Auth0's SDK, let's name the source part of the Action type as `Auth0 SDK`.

Open `user.actions.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.actions.ts

import { User as Auth0User } from "@auth0/auth0-spa-js";

export namespace User {
  export namespace AllNavbarActions {
    export class LoginFlowInitiated {
      static readonly type = "[Navbar] Login Flow Initiated";
    }

    export class LogoutFlowInitiated {
      static readonly type = "[Navbar] Logout Flow Initiated";
    }
  }
  export class UserChangedFromAuth0SDK {
    static readonly type = "[Auth0 SDK] User Changed";
    constructor(public payload: { user: Auth0User | undefined }) {}
  }
}
```

Add `user.actions` to the barrel export. Open `index.ts` and add the following code 👇

```typescript
// src/app/core/state/user/index.ts

export * from "./user.model";

// ✨ New 👇
export * from "./user.actions";
```

### Update application to use user actions

Like what you did with menus-related functionalities in the first part of the article, let's update the application's user-related functionalities to use NGXS's Actions. You can use Actions by injecting the Store class and calling the `dispatch` function with the Action name you defined in the previous section.

Open `nav-bar.component.ts` and add the following code 👇

```typescript
// src/app/shared/components/nav-bar/nav-bar.component.ts

import { Component } from "@angular/core";
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { faHome, faUser, faUtensils } from "@fortawesome/free-solid-svg-icons";
import { AuthService } from "@auth0/auth0-angular";

// ✨ New 👇
import { Store } from "@ngxs/store";
import { User } from "src/app/core";

export interface INavBarMenuLinkProps {
  to: string;
  icon: IconDefinition;
  label: string;
}

@Component({
  selector: "app-nav-bar",
  templateUrl: "./nav-bar.component.html",
  styleUrls: ["./nav-bar.component.scss"],
})
export class NavBarComponent {
  faUser = faUser;
  isAuthenticated$ = this.authService.isAuthenticated$;
  user$ = this.authService.user$;

  navOptions: INavBarMenuLinkProps[] = [
    { to: "/home", label: "Home", icon: faHome },
    { to: "/menu", label: "Menu", icon: faUtensils },
  ];

  constructor(
    private authService: AuthService,
    // ✨ New 👇
    private store: Store
  ) {}

  loginWithRedirect(): void {
    // ✨ New 👇
    this.store.dispatch(new User.AllNavbarActions.LoginFlowInitiated());
  }

  logout(): void {
    // ✨ New 👇
    this.store.dispatch(new User.AllNavbarActions.LogoutFlowInitiated());
  }
}
```

## Create User State

Before creating individual selectors for slices of the user state, let's start by creating the boilerplate required to use this feature. NGXS uses an `Injectable` class with an additional `State` decorator. Create `user.state.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.state.ts

import { Injectable } from "@angular/core";
import { State } from "@ngxs/store";
import { UserStateModel } from "./user.model";

@State<UserStateModel>({
  name: "user",
  defaults: {
    userDetails: undefined,
  },
})
@Injectable()
export class UserState {}
```

Next, Let's add some utility Selectors for `user`, `isLoggedIn`, `userRoles`, and `isAdmin` to easily let your components access these properties. Open `user.state.ts` and update it with the following code 👇

```typescript
// src/app/core/state/user/user.state.ts

import { Injectable } from "@angular/core";
import { UserStateModel } from "./user.model";

// ✨ New 👇
import { State, Selector } from "@ngxs/store";

// ✨ New 👇
import { environment } from "src/environments/environment";

// ✨ New 👇
import { USER_ROLES } from "../../services";

@State<UserStateModel>({
  name: "user",
  defaults: {
    userDetails: undefined,
  },
})
@Injectable()
export class UserState {
  // ✨ New 👇
  @Selector()
  static user(state: UserStateModel) {
    return state.userDetails;
  }

  // ✨ New 👇
  @Selector()
  static isLoggedIn(state: UserStateModel) {
    return !!state.userDetails;
  }

  // ✨ New 👇
  @Selector()
  static userRoles(state: UserStateModel) {
    return (
      state.userDetails?.[`${environment.auth.audience}/roles`] || undefined
    );
  }

  // ✨ New 👇
  @Selector()
  static isAdmin(state: UserStateModel) {
    return state.userDetails?.[`${environment.auth.audience}/roles`]?.includes(
      USER_ROLES.MENU_ADMIN
    );
  }
}
```

Add `user.state` to the list of exports in `index.ts` 👇

```typescript
// src/app/core/state/user/index.ts

export * from "./user.model";
export * from "./user.actions";

// ✨ New 👇
export * from "./user.state";
```

### Update application to use user selectors

The user role route guard previously used the value of the roles from `RolesService`. Since you now have a user roles Selector, you can replace the current implementation with a Selector created in the previous section. Open `user-role.guard.ts` and add the following code👇

```typescript
// src/app/core/guards/user-role.guard.ts

import { Injectable } from "@angular/core";
import {
  CanActivate,
  Router,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
} from "@angular/router";
import { Observable, of } from "rxjs";
import { catchError, map } from "rxjs/operators";

// ✨ New 👇
import { Store } from "@ngxs/store";
import { UserState } from "..";

@Injectable({ providedIn: "root" })
export class UserRoleGuard implements CanActivate {
  constructor(
    private router: Router,
    // ✨ New 👇
    private store: Store
  ) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    // ✨ Update this 👇
    return this.store.select(UserState.userRoles).pipe(
      map((roles) => {
        if (roles && roles.includes(route?.data?.role)) {
          return true;
        }

        // redirect the user to home
        this.router.navigate(["/home"]);
        return false;
      }),
      catchError((err) => {
        // redirect the user to home
        this.router.navigate(["/home"]);
        return of(false);
      })
    );
  }
}
```

Another place we use user-related information is the Navbar. We display user information and conditionally display the login and logout button depending on the user's `isAuthenticated` state. Open `nav-bar.component.ts` and add the following code 👇

```typescript
// src/app/shared/components/nav-bar/nav-bar.component.ts

import { Component } from "@angular/core";
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { faHome, faUser, faUtensils } from "@fortawesome/free-solid-svg-icons";
import { Store } from "@ngxs/store";

// ✨ New 👇
import { User, UserState } from "src/app/core";

export interface INavBarMenuLinkProps {
  to: string;
  icon: IconDefinition;
  label: string;
}

@Component({
  selector: "app-nav-bar",
  templateUrl: "./nav-bar.component.html",
  styleUrls: ["./nav-bar.component.scss"],
})
export class NavBarComponent {
  faUser = faUser;

  // ✨ New 👇
  isAuthenticated$ = this.store.select(UserState.isLoggedIn);

  // ✨ New 👇
  user$ = this.store.select(UserState.user);

  navOptions: INavBarMenuLinkProps[] = [
    { to: "/home", label: "Home", icon: faHome },
    { to: "/menu", label: "Menu", icon: faUtensils },
  ];

  constructor(private store: Store) {}

  loginWithRedirect(): void {
    this.store.dispatch(new User.AllNavbarActions.LoginFlowInitiated());
  }

  logout(): void {
    this.store.dispatch(new User.AllNavbarActions.LogoutFlowInitiated());
  }
}
```

The profile page displays some information about the user, such as name and photo. Since this is stored as part of the user Store, let's also update this to use the user Selector. Open `profile.component.ts` and add the following code 👇

```typescript
// src/app/features/profile/profile.component.ts

import { Component } from "@angular/core";

// ✨ New 👇
import { Store } from "@ngxs/store";

// ✨ New 👇
import { UserState } from "src/app/core";

@Component({
  selector: "app-profile",
  templateUrl: "./profile.component.html",
  styleUrls: ["./profile.component.scss"],
})
export class ProfileComponent {
  // ✨ New 👇
  user$ = this.store.select(UserState.user);

  // ✨ New 👇
  constructor(private store: Store) {}
}
```

We display an `Add` button when the logged-in user is an admin user on the Menu Items page. You can read more about setting up admin users on Auth0 in this [blog post](https://auth0.com/blog/developing-a-secure-api-with-nestjs-adding-role-based-access-control/#Get-User-Roles). Open `menu-items.component.ts` and add the following code 👇

```typescript
// src/app/features/menu/menu-items/menu-items.component.ts

import { Component } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { Store } from "@ngxs/store";

// ✨ New 👇
import { MenusState, UserState } from "src/app/core";

@Component({
  selector: "app-menu-items",
  templateUrl: "./menu-items.component.html",
  styles: [
    `
      :host {
        width: 100%;
        height: 100%;
      }
    `,
  ],
})
export class MenuItemsComponent {
  menuItems$ = this.store.select(MenusState.menuItems);

  // ✨ New 👇
  isAdmin$ = this.store.select(UserState.isAdmin);

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private store: Store
  ) {}

  addMenuItem(): void {
    this.router.navigate(["add"], { relativeTo: this.activatedRoute });
  }
}
```

Lastly, we display the `Edit` and `Delete` buttons when the logged-in user is an admin on the Menu Item page. Open `menu-item.component.ts` and add the following code 👇

```typescript
// src/app/features/menu/menu-item/menu-item.component.ts

import { Component } from "@angular/core";
import { Location } from "@angular/common";
import { ActivatedRoute, Router } from "@angular/router";
import { map, switchMap } from "rxjs/operators";
import { Store } from "@ngxs/store";

// ✨ New 👇
import { MenusState, UserState } from "src/app/core";

@Component({
  selector: "app-menu-item",
  templateUrl: "./menu-item.component.html",
  styleUrls: ["./menu-item.component.scss"],
})
export class MenuItemComponent {
  menuItemId$ = this.activatedRoute.params.pipe(map((params) => params.id));

  menuItem$ = this.menuItemId$.pipe(
    switchMap((id) => this.store.select(MenusState.menuItem(id)))
  );

  // ✨ New 👇
  isAdmin$ = this.store.select(UserState.isAdmin);

  constructor(
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private location: Location,
    private store: Store
  ) {}

  back(): void {
    this.location.back();
  }

  navigateTo(url: string): void {
    this.router.navigateByUrl(`${this.router.url}/${url}`);
  }
}
```

## Create User Action Handlers

Like the Menus action handlers, the User state will use the `Action` decorator to handle user-related actions. For the User state, the action handlers will be where the app interact with Auth0's SDK - logging in, logging out, and updating the state with Auth0's user object.

Let's start with the login and logout action handlers that trigger their respective flows in Auth0's SDK. Open `user.state.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.state.ts

import { Injectable } from "@angular/core";

// ✨ New 👇
import { State, Action, StateContext, Store, Selector } from "@ngxs/store";
// ✨ New 👇
import { AuthService } from "@auth0/auth0-angular";

import { environment } from "src/environments/environment";
import { UserStateModel } from "./user.model";
import { User } from "./user.actions";
import { USER_ROLES } from "../../services";

@State<UserStateModel>({
  name: "user",
  defaults: {
    userDetails: undefined,
  },
})
@Injectable()
export class UserState {
  constructor(
    private store: Store,
    // ✨ New 👇
    private authService: AuthService
  ) {}

  // ✨ New 👇
  @Action(User.AllNavbarActions.LoginFlowInitiated)
  login() {
    this.authService.loginWithRedirect();
  }

  // ✨ New 👇
  @Action(User.AllNavbarActions.LogoutFlowInitiated)
  logout() {
    this.authService.logout();
  }

  @Selector()
  static user(state: UserStateModel) {
    return state.userDetails;
  }

  @Selector()
  static isLoggedIn(state: UserStateModel) {
    return !!state.userDetails;
  }

  @Selector()
  static userRoles(state: UserStateModel) {
    return (
      state.userDetails?.[`${environment.auth.audience}/roles`] || undefined
    );
  }

  @Selector()
  static isAdmin(state: UserStateModel) {
    return state.userDetails?.[`${environment.auth.audience}/roles`]?.includes(
      USER_ROLES.MENU_ADMIN
    );
  }
}
```

To keep the user observable from the Auth0's SDK and our User State in sync, create a subscription to listen to `AuthService`'s `user$` property and dispatch the `UserChangedFromAuth0SDK` whenever the observable emits a new value. `UserChangedFromAuth0SDK` will then update the User State with the new user data from Auth0. Open `user.state.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.state.ts

import { Injectable } from "@angular/core";
import { State, Action, StateContext, Store, Selector } from "@ngxs/store";
import { AuthService } from "@auth0/auth0-angular";
import { environment } from "src/environments/environment";
import { USER_ROLES } from "../../services";
import { UserStateModel } from "./user.model";
import { User } from "./user.actions";

@State<UserStateModel>({
  name: "user",
  defaults: {
    userDetails: undefined,
  },
})
@Injectable()
export class UserState {
  constructor(private store: Store, private authService: AuthService) {
    // ✨ New 👇
    this.listenToUserChange();
  }

  // ✨ New 👇
  @Action(User.UserChangedFromAuth0SDK)
  userChangedFromAuth0SDK(
    ctx: StateContext<UserStateModel>,
    actions: User.UserChangedFromAuth0SDK
  ) {
    const state = ctx.getState();
    ctx.setState({
      ...state,
      userDetails: actions.payload.user,
    });
  }

  @Action(User.AllNavbarActions.LoginFlowInitiated)
  login() {
    this.authService.loginWithRedirect();
  }

  @Action(User.AllNavbarActions.LogoutFlowInitiated)
  logout() {
    this.authService.logout();
  }

  // ✨ New 👇
  private listenToUserChange(): void {
    this.authService.user$.subscribe((user) => {
      this.store.dispatch(
        new User.UserChangedFromAuth0SDK({ user: user || undefined })
      );
    });
  }

  @Selector()
  static user(state: UserStateModel) {
    return state.userDetails;
  }

  @Selector()
  static isLoggedIn(state: UserStateModel) {
    return !!state.userDetails;
  }

  @Selector()
  static userRoles(state: UserStateModel) {
    return (
      state.userDetails?.[`${environment.auth.audience}/roles`] || undefined
    );
  }

  @Selector()
  static isAdmin(state: UserStateModel) {
    return state.userDetails?.[`${environment.auth.audience}/roles`]?.includes(
      USER_ROLES.MENU_ADMIN
    );
  }
}
```

### Update app module

You will then need to add `UserState` to the `NgxsModule` initialization. Open `app.module.ts` and add the following code.

```typescript
// src/app/app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AuthHttpInterceptor, AuthModule } from "@auth0/auth0-angular";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { NavBarModule } from "./shared";
import { environment } from "src/environments/environment";
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
import { NgxsModule } from "@ngxs/store";
import { NgxsReduxDevtoolsPluginModule } from "@ngxs/devtools-plugin";

// ✨ Update this 👇
import { MenusState, UserState } from "./core";

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    AuthModule.forRoot({
      ...environment.auth,
      cacheLocation: "localstorage",
      httpInterceptor: {
        allowedList: [
          `${environment.serverUrl}/api/menu/items`,
          `${environment.serverUrl}/api/menu/items/*`,
        ],
      },
    }),
    AppRoutingModule,
    NavBarModule,
    // ✨ Update this 👇
    NgxsModule.forRoot([MenusState, UserState], { developmentMode: true }),
    NgxsReduxDevtoolsPluginModule.forRoot(),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthHttpInterceptor,
      multi: true,
    },
  ],
})
export class AppModule {}
```

> **Checkpoint:** There aren't any visible functional changes added in this section. The difference between the app's current state and the previous checkpoint is its underlying implementation. The app now uses NGXS versus a `BehaviorSubject` to manage user-related states. The app should display the login button with an empty dashboard when the user is not authenticated and display the logout button with the logged-in user's name along with the menu items on the dashboard when a user is authenticated. Clicking on the 'Log in' and 'Log out' buttons should trigger their respective flows using Auth0's SDK and update your application's state. If you open Redux Devtools in your browser, you should see the user state and actions every time you perform any user-related actions.

## Conclusion

State management is a key component when building applications. You added two Stores to our demo application to manage two distinct states - menus and users. This is a relatively small demo application with a few Stores, Actions, and Selectors to show how you can use NGXS to manage your Application's state and use NGXS with Auth0's SDK to handle user-related functionalities.

Add Authentication to Angular With NGXS For State Management

See how it's easy to manage your Angular application's state using Akita and learn how you can use Akita with Auth0's SDK to handle user-related functionalities.

**TL;DR:** In the first part of the state management in Angular with Akita series, we learned about the basics of Akita, how it works, and how to use it to manage our application's state. In part 2, I will show you how to use Auth0 with Akita to manage use-related states.

<hr/>

## User State Management

The user store will work similarly to how the menus state management works. I won't detail how each part of the state works and focus more on the Auth0 and Akita integration.

The starter app is using the Auth0 SDK directly and managing the roles through the `RolesService`, this section of the tutorial will walk you through migrating to using Auth0's SDK through Akita and managing the roles by using Queries.

## Create User Store

Let's start with defining the interface for the user state object and its initial state. Open `user.store.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.store.ts

import { Injectable } from "@angular/core";
import { Store, StoreConfig } from "@datorama/akita";
import { User as Auth0User } from "@auth0/auth0-spa-js";

export interface UserState {
  user: Auth0User | undefined;
}

export function createInitialState(): UserState {
  return {
    user: undefined,
  };
}
@StoreConfig({ name: "user" })
@Injectable({ providedIn: "root" })
export class UserStore extends Store<UserState> {
  constructor() {
    super(createInitialState());
  }
}
```

Create a barrel export for the `user` directory with the following code 👇

```typescript
// src/app/core/state/user/index.ts

export * from "./user.store";
```

## Create User Actions

We have three user-related Actions that we need for our user Store. Login, logout, and user changed Action to keep the user details in our Store in sync with Auth0's SDK.

Since we have several user Actions that will originate from the Navbar component, you can group them under `allNavbarAction` to ensure you aren't reusing these Actions in a different part of the application (following the Good Action Hygiene pattern).

Because the `userChangedFromAuth0SDK` Action originates from Auth0's SDK, let's name the source part of the Action type as `Auth0 SDK`.

Open `user.actions.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.actions.ts

import { createAction, props } from "@datorama/akita-ng-effects";
import { User as Auth0User } from "@auth0/auth0-spa-js";

export const allNavbarActions = {
  loginFlowInitiated: createAction("[Navbar] Login Flow Initiated"),
  logoutFlowInitiated: createAction("[Navbar] Logout Flow Initiated"),
};

export const userChangedFromAuth0SDK = createAction(
  "[Auth0 SDK] User Changed",
  props<{ user: Auth0User | undefined }>()
);
```

Add `user.actions` to the barrel export. Open `index.ts` and add the following code 👇

```typescript
// src/app/core/state/user/index.ts

export * from "./user.store";

// ✨ New 👇
export * from "./user.actions";
```

### Update application to use user actions

Open `nav-bar.component.ts` and add the following code 👇

```typescript
// src/app/shared/components/nav-bar/nav-bar.component.ts

import { Component } from "@angular/core";
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { faHome, faUser, faUtensils } from "@fortawesome/free-solid-svg-icons";
import { AuthService } from "@auth0/auth0-angular";

// ✨ New 👇
import { Actions } from "@datorama/akita-ng-effects";

// ✨ New 👇
import { allNavbarActions } from "src/app/core/state/user";

export interface INavBarMenuLinkProps {
  to: string;
  icon: IconDefinition;
  label: string;
}

@Component({
  selector: "app-nav-bar",
  templateUrl: "./nav-bar.component.html",
  styleUrls: ["./nav-bar.component.scss"],
})
export class NavBarComponent {
  faUser = faUser;
  isAuthenticated$ = this.authService.isAuthenticated$;
  user$ = this.authService.user$;

  navOptions: INavBarMenuLinkProps[] = [
    { to: "/home", label: "Home", icon: faHome },
    { to: "/menu", label: "Menu", icon: faUtensils },
  ];

  constructor(
    private authService: AuthService,
    // ✨ New 👇
    private actions: Actions
  ) {}

  loginWithRedirect(): void {
    // ✨ New 👇
    this.actions.dispatch(allNavbarActions.loginFlowInitiated());
  }

  logout(): void {
    // ✨ New 👇
    this.actions.dispatch(allNavbarActions.logoutFlowInitiated());
  }
}
```

## Create User Query

Before creating individual queries for slices of the user state, let's start by creating the boilerplate required to use this feature. Akita uses an `Injectable` class that extends Akita's `Query` class. Create `user.query.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.query.ts

import { Injectable } from "@angular/core";
import { Query } from "@datorama/akita";
import { UserState } from "./user.store";

@Injectable({ providedIn: "root" })
export class UserQuery extends Query<UserState> {
  selectUser$ = this.select("user");
}
```

Next, Let's add some utility Queries for `isLoggedIn`, `userRoles`, and `isAdmin` to let your components access these properties easily. Open `user.query.ts` and update it with the following code 👇

```typescript
// src/app/core/state/user/user.query.ts

import { Injectable } from "@angular/core";
import { Query } from "@datorama/akita";

// ✨ New 👇
import { map } from "rxjs/operators";

// ✨ New 👇
import { environment } from "src/environments/environment";

// ✨ New 👇
import { UserStore, UserState } from "./user.store";

// ✨ New 👇
export const USER_ROLES = {
  MENU_ADMIN: "menu-admin",
};
@Injectable({ providedIn: "root" })
export class UserQuery extends Query<UserState> {
  selectUser$ = this.select("user");

  // ✨ New 👇
  selectIsLoggedIn$ = this.selectUser$.pipe(map((user) => !!user));

  // ✨ New 👇
  selectUserRoles$ = this.selectUser$.pipe(
    map((user) => user?.[`${environment.auth.audience}/roles`] || undefined)
  );

  // ✨ New 👇
  selectIsAdmin$ = this.selectUserRoles$.pipe(
    map((userRoles) => userRoles?.includes(USER_ROLES.MENU_ADMIN))
  );

  constructor(protected store: UserStore) {
    super(store);
  }
}
```

Add `user.query` to the list of exports in `index.ts` 👇

```typescript
// src/app/core/state/user/index.ts

export * from "./user.store";
export * from "./user.actions";

// ✨ New 👇
export * from "./user.query";
```

### Update application to use user queries

The user role route guard was previously using the value of the roles from `RolesService`. Since you now have a user roles Query, you can replace the current implementation with a query created in the previous section. Open `user-role.guard.ts` and add the following code 👇

```typescript
// src/app/core/guards/user-role.guard.ts

import { Injectable } from "@angular/core";
import {
  CanActivate,
  Router,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
} from "@angular/router";
import { Observable, of } from "rxjs";
import { catchError, map } from "rxjs/operators";

// ✨ New 👇
import { UserQuery } from "../state/user";

@Injectable({ providedIn: "root" })
export class UserRoleGuard implements CanActivate {
  constructor(
    private router: Router,
    // ✨ New 👇
    private userQuery: UserQuery
  ) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    // ✨ Update this 👇
    return this.userQuery.selectUserRoles$.pipe(
      map((roles) => {
        if (roles && roles.includes(route?.data?.role)) {
          return true;
        }

        // redirect the user to home
        this.router.navigate(["/home"]);
        return false;
      }),
      catchError((err) => {
        // redirect the user to home
        this.router.navigate(["/home"]);
        return of(false);
      })
    );
  }
}
```

Another place we use user-related information is the Navbar. We display user information and conditionally display the login and logout button depending on the user's `isAuthenticated` state. Open `nav-bar.component.ts` and add the following code 👇

```typescript
// src/app/shared/components/nav-bar/nav-bar.component.ts

import { Component } from "@angular/core";
import { Actions } from "@datorama/akita-ng-effects";
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { faHome, faUser, faUtensils } from "@fortawesome/free-solid-svg-icons";

// ✨ New 👇
import { allNavbarActions, UserQuery } from "src/app/core/state/user";

export interface INavBarMenuLinkProps {
  to: string;
  icon: IconDefinition;
  label: string;
}

@Component({
  selector: "app-nav-bar",
  templateUrl: "./nav-bar.component.html",
  styleUrls: ["./nav-bar.component.scss"],
})
export class NavBarComponent {
  faUser = faUser;

  // ✨ New 👇
  isAuthenticated$ = this.userQuery.selectIsLoggedIn$;

  // ✨ New 👇
  user$ = this.userQuery.selectUser$;

  navOptions: INavBarMenuLinkProps[] = [
    { to: "/home", label: "Home", icon: faHome },
    { to: "/menu", label: "Menu", icon: faUtensils },
  ];

  // ✨ New 👇
  constructor(private userQuery: UserQuery, private actions: Actions) {}

  loginWithRedirect(): void {
    this.actions.dispatch(allNavbarActions.loginFlowInitiated());
  }

  logout(): void {
    this.actions.dispatch(allNavbarActions.logoutFlowInitiated());
  }
}
```

The profile page displays some information about the user, such as name and photo. Since this is stored as part of the user Store, let's also update this to use the `selectUser$` Query. Open `profile.component.ts` and add the following code 👇

```typescript
// src/app/features/profile/profile.component.ts

import { Component } from "@angular/core";

// ✨ New 👇
import { UserQuery } from "src/app/core/state/user";

@Component({
  selector: "app-profile",
  templateUrl: "./profile.component.html",
  styleUrls: ["./profile.component.scss"],
})
export class ProfileComponent {
  // ✨ New 👇
  user$ = this.userQuery.selectUser$;

  // ✨ New 👇
  constructor(private userQuery: UserQuery) {}
}
```

We display an `Add` button when the logged-in user is an admin user on the Menu Items page. You can read more about setting up admin users on Auth0 in this [blog post](https://auth0.com/blog/developing-a-secure-api-with-nestjs-adding-role-based-access-control/#Get-User-Roles). Open `menu-items.component.ts` and add the following code 👇

```typescript
// src/app/features/menu/menu-items/menu-items.component.ts

import { Component } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { MenusQuery } from "src/app/core/state/menus";

// ✨ New 👇
import { UserQuery } from "src/app/core/state/user";

@Component({
  selector: "app-menu-items",
  templateUrl: "./menu-items.component.html",
  styles: [
    `
      :host {
        width: 100%;
        height: 100%;
      }
    `,
  ],
})
export class MenuItemsComponent {
  menuItems$ = this.menuQuery.selectMenuItems$;

  // ✨ New 👇
  isAdmin$ = this.userQuery.selectIsAdmin$;

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    // ✨ New 👇
    private userQuery: UserQuery,
    private menuQuery: MenusQuery
  ) {}

  addMenuItem(): void {
    this.router.navigate(["add"], { relativeTo: this.activatedRoute });
  }
}
```

Lastly, we display a `Edit` and `Delete` buttons when the logged-in user is an admin user on the Menu Item page. Open `menu-item.component.ts` and add the following code 👇

```typescript
// src/app/features/menu/menu-item/menu-item.component.ts

import { Component } from "@angular/core";
import { Location } from "@angular/common";
import { ActivatedRoute, Router } from "@angular/router";
import { map, switchMap } from "rxjs/operators";
import { MenusQuery } from "src/app/core/state/menus";

// ✨ New 👇
import { UserQuery } from "src/app/core/state/user";

@Component({
  selector: "app-menu-item",
  templateUrl: "./menu-item.component.html",
  styleUrls: ["./menu-item.component.scss"],
})
export class MenuItemComponent {
  menuItemId$ = this.activatedRoute.params.pipe(map((params) => params.id));

  menuItem$ = this.menuItemId$.pipe(
    switchMap((id) => this.menusQuery.selectMenuItem(id))
  );

  // ✨ New 👇
  isAdmin$ = this.userQuery.selectIsAdmin$;

  constructor(
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private location: Location,
    // ✨ New 👇
    private userQuery: UserQuery,
    private menusQuery: MenusQuery
  ) {}

  back(): void {
    this.location.back();
  }

  navigateTo(url: string): void {
    this.router.navigateByUrl(`${this.router.url}/${url}`);
  }
}
```

## Create User Effects

As explained at the beginning of part 1 of the "State Management with Akita" series, Effects are where side effects of the Action are handled. For the user store, this will be where the app will interact with Auth0's SDK, updating the store when the user object changes and logging in and logging out the user. Let's start with creating an empty class with the `Injectable` decorator. Create `user.effects.ts` in the `core/state/user/` directory and add the following code 👇

```typescript
// src/app/core/state/user/user.effects.ts

import { Injectable } from "@angular/core";

@Injectable()
export class UserEffects {}
```

Next, let's add login and logout action handlers that trigger their respective flows in Auth0's SDK. Open `user.effects.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.effects.ts

import { Injectable } from "@angular/core";

// ✨ New 👇
import { map, tap } from "rxjs/operators";
import { AuthService } from "@auth0/auth0-angular";
import { Actions, createEffect, ofType } from "@datorama/akita-ng-effects";
import * as UserActions from "./user.actions";
import { UserStore } from "./user.store";

@Injectable()
export class UserEffects {
  // ✨ New 👇
  constructor(
    private actions$: Actions,
    private userStore: UserStore,
    private authService: AuthService
  ) {}

  // ✨ New 👇
  login$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.allNavbarActions.loginFlowInitiated),
        tap(() => this.authService.loginWithRedirect())
      ),
    { dispatch: false }
  );

  // ✨ New 👇
  logout$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.allNavbarActions.logoutFlowInitiated),
        tap(() => this.authService.logout())
      ),
    { dispatch: false }
  );
}
```

To keep the user observable from the Auth0's SDK and our user Store in sync, you can use an actionless effect that listens to an external observable (in our case `authService.user$`) and dispatches another action (`UserActions.userChangedFromAuth0SDK`) whenever that observable emits a new value. `UserActions.userChangedFromAuth0SDK` will then update the user store with new user data from Auth0. Open `user.effects.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.effects.ts

import { Injectable } from "@angular/core";
import { map, tap } from "rxjs/operators";
import { Actions, createEffect, ofType } from "@datorama/akita-ng-effects";
import * as UserActions from "./user.actions";
import { UserStore } from "./user.store";
import { AuthService } from "@auth0/auth0-angular";

@Injectable()
export class UserEffects {
  constructor(
    private actions$: Actions,
    private userStore: UserStore,
    private authService: AuthService
  ) {}

  // ✨ New 👇
  userChanged$ = createEffect(
    () =>
      this.authService.user$.pipe(
        map((user) =>
          UserActions.userChangedFromAuth0SDK({ user: user || undefined })
        )
      ),
    { dispatch: true }
  );

  // ✨ New 👇
  userChangedFromAuth0SDK$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.userChangedFromAuth0SDK),
        tap((action) => {
          this.userStore.update((state) => ({
            ...state,
            user: action.user,
          }));
        })
      ),
    { dispatch: false }
  );

  login$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.allNavbarActions.loginFlowInitiated),
        tap(() => this.authService.loginWithRedirect())
      ),
    { dispatch: false }
  );

  logout$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.allNavbarActions.logoutFlowInitiated),
        tap(() => this.authService.logout())
      ),
    { dispatch: false }
  );
}
```

Add `user.effects` to the barrel export. Open `index.ts` and add the following code 👇

```typescript
// src/app/core/state/user/index.ts

export * from "./user.store";
export * from "./user.actions";
export * from "./user.query";

// ✨ New 👇
export * from "./user.effects";
```

### Update Effects Module

You will then need to add `UserEffects` to the `EffectsModule` initialization. Open `app.module.ts` and add the following code

```typescript
// src/app/app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
import { AkitaNgEffectsModule } from "@datorama/akita-ng-effects";
import { AkitaNgDevtools } from "@datorama/akita-ngdevtools";
import { AuthHttpInterceptor, AuthModule } from "@auth0/auth0-angular";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { NavBarModule } from "./shared";
import { environment } from "src/environments/environment";
import { MenusEffects } from "./core/state/menus";

// ✨ New 👇
import { UserEffects } from "./core/state/user";

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    AuthModule.forRoot({
      ...environment.auth,
      httpInterceptor: {
        allowedList: [
          `${environment.serverUrl}/api/menu/items`,
          `${environment.serverUrl}/api/menu/items/*`,
        ],
      },
    }),
    AppRoutingModule,
    NavBarModule,

    // ✨ Update this 👇
    AkitaNgEffectsModule.forRoot([MenusEffects, UserEffects]),
    environment.production
      ? []
      : AkitaNgDevtools.forRoot({
          maxAge: 25,
        }),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthHttpInterceptor,
      multi: true,
    },
  ],
})
export class AppModule {}
```

> **Checkpoint:** There aren't any visible functional changes added in this section. The difference between the app's current state and the previous checkpoint is its underlying implementation. The app now uses Akita versus a `BehaviorSubject` to manage user-related states. The app should display the login button with an empty dashboard when the user is not authenticated, and display the logout button with the logged-in user's name along with the menu items on the dashboard when a user is authenticated. Clicking on the "Log in" and "Log out" buttons should trigger their respective flows using Auth0's SDK and update your application's state. If you open Redux Devtools in your browser, you should see the user state and actions every time you perform any user-related actions.

## Conclusion

State management is a key component when building applications. You added two Stores to our demo application to manage two distinct states - menus and user. This is a relatively small demo application with a few Stores, Actions, Queries, and Effects to show how you can use Akita to manage your Application's state, and use Akita with Auth0's SDK to handle user-related functionalities.

State Management in Angular Using Akita - Pt. 2

State Management in Angular Using Akita - Pt. 1

manfred

Under the leadership of Manfred Steyer, ANGULARarchitects.io supports companies with the implementation of web-based business applications with Angular. <br>
 
At the Angular seminars he designs, he combined his profound knowledge of Angular, for which he was recognized by Google as a Google Development Expert (GDE), with his experience, which he worked as a team leader in the field of software development, as a Professor at a university of applied sciences and as an external member of the Angular team. <br>
 
Manfred has published books at O'Reilly, Microsoft Press, and Hanser and writes for Heise Online, windows.developer, and the Java magazine. He also regularly shares his knowledge at conferences.

Trainer and Consultant with focus on Angular

Manfred Steyer

Module Federation allows loading Micro Frontends at runtime. Common dependencies like Angular or the Auth0 library can be shared and hence don't need to be loaded several times. This is also the key for sharing data like the current user or global filters.

**TL;DR:** Module Federation allows loading Micro Frontends at runtime. Common dependencies like Angular or the Auth0 library can be shared and hence don't need to be loaded several times. This is also the key for sharing data like the current user or global filters.

## Micro Frontends

Recently, there have been a lot of discussions about Micro Frontends. The underlying idea is quite tempting: Splitting a huge software system into smaller parts and assigning each part to an individual team:

![Each micro frontend can be developed by an autarkic team](https://images.ctfassets.net/23aumh6u8s0i/38DpehwkPwiMTNBOvOQowG/ce345e71277e19f211f23add38a0ae4e/microfrontends.png)

As these teams are -- more or less -- autonomous, they can work in a more flexible way and don't need to coordinate that much with others. This shows that Micro Frontends are mostly about scaling teams. Hence, if you don't have several frontend teams, Micro Frontends might be overkill. 

## Module Federation

Splitting software systems into several parts is, however, only one side of the coin. Even though we developers might like this idea, the users don't! They aren't interested in starting several frontends but expect an integrated solution. 

Accordingly, we need to find a way to make all our micro frontends appear as one (single page) application. Very often, this involves loading micro frontends into a shell application.

For instance, the example used here mimics a simple shopping system. One of its micro frontends deals with shipping:

![Example micro frontend dealing with shipping products](https://images.ctfassets.net/23aumh6u8s0i/3Zs0it0naO2U4W1GwBMpNn/caa76eb2a246ab2dfa5d5394c6ed89c5/example-shipping.png)

For the purpose of integration, this micro frontend needs to be loaded into a shell:

![Example of a shell loading the shipping micro frontend](https://images.ctfassets.net/23aumh6u8s0i/iJOA5Lg4AHYGHBt0SK06U/8bdb25c11b8ac571f259f57217ff72eb/example-shipping-in-shell.png)

The shell loads this but also other micro frontends on demand.

For such an implementation, you needed a lot of tricks in the past. Fortunately, Module Federation makes this task straightforward. 

Module Federation is an integrated part of webpack 5, and hence, it works with all modern web frameworks. Also, as webpack is highly used in nearly all communities, Module Federation immediately becomes a widespread solution.

In order to allow loading separately compiled and deployed micro frontends, Module Federation defines two roles: the host and the remote:

![Schematic representation of Module Federation](https://images.ctfassets.net/23aumh6u8s0i/6RTBbIScEwfnZm97MMe7nJ/2138d86c99a988b286f9852d020097a4/module-federation.png)

In our case, the host is the shell, while the remote is the micro frontend. Both can be configured with their webpack configurations. 

The host defines virtual URLs pointing to remotes. In the previous picture, for instance, the URL ``mfe1`` pointing to a micro frontend, also called ``mfe1``, is defined.

The remote, in turn, exposes files -- or, to be more precise: EcmaScript modules -- for the host. To prevent that, the latter one needs to know the remote's file structure; exposed files can get a shorter alias. The example in the last picture goes with the alias ``Cmp``. 

Exposed EcmaScript modules can easily be loaded into the host by using a dynamic ``import`` together with the mapped URLs and defined aliases. The best: From Angular's perspective, this is just like lazy loading. 

As Angular doesn't even recognize that the application loads a micro frontend, we can use it exactly as it was intended to be used. We don't need any tricks or meta frameworks orchestrating different SPAs in our browser window. This eases our endeavor dramatically.

## Module Federation in Angular

Since version 12, the Angular CLI uses webpack 5. Hence, we also get Module Federation out of the box. To activate it, we need a custom builder that, e. g. ships with the community solution ``@angular-architects/module-federation``. As it comes with respective schematics, you can easily ``ng add`` it to your CLI workspace:

```bash
ng add @angular-architects/module-federation
```

![Adding @angular-architects/module-federation to your project](https://images.ctfassets.net/23aumh6u8s0i/3eoqQDVCE5OK0QfzoYmXt8/378fda04d26bd28ffc798754f3150819/ng-add.png)

The well-known CLI extension [Nx](https://nx.dev/) is supported too. The schematic asks about the name of the project in your workspace you want to enable module federation for. Also, it asks which port to assign for ``ng serve``.

After that, it generates several files, e. g. a partial webpack configuration we need to adjust for our needs. Also, it registers the custom builder in our ``angular.json``.

For the example used here, I ran this command twice: Once for the shell and once for the above-shown shipping micro frontend. The latter one is just called ``mfe1`` here.

## Configuring the Micro Frontends

Now, we need to adjust the webpack configurations generated for the shell and the micro frontend. As the Angular CLI is generating most parts of the webpack configuration, we just need to define the remaining details for the module federation. First and foremost, this is about configuring the ``ModuleFederationPlugin`` that ships with webpack.

Let's start with the configuration for the micro frontend:

```javascript
// projects/mfe1/webpack.config.js

[...]
plugins: [

  new ModuleFederationPlugin({
    
      // For remotes (please adjust)
      name: "mfe1",
      filename: "remoteEntry.js",
      exposes: {
          './AddressModule': './projects/mfe1/src/app/address/address.module.ts',
      },        
      
      shared: share({
        "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
        "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
        "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
        "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        "@angular/material": { singleton: true, strictVersion: true, requiredVersion: 'auto', includeSecondaries: true },

        ...sharedMappings.getDescriptors()
      })
          
  }),
],
[...]
```

The property ``name`` is normally the project name and should be unique across all micro frontends. The ``filename`` points to a file webpack generates when building the project. It's often referred to as the remote entry point. This JavaScript file provides all the metadata the shell needs to know for loading the micro frontend.

While normally you can go with the generated values for ``name`` and ``filename``, you very likely need to adjust the ``exposes`` section. As discussed above, it contains the aliases for the files to expose.

With ``shared``, you define all the npm packages you want to share across the shell and the micro frontends. These packages are only loaded once at runtime. This is vital because having ten micro frontends doesn't mean you want to load Angular or other packages ten times!

Of course, when sharing packages at runtime, we might end up with version conflicts. Fortunately, Module Federation also got us covered here: It provides several strategies for dealing with version mismatches. 

In our case, the combination of ``singleton: true`` and ``strictVersion: true`` is used. Hence, only one version of the shared packages is allowed, and if Module Federation detects several versions at runtime, it throws an Error. While this seems to be quite harsh at first sight, it allows our integration tests to immediately find out about version mismatches.

More details on [strategies for preventing version mismatches](https://www.angulararchitects.io/en/aktuelles/getting-out-of-version-mismatch-hell-with-module-federation/) can be found [here](https://www.angulararchitects.io/en/aktuelles/getting-out-of-version-mismatch-hell-with-module-federation/).

Besides ``singleton`` and ``strictVersions``, there are two further properties used: ``requiredVersion`` and ``includeSecondaries``. If we set the first one to ``auto``, ``@angular-architects/module-federation`` assumes the version found in your project's ``package.json``. This avoids several [pitfalls](https://www.angulararchitects.io/aktuelles/pitfalls-with-module-federation-and-angular/). 

The option ``includeSecondaries`` is provided by ``@angular-architects/module-federation`` too. It automatically adds all secondary entry points to the list of shared libraries. In the case of libraries like Angular Material, this saves you a lot of typing as they provide one such entry point per component, e. g. ``@angular/material/input`` or ``@angular/material/button``.

Now, let's have a look at the exposed ``AddressModule``: 

```typescript
// projects/mfe1/src/app/address/address.module.ts

[...]

@NgModule({
  imports: [
    [...]
    RouterModule.forChild([{
      path: 'address', 
      component: AddressComponent
    }])  
  ],
  declarations: [
    AddressComponent
  ],
})
export class AddressModule { }
```

As you see, it's just an ordinary Angular module. However, as it has child routes, we can immediately route to them after loading the whole module into the shell. 

## Configuring the Shell

The shell's ``webpack.config.js`` is a bit simpler. Here, we only need to define the shared libraries:

```javascript
// projects/shell/webpack.config.js

[...]
plugins: [
  new ModuleFederationPlugin({

      shared: share({
        "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
        "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
        "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
        "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        "@angular/material": { singleton: true, strictVersion: true, requiredVersion: 'auto', includeSecondaries: true }

        ...sharedMappings.getDescriptors()
      })
      
  }),
],
[...]
```

In addition, we also could map URLs here, as outlined above. This would look like this:

```typescript
// Alternative that maps URLs upfront
new ModuleFederationPlugin({
  remotes: {
    "mfe1": "mfe1@http://localhost:3000/remoteEntry.js"
  },
  [...]
})
```

The key is the mapped URL, and the value defines the name of the micro frontend as defined in its ``webpack.config.js``. Here, the value also contains the location of the micro frontend's remote entry point. To load ``mfe1``'s exposed Module, we could use a dynamic ``import``:

```typescript
// Using mapped URL:
import('mfe1/AddressModule')
```

As the TypeScript compiler doesn't know the file ``mfe1/Module``, we also needed a type definition. For this, we could create an arbitrary with the ending ``.d.ts``:

```typescript
declare module "mfe1/AddressModule";
```

However, while mapping URLs this way is simple, it also requires us to know about the micro frontends and their locations upfront. Hence, I'm using a more dynamic approach that does not demand us to define URLs for compile time. 

Instead, we can tell Module Federation about possible Micro Frontends at runtime. To make use of it, I use the helper function ``loadRemoteModule`` provided by ``@angular-architects/module-federation`` together with lazy routes:

```typescript
// projects/shell/src/app/app.module.ts

[...]
RouterModule.forRoot([
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'mfe1',
    loadChildren: () => loadRemoteModule({
      remoteEntry: 'http://localhost:3000/remoteEntry.js',
      remoteName: 'mfe1',
      exposedModule: './AddressModule',
    }).then(m => m.AddressModule)
  }
])
[...]
```

The ``loadRemoteModule`` function takes the location of the remote entry point, the remote's name, and the alias of the exposed EcmaScript module. All these values are defined in the micro frontend's webpack configuration. 

As these properties are just strings, we could even retrieve their values from a configuration file or from a service endpoint.

## Trying It Out

After starting both projects, e. g. with ``ng serve shell, `` and ``ng serve mfe1``, we can use the lazy route shown above to load the micro frontend into the shell. It's also interesting to inspect the loaded files in your browser's dev tools:

![The browser loads the shared libraries](https://images.ctfassets.net/23aumh6u8s0i/5YzAFolOzvMYTspPsgZ5Wb/73d1fb9772e1128fca2eca404a1aa0ce/share.png)

At first sight, it really looks like lazy loading. However, when looking more closely, we see that the lazy chunks come from the micro frontend's origin. Also, for all the shared libraries, a bundle of its own is loaded. This is necessary because the module federation decides at runtime when to load which shared package. 

## Authentication for Micro Frontends

Sometimes we need to share some information between micro frontends and the shell, e. g. context information like the current user or global filters like the selected customer. The example used here allows logging in the user via the shell:

![Logging in the current user](https://images.ctfassets.net/23aumh6u8s0i/2XumqnUE2Cp56cB0nWJt2w/37480acbfca69c8036e36d38b94fbcd2/logged-in.png)

However, when loading the micro frontend on demand, it also knows about the current user:

![Sharing information about the logged in user](https://images.ctfassets.net/23aumh6u8s0i/2BdJ84YhuAxliC349B9A2Q/6294f33fd3d8b940789da984d41efe8c/logged-in-shipping.png)

To achieve this, we just need to share a package that holds the information to share. In our case, this is ``@auth0/auth0-angular`` as we are using Auth0 as our identity provider. It's available via npm:

```bash
npm i @auth0/auth0-angular
```

To make this work, I've configured a web application at https://manage.auth0.com/. If you want to try this out, don't forget to register your SPA's URL, e. g. http://localhost:4200, under _Allowed Callback URLs_. Besides this, I went with the default values proposed by the web portal.

To get started, we need to import the ``AuthModule`` provided by ``@auth0/auth0-angular`` into the ``shell``'s but also into ``mfe1``'s ``AppModule``:

```typescript
// projects/shell/src/app/app.module.ts
//  and
// projects/mfe1/src/app/app.module.ts

[...]

import { AuthModule } from '@auth0/auth0-angular';

[...]

@NgModule({
  imports: [
    AuthModule.forRoot({
      domain: 'dev-ha-6vf7s.us.auth0.com',
      clientId: 'pQXuZGn3bfOfHpFd9ch7Wfa4xP4KhKlS'
    }),
    [...]
  ],
  [...]
})
export class AppModule { }
```

The values for ``domain`` and ``clientId`` can be found at https://manage.auth0.com after registering your application.

After that, we can use the ``AuthService`` in the shell to login the current user:

```typescript
// projects/shell/src/app/home/home.component.ts

import { Component } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {

  user$ = this.auth.user$;

  constructor(private auth: AuthService) {}

  login(): void {
    this.auth.loginWithRedirect();
  }

}
```

I also decided to display the user's name after they logged in:  

```html


<h1>Welcome!</h1>

<p *ngIf="user$ | async as user">
    User: {{user.name}}
</p>

<div>
    <button (click)="login()" mat-flat-button color="primary">Login</button>
</div>
```

In the micro frontend's ``AddressComponent``, I'm also using the ``AuthService`` to get some information about the current user:

```typescript
// projects/mfe1/src/app/address/address.component.ts

[...]

import { AuthService } from '@auth0/auth0-angular';

@Component({
  selector: 'app-address',
  templateUrl: './address.component.html',
  styleUrls: ['./address.component.scss']
})
export class AddressComponent {

  [...]

  constructor(
    private auth: AuthService,
    private fb: FormBuilder) {

    this.auth.user$.pipe(take(1)).subscribe(user => {
      if (!user) return;
      this.addressForm.controls['firstName'].setValue(user.given_name);
      this.addressForm.controls['lastName'].setValue(user.family_name);

    });

  }

  [...]
}
```

In order to make this work, we need to share the ``@auth0/auth0-angular`` package:

```javascript
// projects/shell/webpack.config.js
//  AND
// projects/mfe1/webpack.config.js

[...]
shared: share({
  [...]
  
  // Add this:
  "@auth0/auth0-angular": { singleton: true, strictVersion: true, requiredVersion: 'auto' },

  ...sharedMappings.getDescriptors()
})
[...]
```

This ensures there is only one ``AuthService`` at runtime we can use to share information about the current user. 

After changing the webpack configuration, we need to restart our applications. If everything works well, we can log in the user via the shell and read the user's name in the lazy loaded micro frontend.

## Summary

Module Federation allows loading separately compiled applications at runtime. Also, we can share common dependencies. This also allows sharing common data like information on the current user or global filters.

As Module Federation allows runtime integration, it is also the key for plugin systems and micro frontend architectures. However, this approach turns to compile-time dependencies into runtime dependencies; we need a sound set of integration tests to detect issues. 

In general, Micro Frontends only makes sense if you want to scale a project by splitting it into several smaller applications developed by different autarkic teams. If you only have one frontend team, Micro Frontend architectures are very likely an overhead.

Micro Frontends with Angular, Module Federation, and Auth0

This tutorial shows you how to add authentication to your Angular App with Auth0

AngularJS 1.0 was released in October 2010. At the time, it was considered one of the most revolutionary and popular web frameworks ever to see the light of day. Developers loved it, and created many apps with it. However, as a pioneer in the JS framework space, AngularJS had some growing pains and significant issues. The team went back to the drawing board for a major breaking release with Angular 2. It took two years to develop and influenced many devs to hop onto other frameworks in the meantime.

Today, five years after Angular 2 was released, we just call it “Angular” and its version numbers have far less meaning. Five years is a long time for a modern JS web framework to live and thrive. If you look at the number of Stack Overflow questions, you’ll see that users struggle with React far more than Angular.

![hotframeworks.com](https://images.ctfassets.net/23aumh6u8s0i/59q6jcF1y3liZ2s5dHjFZ1/ff4258bdeac2cad19506a693b21c7e46/Uploaded_from_Add_OpenID_Connect_to_Angular_Apps_Quickly)

I kid, I kid. 😅

I don’t think Stack Overflow tags indicate that developers have a hard time with the framework; I think they indicate a thriving community. The more people use technology, the more they submit questions for it.

[hotframeworks.com](https://hotframeworks.com/) lists a score that combines GitHub stars with Stack Overflow tags and says the top six web frameworks are as follows (at the time of this writing):

1. React
2. ASP.NET MVC
3. Angular
4. Ruby on Rails
5. AngularJS
6. Vue.js

Angular is still very popular among developers. If you’re developing an Angular app today, you probably need a way to authenticate your users. That’s where OpenID Connect (OIDC) can help you. OIDC is a layer on top of OAuth 2.0 that provides identity.

In this tutorial, I'll show you how to add OIDC authentication with Auth0 to a new Angular app in just a few steps.

### Prerequisites:

* A favorite text editor or IDE. I recommend [IntelliJ IDEA](https://www.jetbrains.com/idea/), but I know many JavaScript developers prefer [Visual Studio Code](https://code.visualstudio.com/).
* [Node.js](http://nodejs.org/) v14+ and npm installed.

If you would rather follow along by watching a video, check out the screencast below from [the OktaDev YouTube channel](https://youtu.be/YiR7XFgsD8w).

<AmpContent>
<amp-youtube
    data-videoid="YiR7XFgsD8w"
    layout="responsive"
    width="480" height="270">
</amp-youtube>
</AmpContent>

<NonAmpContent>
<div class='embed-container' style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;margin-bottom:40px;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src='https://www.youtube.com/embed/YiR7XFgsD8w' frameborder='0' allowfullscreen></iframe></div>
</NonAmpContent>

## Create an Angular App

First, you’ll need to create a new Angular app with routing enabled. Install the Angular CLI globally, then create an app.

```shell
npm i -g @angular/cli@13
ng new auth0-demo --routing
```

You’ll be prompted to select your favorite stylesheet format. The selection you make doesn’t matter for this example since we’re focused on functionality rather than updating visuals.

## Add Authentication with OpenID Connect

To add authentication with Auth0, you’ll first need a [free Auth0 account](https://a0.to/blog_signup). Install the [Auth0 CLI](https://github.com/auth0/auth0-cli#installation) and run `auth0 login` to register your account. Then, run `auth0 apps create`. Use the name `auth0-demo` and specify a description of your choosing. Select Single Page Web Application and use `http://localhost:4200/home` for the Callback URL. Specify `http://localhost:4200` for the rest of the URLs. We’re using 4200 as the port here because that’s the default for local Angular development.

![Auth0 Apps Create](https://images.ctfassets.net/23aumh6u8s0i/6treCQmKthgFUfWwzf3AfL/79c7378cb41c2b7fcdc603f7787b493e/Uploaded_from_Add_OpenID_Connect_to_Angular_Apps_Quickly)

You can also use the Auth0 Console to create an OIDC app:

* [Log in](https://auth0.com/auth/login) to Auth0 or [create an account](https://a0.to/blog_signup) if you don’t have one. Go to **Applications** > **Create Application**.
* Choose **Single Page Web Applications** as the application type and click **Create**.
* Click **Angular**, then the **Settings** tab.
* Add `http://localhost:4200/home` as an Allowed Callback URL and `http://localhost:4200` as a Logout URL.
* Specify `http://localhost:4200` as an Allowed Origin and click **Save Changes** at the bottom.

Once you have a new Angular app and Auth0 OIDC set up, you can use [OktaDev Schematics](https://github.com/oktadev/schematics#angular--auth0) to add OAuth 2.0 and OIDC support to your Angular app. Be sure to execute this command in the folder for the app itself (`auth0-demo`) adjacent to `package.json`.

```shell
ng add @oktadev/schematics --auth0
```

The Auth0 CLI will prompt you for an issuer URL and client ID, which were displayed when setting up the app in Auth0. If you used the CLI, it would have shown the issuer URL right above the client ID.

```shell
=== dev-0ua1y-go.us.auth0.com application created

  CLIENT ID            TJgZxGnlSkqUe6JfMFSipZcFsbpl6LS2
```

This process will perform the following steps for you:

1. Install the [Auth0 Angular SDK](https://github.com/auth0/auth0-angular).
2. Add `src/app/auth-routing.module.ts` with your OIDC configuration and initialization logic.
3. Configure an `AuthHttpInterceptor` that adds an `Authorization` header with an access token to outbound requests.
4. Create a `HomeComponent` and configure it with authentication logic.
5. Update unit tests for `AppComponent` and `HomeComponent` to mock Auth0.

To see all the changes it makes to your files, see [this pull request on GitHub](https://github.com/oktadev/auth0-angular-example/pull/1/files). If you’re interested in learning more about Schematics, I recommend reading my [Use Angular Schematics to Simplify Your Life](https://developer.okta.com/blog/2019/02/13/angular-schematics) tutorial.

### Test your Angular authentication flow

Run `ng serve` in your app, and you should see a login button at `http://localhost:4200/home`.

![Auth0 Login button](https://images.ctfassets.net/23aumh6u8s0i/50ajbMEhMjKTlo8FFIrhcc/34ab5bd3e71ef2098232c1fa17094f7a/Uploaded_from_Add_OpenID_Connect_to_Angular_Apps_Quickly)

Click the **Login** button and sign in with one of the configured users for your Auth0 application. Because this is just a demo, you probably haven’t done that - more likely, you should sign up as a new user.

![Auth0 Login form](https://images.ctfassets.net/23aumh6u8s0i/4k6lvyaFm08105rMKbngMK/04946fb269344caaa466e995895816ee/Uploaded_from_Add_OpenID_Connect_to_Angular_Apps_Quickly)

After login, you’ll be redirected back to your app, and you’ll see a **Logout** button displayed in the bottom left corner.

![Auth0 Logout button](https://images.ctfassets.net/23aumh6u8s0i/4wmWthcAoznrbP7iP9qQ6T/38b2188e91decdbdd2a3046a57410369/Uploaded_from_Add_OpenID_Connect_to_Angular_Apps_Quickly)

### Display the authenticated user’s name

To display the authenticated user’s name, you can use the `user$` observable on the `AuthService` instance.

Modify `src/app/home/home.component.html` to display a welcome message to the user.

```html
<div>
  <button *ngIf="(auth.isAuthenticated$ | async) === false" (click)="login()" id="login">Login</button>
  <div *ngIf="auth.user$ | async as user">
    <h2>Welcome, {{user?.name}}!</h2>
  </div>
  <button *ngIf="auth.isAuthenticated$ | async" (click)="logout()" id="logout">Logout</button>
</div>
```

Refresh your app, and you should see your name displayed.

![Display user's name](https://images.ctfassets.net/23aumh6u8s0i/40JjOQXUidYCgMIWgDYSdT/b012e9c1c44d0397f89145dc00521053/Uploaded_from_Add_OpenID_Connect_to_Angular_Apps_Quickly)

If everything works—congrats!

## Learn more about Angular and OpenID Connect

I hope you enjoyed this quick tutorial on using Auth0 and OIDC for authentication in your Angular apps. If you’re looking for a more detailed step-by-step tutorial, please read [The Complete Guide to Angular User Authentication with Auth0](https://auth0.com/blog/complete-guide-to-angular-user-authentication/).

You can find the source code for the example on GitHub in the [@oktadev/auth0-angular-example](https://github.com/oktadev/auth0-angular-example) repository.

To learn more about Angular and OIDC, check out the following blog posts:

* [What You Need to Know about Angular v13](https://developer.okta.com/blog/2021/11/10/angular-v13)
* [The Things to Keep in Mind about Auth](https://developer.okta.com/blog/2021/10/29/things-to-keep-in-mind-about-auth)
* [A Quick Guide to Angular and GraphQL](https://developer.okta.com/blog/2021/10/22/angular-graphql)

<br>
<img src="https://images.ctfassets.net/23aumh6u8s0i/2FKsfPuzkEluf4MALzOoLT/969e1b0d6b58723b2bf263a8799c5cd6/Uploaded_from_Add_OpenID_Connect_to_Angular_Apps_Quickly" alt="The Angular Mini-Book" width="392" height="512">
<p align="center"><i><a href="https://www.infoq.com/minibooks/angular-mini-book/">The Angular Mini-Book</a></i></p>
<p align="left"></p>

I [just published a mini-book book on Angular](https://raibledesigns.com/rd/entry/the_angular_mini_book_1) that might interest you too. It's called [The Angular Mini-Book](https://www.infoq.com/minibooks/angular-mini-book/) and is available as a free download from InfoQ. The book is written tutorial-style and shows you how to develop a bare-bones application, test it, and deploy it. Then you'll move on to adding Bootstrap, Angular Material, continuous integration, and authentication. You'll also learn how to integrate Angular with Spring Boot (a popular REST API framework) and use security best practices like HTTPS and a content security policy.

If you liked this tutorial, chances are you'll like others we publish. Please follow [Auth0](https://twitter.com/auth0) and [OktaDev](https://twitter.com/oktadev) on Twitter to get notified when we publish new developer tutorials.

Add OpenID Connect to Angular Apps Quickly

See how it's easy to manage your Angular application's state using NgRx and learn how you can use NgRx with Auth0's SDK to handle user-related functionalities.

State Management in Angular Using NgRx: Pt. 1

## User State Management

The user store will work similarly to how the menus state management works. I won't detail how each part of the state works and focus more on the Auth0 and NgRx integration.

The starter app is using the Auth0 SDK directly and managing the roles through the `RolesService`, this section of the tutorial will walk you through migrating to using Auth0's SDK through NgRx and managing the roles by using selectors.

### Create User State

Let's start with defining the interface for the user state object and its initial state. Open `user.state.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.state.ts

import { User as Auth0User } from "@auth0/auth0-spa-js";

export interface UserState {
  userDetails: Auth0User;
}

export const initialState: UserState = {
  userDetails: undefined,
};
```

Create a barrel export for the `user` directory with the following code 👇

```typescript
// src/app/core/state/user/index.ts

export * from "./user.state";
```

#### Update Core State

To access `UserState` from your Store, you will need to add it to your `CoreState`'s state object. Open `core.state.ts` and add the following code 👇

```typescript
// src/app/core/state/core.state.ts

import { MenusState } from "./menus";
// ✨ New 👇
import { UserState } from "./user";

export interface State {
  menus: MenusState;
  // ✨ New 👇
  user: UserState;
}
```

### Create User Actions

We have three user-related Actions that we need for our user Store. Login, logout, and user changed Action to keep the user details in our Store in sync with Auth0's SDK.

Since we have several user Actions that will originate from the Navbar component, you can group them under `allNavbarAction` to ensure you aren't reusing these Actions in a different part of the application (following the Good Action Hygiene pattern).

Because the `userChangedFromAuth0SDK` Action originates from Auth0's SDK, let's name the source part of the Action type as `Auth0 SDK`.

Open `user.actions.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.actions.ts

import { createAction, props } from "@ngrx/store";
import { User as Auth0User } from "@auth0/auth0-spa-js";

export const allNavbarActions = {
  loginFlowInitiated: createAction("[Navbar] Login Flow Initiated"),
  logoutFlowInitiated: createAction("[Navbar] Logout Flow Initiated"),
};

export const userChangedFromAuth0SDK = createAction(
  "[Auth0 SDK] User Changed",
  props<{ userDetails: Auth0User }>()
);
```

Add `user.actions` to the barrel export. Open `index.ts` and add the following code 👇

```typescript
// src/app/core/state/user/index.ts

export * from "./user.state";

// ✨ New 👇
export * from "./user.actions";
```

#### Update Application to Use User Actions

Open `nav-bar.component.ts` and add the following code 👇

```typescript
// src/app/shared/components/nav-bar/nav-bar.component.ts

import { Component } from "@angular/core";
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { faHome, faUser, faUtensils } from "@fortawesome/free-solid-svg-icons";
import { AuthService } from "@auth0/auth0-angular";

// ✨ New 👇
import { Store } from "@ngrx/store";
import { allNavbarActions } from "src/app/core/state/user";

export interface INavBarMenuLinkProps {
  to: string;
  icon: IconDefinition;
  label: string;
}

@Component({
  selector: "app-nav-bar",
  templateUrl: "./nav-bar.component.html",
  styleUrls: ["./nav-bar.component.scss"],
})
export class NavBarComponent {
  faUser = faUser;
  isAuthenticated$ = this.authService.isAuthenticated$;
  user$ = this.authService.user$;

  navOptions: INavBarMenuLinkProps[] = [
    { to: "/home", label: "Home", icon: faHome },
    { to: "/menu", label: "Menu", icon: faUtensils },
  ];

  constructor(
    private authService: AuthService,
    // ✨ New 👇
    private store: Store
  ) {}

  loginWithRedirect(): void {
    // ✨ New 👇
    this.store.dispatch(allNavbarActions.loginFlowInitiated());
  }

  logout(): void {
    // ✨ New 👇
    this.store.dispatch(allNavbarActions.logoutFlowInitiated());
  }
}
```

### Create User Selectors

Create two selectors, a feature selector and a selector that returns the `userDetails`. Open `user.selector.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.selector.ts

import { createFeatureSelector, createSelector } from "@ngrx/store";
import { UserState } from "./user.state";

export const selectUser = createFeatureSelector<UserState>("user");

export const selectUserDetails = createSelector(
  selectUser,
  (state: UserState) => state.userDetails
);
```

Let's also add some utility Selectors for `isLoggedIn`, `userRoles`, and `isAdmin` to easily let your components access these properties. Open `user.selector.ts` and update it with the following code 👇

```typescript
// src/app/core/state/user/user.selector.ts

import { createFeatureSelector, createSelector } from "@ngrx/store";

// ✨ New 👇
import { environment } from "src/environments/environment";
import { UserState } from "./user.state";

// ✨ New 👇
export const USER_ROLES = {
  MENU_ADMIN: "menu-admin",
};

export const selectUser = createFeatureSelector<UserState>("user");

export const selectUserDetails = createSelector(
  selectUser,
  (state: UserState) => state.userDetails
);

// ✨ New 👇
export const selectIsLoggedIn = createSelector(
  selectUserDetails,
  (userDetails) => !!userDetails
);

// ✨ New 👇
export const selectUserRoles = createSelector(
  selectUserDetails,
  (userDetails) => userDetails[`${environment.auth.audience}/roles`]
);

// ✨ New 👇
export const selectIsAdmin = createSelector(selectUserRoles, (userRoles) =>
  userRoles?.includes(USER_ROLES.MENU_ADMIN)
);
```

Add `user.selector` to the list of exports in `index.ts` 👇

```typescript
// src/app/core/state/user/index.ts

export * from "./user.state";
export * from "./user.actions";

// ✨ New 👇
export * from "./user.selector";
```

#### Update Application to Use User Selectors

The user role route guard was previously using the value of the roles from `RolesService`. Since you now have a user roles Selector, you can replace the current implementation with an NgRx Selector. Open `user-role.guard.ts` and add the following code 👇

```typescript
// src/app/core/guards/user-role.guard.ts

import { Injectable } from "@angular/core";
import {
  CanActivate,
  Router,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
} from "@angular/router";

// ✨ New 👇
import { Store } from "@ngrx/store";

import { Observable, of } from "rxjs";
import { catchError, map } from "rxjs/operators";
import { selectUserRoles } from "../state/user";

@Injectable({ providedIn: "root" })
export class UserRoleGuard implements CanActivate {
  constructor(
    // ✨ New 👇
    private store: Store,
    private router: Router
  ) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    // ✨ New 👇
    return this.store.select(selectUserRoles).pipe(
      map((roles) => {
        if (roles && roles.includes(route?.data?.role)) {
          return true;
        }

        // redirect the user to home
        this.router.navigate(["/home"]);
        return false;
      }),
      catchError((err) => {
        // redirect the user to home
        this.router.navigate(["/home"]);
        return of(false);
      })
    );
  }
}
```

Another place we use user-related information is the Navbar. We display user information and conditionally display the login and logout button depending on the user's `isAuthenticated` state. Open `nav-bar.component.ts` and add the following code 👇

```typescript
// src/app/shared/components/nav-bar/nav-bar.component.ts

import { Component } from "@angular/core";
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { faHome, faUser, faUtensils } from "@fortawesome/free-solid-svg-icons";
import { Store } from "@ngrx/store";

// ✨ New 👇
import {
  allNavbarActions,
  selectIsLoggedIn,
  selectUserDetails,
} from "src/app/core/state/user";

export interface INavBarMenuLinkProps {
  to: string;
  icon: IconDefinition;
  label: string;
}

@Component({
  selector: "app-nav-bar",
  templateUrl: "./nav-bar.component.html",
  styleUrls: ["./nav-bar.component.scss"],
})
export class NavBarComponent {
  faUser = faUser;

  // ✨ New 👇
  isAuthenticated$ = this.store.select(selectIsLoggedIn);
  user$ = this.store.select(selectUserDetails);

  navOptions: INavBarMenuLinkProps[] = [
    { to: "/home", label: "Home", icon: faHome },
    { to: "/menu", label: "Menu", icon: faUtensils },
  ];

  constructor(private store: Store) {}

  loginWithRedirect(): void {
    this.store.dispatch(allNavbarActions.loginFlowInitiated());
  }

  logout(): void {
    this.store.dispatch(allNavbarActions.logoutFlowInitiated());
  }
}
```

The profile page displays some information about the user, such as name and photo. Since this is stored as part of the user Store, let's also update this to use the `selectUserDetails` Selector. Open `profile.component.ts` and add the following code 👇

```typescript
// src/app/features/profile/profile.component.ts

import { Component } from "@angular/core";

// ✨ New 👇
import { Store } from "@ngrx/store";
import { selectUserDetails } from "src/app/core/state/user";

@Component({
  selector: "app-profile",
  templateUrl: "./profile.component.html",
  styleUrls: ["./profile.component.scss"],
})
export class ProfileComponent {
  // ✨ New 👇
  user$ = this.store.select(selectUserDetails);

  // ✨ New 👇
  constructor(private store: Store) {}
}
```

We display an `Add` button when the logged-in user is an admin user on the Menu Items page. You can read more about setting up admin users on Auth0 in this [blog post](https://auth0.com/blog/developing-a-secure-api-with-nestjs-adding-role-based-access-control/#Get-User-Roles). Open `menu-items.component.ts` and add the following code 👇

```typescript
// src/app/features/menu/menu-items/menu-items.component.ts

import { Component } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { Store } from "@ngrx/store";
import { selectMenuItems } from "src/app/core/state/menus";
// ✨ New 👇
import { selectIsAdmin } from "src/app/core/state/user";

@Component({
  selector: "app-menu-items",
  templateUrl: "./menu-items.component.html",
  styles: [
    `
      :host {
        width: 100%;
        height: 100%;
      }
    `,
  ],
})
export class MenuItemsComponent {
  menuItems$ = this.store.select(selectMenuItems);
  // ✨ New 👇
  isAdmin$ = this.store.select(selectIsAdmin);

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private store: Store
  ) {}

  addMenuItem(): void {
    this.router.navigate(["add"], { relativeTo: this.activatedRoute });
  }
}
```

Lastly, we display a `Edit` and `Delete` buttons when the logged-in user is an admin user on the Menu Item page. Open `menu-item.component.ts` and add the following code 👇

```typescript
// src/app/features/menu/menu-item/menu-item.component.ts

import { Component } from "@angular/core";
import { Location } from "@angular/common";
import { ActivatedRoute, Router } from "@angular/router";
import { map, switchMap } from "rxjs/operators";
import { Store } from "@ngrx/store";
import { selectMenuItem } from "src/app/core/state/menus";

// ✨ New 👇
import { selectIsAdmin } from "src/app/core/state/user";

@Component({
  selector: "app-menu-item",
  templateUrl: "./menu-item.component.html",
  styleUrls: ["./menu-item.component.scss"],
})
export class MenuItemComponent {
  menuItemId$ = this.activatedRoute.params.pipe(map((params) => params.id));
  menuItem$ = this.menuItemId$.pipe(
    switchMap((id) => this.store.select(selectMenuItem({ id: id })))
  );

  // ✨ New 👇
  isAdmin$ = this.store.select(selectIsAdmin);

  constructor(
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private location: Location,
    private store: Store
  ) {}

  back(): void {
    this.location.back();
  }

  navigateTo(url: string): void {
    this.router.navigateByUrl(`${this.router.url}/${url}`);
  }
}
```

### Create User Reducer

The `userDetails` in the user Store will only be modified based on the `userChanged` event from Auth0's SDK to always keep them in sync. Open `user.reducer.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.reducer.ts

import { Action, createReducer, on } from "@ngrx/store";
import * as UserActions from "./user.actions";
import { initialState, UserState } from "./user.state";

const userReducer = createReducer(
  initialState,
  on(UserActions.userChangedFromAuth0SDK, (state, { userDetails }) => ({
    ...state,
    userDetails: userDetails,
  }))
);

export function reducer(state: UserState | undefined, action: Action) {
  return userReducer(state, action);
}
```

#### Update Core Reducer

Similar to what you did for the menus Reducer, you will need to add the reducer to the `ActionReducerMap` to use the user reducer. Open `core.reducer.ts` and add the following code 👇

```typescript
// src/app/core/state/core.reducers.ts

import { ActionReducerMap, MetaReducer } from "@ngrx/store";
import { State } from "./core.state";
import * as MenusReducer from "./menus/menus.reducer";
// ✨ New 👇
import * as UserReducer from "./user/user.reducer";

export const reducers: ActionReducerMap<State> = {
  menus: MenusReducer.reducer,
  // ✨ New 👇
  user: UserReducer.reducer,
};

export const metaReducers: MetaReducer<State>[] = [];
```

### Create User Effects

You will be interacting with Auth0's SDK through the user Effects, to log in and log out the user and listen to changes in the user's state. Open `user.effects.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.effects.ts

import { Injectable } from "@angular/core";
import { AuthService } from "@auth0/auth0-angular";
import { Actions, createEffect, ofType } from "@ngrx/effects";
import { tap, map } from "rxjs/operators";
import * as UserActions from "./user.actions";

@Injectable()
export class UserEffects {
  constructor(
    private actions$: Actions<any>,
    private authService: AuthService
  ) {}

  login$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.allNavbarActions.loginFlowInitiated.type),
        tap(() => this.authService.loginWithRedirect())
      ),
    { dispatch: false }
  );

  logout$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.allNavbarActions.logoutFlowInitiated.type),
        tap(() => this.authService.logout())
      ),
    { dispatch: false }
  );
}
```

To keep the user observable from the Auth0's SDK and our user Store in sync, you can use an actionless effect that listens to an external observable (in our case `authService.user$`) and dispatches another action whenever that observable emits a new value. Open `user.effects.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.effects.ts

import { Injectable } from "@angular/core";
import { AuthService } from "@auth0/auth0-angular";
import { Actions, createEffect, ofType } from "@ngrx/effects";
import { tap, map } from "rxjs/operators";
import * as UserActions from "./user.actions";

@Injectable()
export class UserEffects {
  constructor(
    private actions$: Actions<any>,
    private authService: AuthService
  ) {}

  // ✨ New 👇
  userChanged$ = createEffect(() =>
    this.authService.user$.pipe(
      map((userDetails) =>
        UserActions.userChangedFromAuth0SDK({ userDetails: userDetails })
      )
    )
  );

  login$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.allNavbarActions.loginFlowInitiated.type),
        tap(() => this.authService.loginWithRedirect())
      ),
    { dispatch: false }
  );

  logout$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.allNavbarActions.logoutFlowInitiated.type),
        tap(() => this.authService.logout())
      ),
    { dispatch: false }
  );
}
```

Add `user.effects` to the barrel export. Open `index.ts` and add the following code 👇

```typescript
// src/app/core/state/user/index.ts

export * from "./user.state";
export * from "./user.actions";
export * from "./user.selector";

// ✨ New 👇
export * from "./user.effects";
```

#### Update Effects Module

You will then need to add `UserEffects` to the `EffectsModule` initialization. Open `app.module.ts` and add the following code

```typescript
// src/app/app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
import { StoreModule } from "@ngrx/store";
import { EffectsModule } from "@ngrx/effects";
import { AuthHttpInterceptor, AuthModule } from "@auth0/auth0-angular";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { NavBarModule } from "./shared";
import { environment } from "src/environments/environment";
import { reducers, metaReducers } from "./core/state";
import { MenusEffects } from "./core/state/menus";

// ✨ New 👇
import { UserEffects } from "./core/state/user";

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    AuthModule.forRoot({
      ...environment.auth,
      httpInterceptor: {
        allowedList: [
          `${environment.serverUrl}/api/menu/items`,
          `${environment.serverUrl}/api/menu/items/*`,
        ],
      },
    }),
    AppRoutingModule,
    NavBarModule,

    // NgRx
    StoreModule.forRoot(reducers, {
      metaReducers,
    }),

    // ✨ New 👇
    EffectsModule.forRoot([MenusEffects, UserEffects]),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthHttpInterceptor,
      multi: true,
    },
  ],
})
export class AppModule {}
```

> **Checkpoint:** There aren't any visible functional changes added in this section. The difference between the current state of the app compared to the previous checkpoint is its underlying implementation. The app now uses NgRx versus a `BehaviorSubject` to manage user-related states. The app should display the login button with an empty dashboard when the user is not authenticated, and display the logout button with the logged-in user's name along with the menu items on the dashboard when a user is authenticated. Clicking on the "Log in" and "Log out" buttons should trigger their respective flows using Auth0's SDK and update your application's state. If you open Redux Devtools in your browser, you should see the user state and actions every time you perform any user-related actions.

## Conclusion

State management is a key component when building applications. You added two Stores to our demo application to manage two distinct states - menus and user. This is a relatively small demo application with a few Stores, Actions, and Reducers to show how you can use NgRx to manage your Application's state, and use NgRx with Auth0's SDK to handle user-related functionalities.

State Management in Angular Using NgRx: Pt. 2

matt-netkow

Matt leads the Developer Relations team at Ionic, an app development platform that helps companies ship powerful cross-platform apps using one codebase. A .NET developer for many years, he embraced the open web after realizing he should probably pay attention to an up-and-coming language called “JavaScript.” Today, he specializes in cross-platform hybrid apps built with web technologies. When not coding, you can find him traveling the world, hiking, and exploring the local sights and culture.

Head of Developer Relations

Matt Netkow

Learn how to secure your Ionic app by adding user authentication with Auth0 and Ionic Auth Connect.

Adding Auth0 to an Ionic Angular App Using Auth Connect

philippederyck

Philippe De Ryck helps developers protect companies through better web security. His Ph.D. in web security from KU Leuven lies at the basis of his exceptional knowledge of the security landscape. As the founder of Pragmatic Web Security, Philippe delivers security training and security consulting to companies worldwide. His online course platform allows anyone to learn complex security topics at their own pace. Philippe is a Google Developer Expert and an Auth0 Ambassador/Expert for his community contributions on the security of web applications and APIs.

Web Security Expert, Founder of Pragmatic Web Security

Philippe De Ryck

Learn how Trusted Types help eradicate DOM-based XSS in frontend Angular and React applications.

Securing SPAs with Trusted Types

ravi_kiran

Guest Author

Ravi Kiran

Learn how to use Angular, D3, and Socket.IO to build an application that provides real-time charts to its users.

Real-Time Charts using Angular, D3, and Socket.IO

Improve the User Experience (UX) of an e-commerce application by implementing animations utilizing Angular animations, CSS animations, and Web Animation APIs.

Get Better Angular UX Using 4 Animation Techniques

john-papa

John Papa is a dedicated father and husband, a professional Web Developer, and avid OSS and community advocate. He currently is a Developer Advocate for Microsoft and has formerly worked for Disney on several web and mobile applications that you may have used. His passions are coding and teaching modern web technologies and enjoying everything Disney with his family. John is a co-host of the Real Talk JavaScript podcast, author of the Angular Style Guide, and many popular Pluralsight courses. You can reach John on Twitter at @john_papa.

Principal Developer Advocate Lead

John Papa

Find and report more errors than ever with Angular 9's Ivy compiler, strict template checking.



We have likely read about some of the benefits of the Ivy compiler and runtime. It's faster. It makes smaller bundle sizes. And it has [many other great new features that are introduced in Angular 9](https://auth0.com/blog/angular-9-whats-new/). Yet one of the most compelling and useful features is one we don't hear as often.

What if Angular could find bugs in our existing code? Hidden bugs that we may not notice. Subtle bugs that could cause problems? [Angular 9](https://angular.io) and the [Ivy](https://angular.io/guide/ivy) compiler do just that.

The new feature is known as strict template checking. Angular has been checking expressions and bindings within the templates of our applications for years. But with Angular 9, it finds and reports more errors than ever. It is pretty cool that we could have bugs in our templates right now, and this new feature reports them to us so we can fix them.

Seeing is believing, so let's see some examples. We'll kick things off using Angular 8, and we'll progress to Angular 9. We'll also adjust some compilation settings. These differences help us see where Angular 9 can detect additional errors that Angular 8 could not.

<include src="TweetQuote" quoteText="With Angular 9's new feature, strict template checking, we can find and report more errors than ever!"/>

## Compiling with Angular 8

Let's start with an example that we can all relate to, using Angular 8. 

We use a lot of `*ngFor` directives in our templates to iterate over arrays of objects. We reference an array and display the details of each object in the array in a template. The following component displays a list of heroes in the template.

``` html  

// app.component.ts

import { Component } from "@angular/core";
interface Hero {
  id: number;
  name: string;
}

@Component({
  selector: "app-root",
  template: `
      <div>{{ title }}</div>
      <ul>
        <li *ngFor="let hero of heroes; trackBy: trackByHero">
          <div>{{ hero.Id }} {{ hero.name }}</div>
        </li>
      </ul>
  `
})

export class AppComponent {
  heroes: Hero[] = [
    { id: 10, name: "Landon" },
    { id: 20, name: "Ella" },
    { id: 30, name: "Madelyn" },
    { id: 40, name: "Haley" }
  ];
  trackByHero(hero: Hero) { return hero.id; }
}

```

We're going to explore the `fullTemplateTypeCheck` setting in our `tsconfig.json` file, which, by default for our Angular 8 app, is set to `true`.

```json
{
  "compileOnSave": false,
  "compilerOptions": {
  …
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}
```

When we build this application with Angular 8 using `ng build` it compiles successfully. It even serves the application in the browser when we run `ng serve --open`. 

Now we can build the app with Angular 8 using AOT by running the command `ng build --prod`. Now we see Angular is reporting an error that the `title` does not exist in our component. When both AOT and the `fullTemplateTypeCheck` setting set to true, Angular can detect when we refer to a model that is missing from our component.

```text
ERROR in src/app/app.component.ts.AppComponent.html(3,12): Property' title' does not exist on type 'AppComponent'.
```

This error message is clear, but what is that filename `app.component.ts.AppComponent.html`? We can guess, correctly, that it means the `app.component.ts` file. But it would be nice if the filename was clear. We could fix this error now, but let's see what happens when we compile with Angular 9.

## Angular 9’s No Strict Templates

After upgrading to Angular 9 and its Ivy compiler, we can use a new setting in `tsconfig.json` for strict template checks. We'll open the file `tsconfig.json` and locate the `angularCompilerOptions` section. Let’s remove the `fullTemplateTypeCheck` entry and replace it with `strictTemplates: false`. Our `tsconfig.json` file should now have the following settings for the `angularCompilerOptions` with the strict templates checked disabled.

```json
{
  "compileOnSave": false,
  "compilerOptions": {
  …
  },
  "angularCompilerOptions": {
    "strictTemplates": false,
    "strictInjectionParameters": true
  }
}
```

When we build this application with Angular 9 using `ng build`, we immediately see an error for the missing `title` model. Also, the error is a little easier to read, as the Ivy compiler reports the file where the bug occurs.

```text
ERROR in src/app/app.component.ts:12:15 - error TS2339: Property 'title' does not exist on type 'AppComponent'.
```

We only had to run `ng build` to see this error with Angular 9, while in Angular 8 we did not see this error message when we ran `ng build`. This is because the AOT (Ahead of Time) compilation does not run in Angular 8 unless we explicitly tell it to run or we run `ng build --prod`. AOT compilation occurs with Angular 9 in `ng build` and `ng build --prod`. Having the AOT compilation in `ng build` is convenient because in Angular 8 we could have errors while we develop our application until we run a production build. Angular 9 tells us right away if we have this type of error.

Let's fix our error by adding a title model to our component. We'll add the following code inside of the `AppComponent`:

```javascript
  title = 'Heroes';
```

Now we can build successfully with `ng build` with Angular 9. So to recap what just happened, we upgraded to Angular 9 and disabled strict template checks, and the Ivy compiler tells us errors that were missed in a standard `ng build` in Angular 8.

Now let's ramp up the stakes a bit and see if we can get Angular 9 to show us any more hidden errors.

## Strict Templates

Let's change the setting in `tsconfig.json` to enable strict template checks. We'll open the file `tsconfig.json` and locate the `angularCompilerOptions` section. Let’s remove the `fullTemplateTypeCheck` entry and replace it with `strictTemplates: true`. Our `tsconfig.json` file should now have the following settings for the `angularCompilerOptions` with the strict templates checked enabled.

```json
{
  "compileOnSave": false,
  "compilerOptions": {
  …
  },
  "angularCompilerOptions": {
    "strictTemplates": true,
    "strictInjectionParameters": true
  }
}
```

Now when we build and serve the application with `ng build` we are presented with a series of errors, as shown in the following image:

![Strict Template Check Find Several Errors in Angular 9](https://images.ctfassets.net/23aumh6u8s0i/6J00gz6V5dgxHbzkvhw1xf/e8836f9bfb60c45229ceffa729bda64f/strict-template-checking-errors)

If we tackle these one-by-one, we can see that the first error is complaining that something is wrong with the `*ngFor` statement. The real hint is how it references `TrackByFunction<Hero>`. Our function `trackByHero` only accepts a `hero` parameter. However, the implementation of a `TrackByFunction<T>` states that it should accept an index and a type T. This is why it is saying that `hero` and `index` are incompatible because we did not pass the `index`.

We can fix this error by refactoring our function to look like the following code:

```javascript
  // Old code
  // trackByHero(hero: Hero) {
  // return hero.id;
  // }
  // Refactored code
  trackByHero(index: number, hero: Hero): number {
    return hero.id;
  }
```

When we run `ng build` after refactoring the `trackByHero` function, we see fewer error messages.

![Strict Template Check Error for missing property on a model](https://images.ctfassets.net/23aumh6u8s0i/6wNVWwlV25Mm8nrKnE8UgM/40160e9f303349b737879a92592b9ce7/strict-template-check-model)

This last error reports that the property `Id` does not exist on the `hero` model. After closer examination in our component's code, we can see this is indeed an error. The code should be binding to `hero.id`. This minor typo was not detected in Angular 8 and can only be detected in Angular 9 with strict templates!

Now when we refactor the template to bind to `hero.id` and run `ng build` once again, we have success! 

Angular 9's Ivy compiler and the strict template check found these errors that Angular 8 could not detect.

## What Happened?

Angular 8 does check the templates for errors, but it had gaps in what it could not detect. For example, when using AOT and the `fullTemplateTypeCheck` setting, Angular 8 could detect missing models from a component. But it could not detect the properties of those models. This is why the properties of the `hero` could not be verified by Angular 8.

We explored a few different scenarios, so let's break this down a bit:

* When `fullTemplateTypeCheck` was false, Angular didn't check the bindings inside the `*ngFor` template. So the `<li>`'s bindings did not get checked.

* When `fullTemplateTypeCheck` was true, Angular checked that the `hero` is a valid model on the component, but it assumes the model is of type `any`.

* When `strictTemplates` is true, Angular 9 and the Ivy compiler verify that `hero` is a valid model of type `Hero`, and that the properties on that model (`hero.id` and `hero.name`) are also valid.

<include src="TweetQuote" quoteText="Angular 9's Ivy compiler and the strict template check finds errors that Angular 8 could not detect."/>

## Should We Use Strict Templates Now?

If we upgrade from Angular 8 to Angular 9 using [this excellent upgrade guide](https://update.angular.io/), the `strictTemplates` setting isn't applied to our app. Wait, if this helps our app detect bugs, why wouldn't we want it? Imagine how we might react if our app, which seems to work fine right now, produced compilation errors after an upgrade?  

By making this a manual change that we must opt into for Angular 9, we control the experience, and we control when we decide to ask Angular to look for template bugs that may exist. 

> Note: The Angular team intends to set `strictTemplates` to true in the next version, Angular 10. 

If we want to get to a point where we have strict templates slowly, there is a way we can do this more gradually. There are several additional checks that Angular 9's Ivy compiler can check for us. We can use [this guide in the Angular docs to gradually get to `strictTemplates`](https://angular.io/guide/template-typecheck#troubleshooting-template-errors) by turning on individual strict flags and fix newly revealed errors until none are remaining.

Whatever is decided, it is nice that Angular 9 and its Ivy compiler detect more errors than ever before, and we can gradually fix them at our own pace without disrupting our workflow.

## Other Angular Resources

If you want to learn more about these features, check out these great resources:

* [Angular 9 Template Type Checking](https://angular.io/guide/template-typecheck)
* [TypeScript configuration](https://angular.io/guide/typescript-configuration)
* [Angular Language Service for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template&wt.mc_id=auth0-blog-jopapa)

<include src="asides/AboutAuth0" />

---


Angular 9's Best Hidden Feature: Strict Template Checking

kapehe-jorgenson

Kapehe is an R&D Content Engineer for Auth0 with a passion for learning and teaching. With her primary focus on ReactJS and JavaScript, she is impressed with what code can create for the web. Technology and web development are constantly evolving and naturally bring that need for continual learning. She enjoys writing tutorials, hosting local meetups, and learning with others to expand coding knowledge.

R&D Content Engineer

Kapehe Jorgenson

Learn about the top seven features and upgrades we get with Angular 9


[Angular](https://angular.io/) [v9](https://github.com/angular/angular/releases/tag/9.0.0) is here! Along with it, we now get [Ivy](https://angular.io/guide/ivy), the default compiler that can reduce bundle size, improve debugging, and much more. It’s been almost three years since Angular released an update this large (ironic, since this update makes the code smaller!), and we can see it’s been worth the wait. 

![GitHub view of Angular v9](https://images.ctfassets.net/23aumh6u8s0i/5Vh6v8fQvKbKVPFL3QLRDi/81c0312083b87fd1ea130064e310a2c8/github-v9)

In this article, we are going to go over how to update from v8 to v9 and the **most Magnificent Seven things that Angular v9 has given us**. There are many things we can look forward to in this update, let’s talk about some of our favorites!

<include src="TweetQuote" quoteText="Angular v9 is here! Along with it, we now get Ivy!"/>

## Angular 9 is Ready for its Closeup

This upgrade has been through extensive testing. With more developers and projects using it, the bugs have been reported, and [over 300 have been fixed](https://github.com/angular/angular/issues?q=is%3Aissue+is%3Aclosed+label%3A%22comp%3A+ivy%22). Angular is used internally at Google for projects like [Google Domains](https://domains.google/) and [Firebase](https://firebase.google.com/). These projects will use new versions of Angular to test and validate before it goes beyond beta and RC. This upgrade is ready!

<include src="ebook-ads/Oauth2OidcGuide" />

Version 9 is more about changes to the framework, not the code that we wrote. This makes it easy for developers. To upgrade to v9, we won’t have to dive into individual files or components and update any code ourselves. The new Ivy renderer works with all our current code!

<include src="TweetQuote" quoteText="Angular v9 is more about changes to the framework, not the code that we wrote."/>

## How to Update from v8 to v9

We can find step-by-step instructions for updating from v8 to v9 on the [official update.angular.io](https://update.angular.io/). Let’s go over exactly what needs to happen to upgrade from Angular v8 to Angular v9.

> **Note:** Before starting the upgrade process, be sure to commit all changes to git. This will also be helpful to see how the upgrade modified certain files.

First, ensure we are using [Node v10.13 or later](https://nodejs.org/en/download/). It’s recommended to use the [Node 12.15.0 LTS](https://nodejs.org/en/) version since it will be supported!

Once we confirm our Node version, we will want to run the following command in our project’s directory:

```bash
ng update @angular/core@8 @angular/cli@8
```

This command will update our `@angular/core` and `@angular/cli` in our `package.json` for our project.

Once we run that, we will want to run:

```bash
ng update @angular/core @angular/cli
```

![Terminal - Updating to Angular 9 confirmation](https://images.ctfassets.net/23aumh6u8s0i/4DgcPvzI1DaT34ZVabV08M/044521f10274b02c4427e9737eb46aa1/terminal-updated-v9)

During the update process, we should see numerous messages telling us exactly what the CLI is updating. It will also tell us which files were modified. At a minimum, we should see the following files modified:

![VS Code view of files that were modified. tsconfig.app.json, angular.json, package-lock.json, package.json](https://images.ctfassets.net/23aumh6u8s0i/1u6tVi0ssjjkDaCFsmy7AP/2a99131ba3b1c095940be54dfc735865/files-modified)

We may see other files that get modified depending on where the project sits. For example, if the project has the older lazy load syntax or if the project is missing the `@injectable()` in a service file, those would also get updated.

Once complete, head to our `package.json`, and we will see that we are up-to-date with the latest Angular v9!

![View of package.json showing v9 updates](https://images.ctfassets.net/23aumh6u8s0i/2ju5ykqhOv1jioBXin99TJ/f1e495969baad55ddb8927b6e404a264/package-json-v9)

We have now updated from Angular v8 to Angular v9! Let’s explore more of the features.

## The Magnificent Seven

In this article, we are going to list the most “Magnificent Seven” features in Angular v9, all to the theme of movie titles. You get bonus points for spotting all the movie and television show references and listing them in the comments! 

## 1 - Honey I Shrunk Our App

It wasn’t accidental that the Angular team focused on helping our apps become smaller and making our apps faster than they were in previous versions of Angular. Our users expect the app experience to be fast. The Ivy compiler focuses on targeting our code with laser-beam accuracy to find and remove unneeded code.  

The Ivy compiler looks for parts of Angular that are not being used. It uses tree-shaking (a way of detecting unused code, also known as dead code removal), and it generates less code for each Angular component.

As the chart below shows, apps of all sizes can benefit from the Ivy compiler.

![Graph showing how Ivy improves app size](https://images.ctfassets.net/23aumh6u8s0i/56YEnzsya5yfLIBchND4Kz/51391832e85cf1fbd3b5302ff18b2f9b/ivy-size-improvements-2)
([Image credit](https://blog.angular.io/))

Once we update to Angular 9, we can run `ng build --prod` and notice how our file sizes shrink. 

## 2 - Ivy Knows What You Did Last Summer, in that Template

That’s right. Last summer, we wrote some pretty tragic code that we mostly forgot about. But Angular 9 hasn’t forgotten. We made poor choices in our templates and those errors are now detected by Angular 9. Fortunately, Angular is friendly enough to share those template errors with us in a clear and helpful way.

When we reference a component in a template, Angular expects that the component exists in the app. Imagine that we have this template:

``` html  

<div>
  <app-fake></app-fake>
  Hello {{hero.name}}
</div>

```

If no component exists that matches the `app-fake` selector, this is a problem. However, in Angular 9, when we run `ng build`, we get a very detailed error explaining that it knows exactly what we did wrong. 

![ng build error](https://images.ctfassets.net/23aumh6u8s0i/2PxhjJkLrkr942rXS2qCpM/38768b3bef6d50c8d43fd3b6b5699012/ng-build-error-2)

The error message very clearly tells us that it cannot find the component, shows us which component it is referring to, and it shows us exactly where this reference appears in the code! 

## 3 - Winter is Coming, and so is Our Angular Build

Ivy is so fast that we’ll have fewer opportunities to step away while waiting for our builds to complete. Prior to Angular 9, some of our app build times have felt like it would be a race to see what would come first: Winter or the completion of our Angular build.

Well, Ivy knows things about our apps and it always pays its debts. Ivy speeds up our build times significantly. Faster build times mean less stepping away from the computer while we build our apps. 

## 4 - Back to the Future, with AOT!

Remember that time before Angular 9 when we found out we had an [AOT](https://angular.io/guide/aot-compiler) error that surfaced only in Continuous Integration (CI) or, heaven forbid, in production? Hello McFly! That’s about when we want to go back in time and correct our mistakes by running `ng build --prod`. 

Why did this happen? Because prior to Angular 9, the AOT compilation step only ran when we executed using the production flag `ng build --prod`. It seems that AOT compilation would have made the dev builds too slow to be a good experience, so the Angular team opted (thankfully) to only put AOT compilation in the production builds. While this was fine as long as we remembered to run it before pushing or merging (or whatever your CI process is), it certainly had its flaws.

What we wish is that in the future, we can see the AOT errors in all builds. Well, that future is here!

The good news is that Angular 9 brings AOT to the dev build, too! The Ivy compiler makes our builds much faster. So fast that it makes it reasonable to pull AOT into the dev builds (and of course, `ng serve`) without causing significant delays in build times. 

The bottom line is that AOT is now dev and prod. Who cares? We do! AOT errors that never appeared in a dev build used to surprise us when we ran with a prod build. Now that dev and prod use AOT, we’ll find these errors early and we’ll see good error messages explaining how to fix them.

## 5 - The Phantom Template Variable Menace 

There once was a time when we could create phantom variables in our templates - variables that had never been referenced in the template’s associated component. Creating these phantom variables can menace our applications. All of this changes in Angular 9 as we now get a compiler error when we create a template variable that has not been defined in a component.

Let’s take a look at what this means. Imagine we have a template and we set a `villain` variable when a user clicks on a `<div>`. Now, we may have intended for them to set the `hero` model, which exists in the templates’ component. But we might have made a copy and paste error. Or maybe we really wanted to create a `villain` model, in which case we should have defined the model in the component file.

``` html  

<div (click)="villain = { id: 1, name: 'john' }">

```

When we build with Angular 9, this error will be displayed. Notice it tells us that the villain doesn’t exist in the component. It even shows us exactly where to find this code. 

![Error handling in Components](https://images.ctfassets.net/23aumh6u8s0i/7mXFNSasHpo4UbSt5BOXox/9e3ee6d379e6a035e2d346793a3a84b6/component-errors-2)

So what can we do about this? Well, if the intention was to set a hero, now we know we have to change it. If we really need to set the `villain` model in the template, just create the `villain` model in the component. Before Angular 9, this may have gone unnoticed, but now Ivy detects and alerts us about all template-only variables.

## 6 - Brave: An ng update Story

At times running `ng update` with Angular 8 (or previous) is amazingly easy and helpful. And other times, it felt like we were poking a sleeping bear. It’s almost like the magical wisps inside of the Angular CLI were playing games with us. 

Angular 9 now has a vastly improved `ng update` experience. It is more accurate, more consistent, and more transparent. Here are three key reasons why the Angular CLI is now more reliable than ever:

1. It now uses the latest version of the CLI to perform all updates.
2. Now displays a detailed diary depicting exactly what it is doing during the update.
3. Refactors our code where it detects a need to be compatible with the latest version.

Since a detailed diary of the update progress is displayed, we always know what code is being refactored. Plus, we can also check our git changes for any refactored code. Here are three examples of the scenarios that the Angular CLI will refactor for us:

* Update lazy loading syntax to use dynamic imports.
* Removes the `static` flag from dynamic queries. As of Angular 9, the "static" flag defaults to false and is no longer required for our view and content queries.
* Update our services without @Injectable to use `@Injectable`.

This is really convenient, so we do not have to know every new change in Angular 9 (and beyond). The Angular CLI knows these changes, reports to use what changes it is looking for, and then refactors when it finds any places in our code that need those changes.

## 7 - The Legendary Journey of Entry Components

A long time ago, in a time of myth and legend, only one person knew when we needed to define `entryComponents` in our NgModules. Ok, that’s not entirely accurate as many of us have used `entryComponents`. But do we always remember what they do and when they are needed?  Or was that knowledge lost in our mind? With no more hope of resurfacing than that of a lost soul in the Minotaur’s maze.

Lest we forget, this was needed when we used a component (perhaps in code), but it never appeared in a template. Prior to Angular 9, specifying the component in the `entryComponents` array was the recommended way to tell Angular, “Hey, we have a component here!”.

```typescript
@NgModule({
  // ...
  entryComponents: [ModalComponent]
})
export class AppModule {}
```

Here is a scenario where we might have a component that is not referenced in a template. Imagine that we create a `ModalComponent` which shows a modal dialog to the user, letting them select “yes” or “no”. When using Angular Material, we could use the `MatDialog.open()` function and pass it the `ModalComponent` to display to the user. This could be the only place in the app that the component is referenced. Prior to Angular 9, this must be set in the `entryComponents` array in a NgModule. Otherwise, Angular would not know what `ModalComponent` is.

Wow, this is something we probably don’t do that often. However, when we do need this feature, we often spend some time searching Google for how to solve it. 

The good news here is that in Angular 9 there have been changes to the compiler and runtime that make it so we no longer need to specify this in the `entryComponents` array. Angular will find the component on its own. 

The bad news, if we can call it bad news, is that Angular will not remove the component from the `entryComponents` array for us. So we should search our code after updating and manually remove them. Then test … always test. Just in case.

## Upgraded Tooling

One of the best things about Angular is the amazing and helpful ecosystem. When we upgrade to version 9 we really want to make sure we’re using the latest tools that go with Angular. Here are two tools we recommend installing or upgrading:

1. [VS Code](https://code.visualstudio.com/?wt.mc_id=angular9-blog-jopapa) editor
2. [Angular Essentials Extension](https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials&wt.mc_id=angular9-blog-jopapa) for Visual VS Code

The Angular Essentials extension includes a set of useful extensions to enhance the development experience with Angular. The one that stands out most is the [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template&wt.mc_id=angular9-blog-jopapa), which adds a lot of features to VS Code, so it knows how to help us write our Angular code. Others include useful Angular snippets, ESLint, and debugging extensions.

<include src="asides/Angular" />

## That’s All Folks!

It looks like we have a lot to look forward to with Angular v9. We have faster build times, a more accurate `ng update`, and Ivy is making smaller bundle sizes, just to name a few! The Angular team has been working countless hours on this version and we can now reap the benefits!

Which is your favorite of those **Magnificent Seven**? Which one will help your project the most? Let us know in the comments below!

---


Angular 9: What’s New?

preston-lamb

Preston is a Software Developer at MotivHealth in Salt Lake City, UT, as well as a course author for Thinkster.io. His focus is mainly on Angular and JavaScript, and he loves to learn new things that help him to build better web applications. He also likes to share the things he learns through blog posts, video courses, and podcasts.

Software Developer at MotivHealth

Preston Lamb

Angular, Auth0, and Netlify are a perfect combination for creating, securing, and deploying your application.

Securing Angular Applications with Auth0 and Deploying to Netlify

oliver-mensah

Software Developer who loves software developer community programs. As a community-driven Software developer, he organizes, speaks and volunteers at tech events.

Software Developer at Agro Innova

Oliver Mensah

In this article, you will learn how to take advantage of Angular Material to create beautiful and modern Angular applications.

Creating Beautiful Apps with Angular Material

indermohan-singh

Indian expat living and working in Vienna, Austria. Besides programming,  I love Music. I sing Bollywood and Indian Classical Music. Perfect by Ed Sheeran is my Go to song for Karaoke. I also like to run and in the process of running a marathon. I am also the author of "Ionic 2 Blueprints" and co-authored "Ionic Cookbook". Apart from that, I am a GuestAuthor at Auth0 and LogRocket Blogs.

Mobile Developer

Indermohan Singh

Learn how to create an Audio Player app using Angular, Material Design and RxJS.

Building an Audio Player app with Angular and RxJS

sambiopic

I'm Director of Developer Relations and a Google Developer Expert for Angular and Web Technologies. I believe anyone who wants to learn to code should be able to learn code and I love teaching. When I'm not coding or writing, you'll find me outside hiking or camping in the beautiful Pacific Northwest.

Director of Developer Relations

Sam Julien

Angular 8 now sends separate bundles to legacy browsers by default.


**TL;DR:** Angular 8 is here! Learn all about one of its coolest new features: differential loading. Differential loading lets you serve up different bundles to different browsers and make your application even faster!

Angular 8 has only been out for about a week at the time I’m writing this, but there’s already been 17,000 “What’s New” articles published. Rather than throw my own take on the pile, I’ll refer you to the [official Angular release announcement](https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27) but here are the high points:

- No, Ivy isn’t ready yet (it’s an opt-in preview).
- No, [Bazel](https://bazel.build/) isn’t ready yet (it’s an opt-in preview).
- [Builders](https://blog.angular.io/introducing-cli-builders-d012d4489f1b) allow you to extend and customize the CLI. For example, you’re now able to [deploy to Firebase](https://github.com/angular/angularfire2/pull/2046) and other providers from the CLI.
- There’s [improved support for web workers](https://v8.angular.io/guide/web-worker), such as the ability to generate them from the CLI and use them in your application.
- Rather than using the “magic string” syntax specific to Angular to do lazy loading, you’ll be able to use the [standard `import()` syntax](https://next.angular.io/guide/deprecations#loadchildren-string-syntax). You can even perform this automatically for your app with the [`angular-lazy-routes-fix`](https://github.com/phenomnomnominal/angular-lazy-routes-fix) tool.
- The new [unified location service](https://v8.angular.io/guide/upgrade#using-the-unified-angular-location-service) improves migration from the AngularJS `$location` service. 
- The Angular team has created a simplified [Getting Started Guide](https://next.angular.io/getting-started).
- There’s a new [Deprecation Guide](https://v8.angular.io/guide/deprecations) to assist users with updating Angular.
- [Differential loading](https://v8.angular.io/guide/deployment#differential-loading) is turned on in the CLI by default.

In this article, I want to dive into that last one: differential loading. What is that? Why does it matter? What do I need to do about it (if anything)?

<include src="TweetQuote" quoteText="Angular 8 is here! It features differential loading, better support for web workers, and much more."/>

## What is Differential Loading?
Like most buzzwords in tech, the term “differential loading” is completely opaque about what it actually *means*. In a nutshell, differential loading means to send newer, flashier code to newer browsers and stable legacy code to legacy browsers. This generally translates into two things: modern syntax and polyfills. On a newer browser that supports recent syntax changes in JavaScript (such as arrow functions in ES2015 or async functions in ES2017), it’d be great to ship to code as-is with as few polyfills as possible to keep download time low. On legacy browsers, we’ll need both transpiled code and more polyfills to make things work. This way, newer browsers aren’t punished for legacy browsers by having to load a massive bundle, but legacy browsers aren't left in the dust.

Sounds cool, right? How does this work?  Modern browsers have the ability to interpret a `module` type in the `script` HTML tag and to ignore a `nomodule` attribute. It looks like this:

    
    <script src="fancyModernBundle.js" type="module"></script>
    <script src="legacyBundle.js" nomodule></script>
    
    
When a modern browser (like a new version of Chrome) runs across this, it will know to only load `fancyModernBundle`. Likewise, when an older browser sees this, it won’t recognize the `module` type and only load `legacyBundle`.

![Diagram of how differential loading in Angular 8 works](https://images.ctfassets.net/23aumh6u8s0i/23llHk1LLwhZvAU9rFD1aJ/43ae43d1cfa8b4cce88534afa2ae00f2/differential-loading-2)
[Source](https://cdn.auth0.com/blog/blog/ng-conf-2019)


## How You Normally Set Up Differential Loading
You’ve probably surmised by now that, in order to take advantage of differential loading, you’ll need to divide up your JavaScript code based on browser support. “Easy,” you think, “I’ll just plug the transpiled code into the `nomodule` tag and the original into the `module` tag.” Well, it’s not quite that simple. Unfortunately, not all browsers support all the same features of JavaScript.  Beyond that, your users may not use the same browser you do. In fact, if your users are around the world, they may not even use browsers you’ve heard of &mdash; Opera Mini has over [100 million users in Africa](https://blogs.opera.com/news/2016/11/state-of-the-mobile-web-africa-2016/)!

It turns out that splitting up your bundle for differential loading is a combination of art and science. To pull this off, your bundler (like Webpack) and your transpiler or compiler (like Babel or TypeScript) must work together to divide up your code and add the correct polyfills in the right places. Luckily, there’s a configuration tool called [`browserslist`](https://github.com/browserslist/browserslist) that does nearly all of the heavy lifting for you.

Browserslist works with tools like Babel and is essentially a configuration tool that accepts query strings, which it runs against [Can I Use](https://caniuse.com/) data. Tools use Browserslist through either an entry in `package.json`:

```json
// package.json
"browserslist": [
  "last 1 version",
  "> 1%",
  "maintained node versions",
  "not dead"
]
```

Or in a separate config file called `.browserslistrc`:

```text
// .browserslistrc
# Browsers that we support

last 1 version
> 1%
maintained node versions
not dead
```

Both of these formats contain the same query:

- `last one version`: the last version for each browser
- `>1%`: browsers versions selected by global usage statistics
- `maintained node versions`: all Node.js versions, which are [still maintained](https://github.com/nodejs/Release) by Node.js Foundation
- `not dead`: excludes "dead" browsers, which are the same as those from a `last 2 versions` query, but with less than 0.5% in global usage statistics and without official support or updates for 24 months

Browserslist also has a `defaults` query that works for many people. They’ve got [great explanations of the queries on their GitHub repo](https://github.com/browserslist/browserslist#full-list) and there’s even a site called [browserl.ist](https://browserl.ist) that lets you plug in a query and see a visual list of supported browsers.  

![Testing browserslist defaults queries in the browser](https://images.ctfassets.net/23aumh6u8s0i/p8WJI1Fdo0orzJhcc5pSh/a72ff535d93481b8d7cab3a7dd3d7b6d/browserslist)

## Differential Loading in Angular 8
Ordinarily, you’d need to configure your bundler and Babel or TypeScript to use `browserslist` to split up your code into the correct bundles. With version 8 of the Angular CLI, you actually get this set up right out of the gate with nothing for you to do! This is awesome because differential loading saves on average 7-20% in bundle size for Angular applications in modern browsers. In fact, [angular.io](https://angular.io/) saved over 40kB of its initial bundle size for modern browsers when the team enabled differential loading.

Want to check this out for yourself? It’s really easy!

<include src="TweetQuote" quoteText="In Angular 8, differential loading saves on average 7-20% in bundle size in modern browsers!"/>

### Updating to Angular 8
First, make sure you have the latest version of the Angular CLI installed:

```bash
npm install -g @angular/cli
```

If you’d like to try this on an existing project, you can update it to Angular 8 by running:

```bash
ng update @angular/cli @angular/core
```

> Check out the [Angular Update Guide](https://update.angular.io/) if your app requires more heavy lifting to update, like if it’s currently in version 6 or lower.

Otherwise, you can create a new application:

```bash
ng new diff-loading
```

Follow the prompts about routing and styling and then you’re good to go!

### Configuration and building
If you open the new project in your favorite editor, you’ll notice a new file called `browserslist`. It contains the following by default:

```text
// browserslist
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.
```

You can adjust this list to match better with your own user demographics.

> **One very important note about this:** See that `not IE 9-11` part? If you need to support those browsers, you can remove the `not`, but it comes at a price. Those versions of Internet Explorer can’t take advantage of differential loading, so it will be disabled.

If you open `tsconfig.json`, you’ll see a particularly big change in the `target` property: it’s set to `es2015` by default instead of `es5`. 

Now that you’ve seen where the configuration lives, build the application with this command:

```bash
ng build --prod
```

After it’s done, open up `dist/index.html` and notice the `script` tags:

    
    <script src=“runtime-es2015.858f8dd898b75fe86926.js” type=“module”></script>
    <script src=“polyfills-es2015.e954256595c973372414.js” type=“module”></script>
    <script src=“runtime-es5.741402d1d47331ce975c.js” nomodule></script>
    <script src=“polyfills-es5.405730e5ac8f727bd7d7.js” nomodule></script>
    <script src=“main-es2015.63808232910db02f6170.js” type=“module”></script>
    <script src=“main-es5.2cc74ace5dd8b3ac2622.js” nomodule></script>
    

See all those `module` and `nomodule` instances? The Angular CLI did all that for you!

### Differential Loading in Angular, in action
Now you just need to see it in action. Install a simple server like `http-server`:

```bash
npm install -g http-server
```

Then, within your project folder, serve up the project inside the `dist` folder:

```bash
http-server dist/diff-loading/
```

Open Chrome or another modern browser and head to the address of the server (on my machine it’s `http://192.168.0.4:8080` but it may be different for you). Open up the network tab of the developer tools and refresh the page. You should see only the scripts that include `es2015` in the name!

![Angular differential loading success in Chrome in dev tools](https://images.ctfassets.net/23aumh6u8s0i/6DlabdkvNyGCaj7E7NH7ZT/d8aefdb68950a3af21681c2b18dab378/diff-loading-chrome2)

### Other settings
One quick note before I end this tutorial. If you change the different configurations, there are four different scenarios you could end up with:

- A single ES5 build (differential loading disabled, `target` is `es5`)
- Single ES5 build with conditional polyfills (differential loading enabled, `target` is `es5`)
- Single ES2015 build (differential loading disabled, `target` is `es2015`)
- Two builds with conditional polyfills (differential loading enabled, `target` is `es2015`)

To read more, check out the [official documentation](https://angular.io/guide/deployment#differential-loading).

## Conclusion
Angular 8 brings lots of great new stuff to Angular, including differential loading. I hope you’ve enjoyed this look into what differential loading is, how it works, and how to use it in Angular 8. See you next time!

<include src="asides/Angular" />


A Guide to Angular 8's Differential Loading

ana-ribeiro

Ana Ribeiro

This series shows how to create a simple, full-stack web application with Angular, TypeScript, and Nest.js. Part 1: Developing the backend API with Nest.js.

Full-Stack TypeScript Apps - Part 1: Developing Backend APIs with Nest.js

Auth0’s Sam Julien and Kim Maida spoke at ng-conf 2019 in Salt Lake City.

The State of Angular: ng-conf 2019

Auth0’s Sam Julien spoke at The Big Hangout, a mini-conference hosted by Angular Finland.


![Sani Yusuf dancing at Angular Finland](https://images.ctfassets.net/23aumh6u8s0i/73KEi5mDUUm7O0Sboplgkc/3e23df4cb4b5dd28b78a8e760568b03d/sani-dancing-2)
([Source](https://twitter.com/AngularFI/status/1106592529280106498))

I was honored to get to speak at [The Big Hangout 2019](https://www.angular.fi/events/conferences/2019/home), a mini-conference put on by [Angular Finland](https://www.angular.fi/) on March 14, 2019. The conference was hosted by [Tieto](https://www.tieto.com/) in Espoo, just next to Helsinki.  It was also sponsored by other Finnish tech companies like [Frantic](https://www.frantic.com/), [Finitec](https://www.finitec.fi/), [Gofore](https://www.gofore.com/) (who hosted the after party), and [Innofactor](https://www.innofactor.com/) (who graciously sponsored my travel other there!).

<include src="TweetQuote" quoteText="#TheBigHangout was a mini @angular conference organized by @AngularFI featuring seven international speakers."/>

## The Talks
The Big Hangout featured seven international speakers on different topics.

Kicking off the conference as keynote speaker, who doesn’t love **[Sani Yusuf](https://twitter.com/saniyusuf)**? If you’re not familiar with Sani, he’s a Google Developer Expert based in London. Always the right balance of entertainment and education, Sani gave the perfectly-titled talk “Let’s Get Your Angular App To React.” Sani covered the reasons why forms are so important to business, the basics of Angular’s [reactive forms](https://auth0.com/blog/real-world-angular-series-part-6), and some advanced validation techniques. Learn more on [Sani's slides](https://slides.com/saniyusuf/lets-build-a-form#/).

![Sani Yusuf speaking about reactive forms at Angular Finland conference.](https://images.ctfassets.net/23aumh6u8s0i/NJLYQwp3ghJEnYGqg9p0T/73a92f4d10bcc031d3f2a5afbd658364/sani-forms-2)

Next was **[Nadia Törnroos](https://twitter.com/NadiaTornroos)** on “Digital Accessibility as a Mindset.” Nadia moved to Finland from Moscow about four years ago and is a senior software developer at Tieto.  Nadia’s talk was in the format of a fireside chat with Angular Finland organizer [Richard Farkas](https://twitter.com/richardfarkas). Nadia made the case for accessibility and covered tools and resources for making sites more accessible. Accessibility is not just the right thing to do to help folks with disabilities, it’s also better for building brand, following best practices, and minimizing legal risk. One tool Nadia mentioned that I had not come across before is the [WAVE Web Accessibility Tool](http://wave.webaim.org/). This tool lets you input a site and see an interactive map of accessibility errors. You can check out [Nadia's slides](https://drive.google.com/file/d/1rH9zGWIPD9vjWZ817DItEf8lXscAteZ4/view) for even more resources.

![Nadia Törnroos discussing accessibility at Angular Finland conference.](https://images.ctfassets.net/23aumh6u8s0i/11eaa3Bl4VxGs33UCmENfT/4442616f62dfc89ef7aea33df7843ac9/nadia-accessibility-2)

We took a quick happy hour break after Nadia but dived back in with **[Akseli Virtanen](https://twitter.com/_akseliv)** and a talk called “Thinking in Web Components,” which was about both why you should care about web components and how to start using them. Akseli is a senior developer at Frantic. He’s also a proud Finn and gave me lots of great cultural and historical insights during my trip! Askeli’s talk focused on [Angular Elements](https://angular.io/guide/elements), which allows you to create custom elements using web components.  I loved Askeli’s explanation of web components as an abstraction layer between the browser APIs and whatever technology is controlling the underlying logic or function of the custom element. Akseli's [slides](https://drive.google.com/file/d/10v6_pz4BIUl2cxRTTnDNXVO3uR5JdL3E/view) have more information and some helpful diagrams.

<AmpContent>

</AmpContent>

<NonAmpContent>

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Our senior dev <a href="https://twitter.com/_akseliv?ref_src=twsrc%5Etfw">@_akseliv</a> onstage, talking about using one’s imagination and <a href="https://twitter.com/hashtag/Angular?src=hash&amp;ref_src=twsrc%5Etfw">#Angular</a> Elements. 💡 <a href="https://twitter.com/hashtag/BigHangout?src=hash&amp;ref_src=twsrc%5Etfw">#BigHangout</a> <a href="https://t.co/soT9ohql0d">pic.twitter.com/soT9ohql0d</a></p>&mdash; Frantic (@franticcom) <a href="https://twitter.com/franticcom/status/1106208100833550338?ref_src=twsrc%5Etfw">March 14, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

</NonAmpContent>

I followed Askeli with a talk on “Finding the Right Path from AngularJS to Angular.”  I went over the four migration paths and how to determine which one is right for your application by looking at your team and your codebase. I also recommended a few different resources, like the [ngMigration forum and wiki](https://github.com/angular/ngMigration-Forum). You can [follow me on Twitter](https://twitter.com/samjulien) and check out my [slides and resources](http://samj.im/finland) to learn more.

![Sam Julien discussing ngUpgrade at Angular Finland conference.](https://images.ctfassets.net/23aumh6u8s0i/HEjjrYvofqKyeT3guiSu0/722679d7fe1aaf848335c2c1f1ed49b7/sam-julien-finland-2)
([Source](https://twitter.com/StanimiraVlaeva/status/1106220184061263872))

After a lovely dinner break, **[Sallar Kaboli](https://twitter.com/sallar)**, a principal software engineer at Tieto, presented on “Achieving Performance in Heavy Applications with Angular and WebAssembly.” Sallar moved to Finland from Iran and is both super knowledgable and incredibly friendly. After covering the basics of [WebAssembly](https://webassembly.org/), Sallar gave a truly remarkable demo. Using the [Rust programming language](https://www.rust-lang.org/) on the backend with WebAssembly and Angular on the frontend, Sallar recreated [Conway’s Game of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life).  You can check out [his code](https://github.com/sallar/ng-game-of-life) and [his slides](https://sallar.github.io/talks/ng-wasm/#0) to see more. Here’s a quick video of the demo:

<AmpContent>
<amp-video controls
  layout="responsive"
  width="480" height="270">
  <source src="https://cdn.auth0.com/blog/angular-finland/sallar-wasm-demo-compressed.mp4"
    type="video/webm" />
</amp-video>

</AmpContent>

<NonAmpContent>

<video controls="controls">
  <source src="https://cdn.auth0.com/blog/angular-finland/sallar-wasm-demo-compressed.mp4">
</video>

</NonAmpContent>

You can also play a [deployed version](https://sallar.github.io/ng-game-of-life/) of the game! *Hint: you can command-click and shift-click while the game is running to shoot gliders and spaceships!*

<include src="TweetQuote" quoteText="I'm reading about @sallar's amazing WASM demo with @rustlang and @angular at @AngularFI!"/>

Next, **[Stanimira Vlaeva](https://twitter.com/StanimiraVlaeva)** gave a talk called “Frictionless Breaking Changes Migration with `ng update` and Schematics.” Stanimira is a GDE from Bulgaria, a developer for Progress, and a core team member of NativeScript. We met at [NgAtlanta](https://auth0.com/blog/ngatlanta-is-changing-tech/) this year and it’s been great to get to know her! Her talk was all about using custom schematics to mitigate the risk of updating dependencies. You can [look at her slides](http://bit.ly/update-ng-fi) to see her examples and more resources on schematics.

![Stanimira Vlaeva discussing Angular schematics at Angular Finland conference.](https://images.ctfassets.net/23aumh6u8s0i/5L0SZrzHJ59aaJdXA3kBFd/e8f12308afd61706cfdcae281c48c43e/stanimira-schematics-2)

**[Michael Hladky](https://twitter.com/Michael_Hladky)** wrapped up the day with a presentation titled “The Ease of Using Higher Order Operators.” Michael is a GDE from Austria who does training and consulting. He was originally scheduled to do a different talk, but one of the software providers he used in his presentation was having technical issues. I was super impressed by how quickly Michael was able to swap out his talk! He went over the nuts and bolts of several RxJS operators and you can [view his slides](https://docs.google.com/presentation/d/1N26PPQmsUaZUnSGMMiRuPdc9GxNMS2Eij8qqKSx4OhI/edit#slide=id.g5053e61ac8_0_1315) to see all of helpful diagrams and animations. If you’ve been following Michael lately, he’s been devoting a lot of his time to the RxJS ecosystem, particularly to the [marble diagram design system](http://bit.ly/marble-design-system). He’s producing a lot of fantastic content for the RxJS community.

![Michael Hladky talking about RxJS operators at Angular Finland conference.](https://images.ctfassets.net/23aumh6u8s0i/6wCzah5VnGEuz8nygebCag/539bfd1a1b9b8ef5e5c1406bcb5f474d/michael-hladky)
([Source](https://twitter.com/AngularFI/status/1106613728114556929))

After the event, we were bussed over to the Gofore office for a very fun, very low-key after party with good food, good beer, and great conversation. I really appreciated how chill the whole day was. I am often exhausted after American conferences due to how intense and involved they are (even if they’re a lot of fun). Hanging out with the Finns was very laid back and not at all stressful!

## Conclusion
The Big Hangout was a small but very well-run and enjoyable conference. I had a great time getting to know friends in the Angular Finland community and hearing about what they’re currently working on. My favorite thing was how international the group was &mdash; I got to make new friends who were not only native Finns, but who also had moved from Turkey, Iran, Bangladesh, India, and more. The global Angular community truly amazes me!

<include src="asides/AboutAuth0" />


Angular Finland: The Big Hangout

Learn how to create workspaces, generate code, run tasks, and install extensions with Angular Console.


**TL;DR:** In this article, we’ll explore Angular Console. Angular Console is a desktop application that provides a graphical UI for the Angular CLI. It is packed with features like code generation, task running, and a simple interface for installing CLI extensions like schematics. Angular Console is a great tool for Angular developers of all skill levels!

There’s often a bizarre prejudice in programming against graphical UIs in favor of the command line. Maybe it’s because of 80’s hacker movies, but it’s never made sense to me. A GUI is just a layer of abstraction. The computer gets the same commands whether you’re clicking on some buttons or furiously typing green text into a black screen.

[Angular Console](https://angularconsole.com/) is a great reason to reconsider that bias. It’s a desktop application developed by [Nrwl](https://nrwl.io/) that provides a graphical UI for the Angular CLI. Nrwl is a software development consultancy that specializes in creating high-quality enterprise software. They’re also great at giving back to the Angular Community.  Angular Console is packed with features like code generation, task running, and a simple interface for installing CLI extensions like schematics.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Do you enjoy a visual UI when building/serving <a href="https://twitter.com/angular?ref_src=twsrc%5Etfw">@Angular</a> apps? I tried the brand new Angular Console from <a href="https://twitter.com/nrwl_io?ref_src=twsrc%5Etfw">@nrwl_io</a> and it&#39;s looking good! <br><br>See it below 📽️<a href="https://t.co/GetJg4ELsw">https://t.co/GetJg4ELsw</a> <a href="https://t.co/DnahCmUJsJ">pic.twitter.com/DnahCmUJsJ</a></p>&mdash; John Papa (@John_Papa) <a href="https://twitter.com/John_Papa/status/1028319375835758593?ref_src=twsrc%5Etfw">August 11, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Who is Angular Console for?
When the team at Nrwl announced Angular Console,  a lot of people shared a similar reaction. Sure, a GUI is fine for *beginners* (probably said with a sneer), but not the *Advanced Super Users*. I’m here to tell you that Angular Console is incredibly helpful for Angular developers across the experience spectrum.

<include src="TweetQuote" quoteText="Angular Console by @nrwl_io is helpful for @angular devs of all experience levels."/>

### It’s fantastic for new Angular friends
Okay, yes, let’s get this out there: Angular Console is great for folks new to Angular. Learning Angular can be tough, even with prior programming experience. Suddenly, you’re thrown into a world of TypeScript and RxJS observables on top of all of the normal front end development concerns.  The [Angular CLI](https://angular.io/cli) is a lifesaver, but even that has a learning curve. The CLI has a specific syntax to learn, as well as all of the different commands needed to build applications. I don’t know about you, but the faster I can get up and running with a new framework, the more likely I am to stick with it.

Angular Console helps reduce the tooling friction of learning Angular to practically nothing. In just a few clicks, you can have a shiny new Angular application and open it in your favorite editor. You can then run CLI commands to generate things like components and services straight from Angular Console. You can even run and serve your app with a few clicks!

### It’s a lifesaver for experienced Angular developers
Do you remember (without looking!) the command to use the NgRx schematics to generate a new action, but to use a flat directory structure and group all actions within one folder? How about the command to add a directive to a specific module while giving it a custom prefix?

Neither do I, at least not from memory. It’s the same reason I have to look up `git rebase` syntax nearly every time: I have more important things to worry about than memorizing a zillion commands!

In psychology, this is called being a [cognitive miser](https://en.wikipedia.org/wiki/Cognitive_miser). We humans prefer simplicity over complexity when it comes to processes and problem-solving. We can improve our ability to solve problems and finish tasks by reducing unnecessary complexity.

Angular Console helps reduce your cognitive overhead by providing a simple interface for generating code that includes live updating of CLI command output.

Here’s a screenshot of that command I mentioned to add a directive with a custom prefix to a specific module:

![Generating a directive with Angular Console.](https://images.ctfassets.net/23aumh6u8s0i/2dKRfnSdhAPaKy0l9OK0RN/2abf53d5d47cdfec092ecafb58961e43/ac-gen-directive-2)

Note that I didn’t have to remember the name of the project, the path to the module, or the command to use a custom prefix. Angular Console handled all of that for me while showing me what it was doing under the hood. This becomes even more useful as your applications get larger, especially when trying to keep track of multiple projects and modules.

Angular Console also lets you quickly and easily add  CLI extensions and schematics to your applications.  There’s no more looking up exactly which package you need to install. If you want to add [Angular Material](https://material.angular.io/), [Ionic](https://ionicframework.com/), [NativeScript](https://www.nativescript.org/), or many others to your application, you can simply choose from a list and click “Add.” You’ll learn more about that in just a minute.

Naturally, the [Nx schematics](https://nrwl.io/nx/what-is-nx) from Nrwl are tightly integrated into Angular Console. Nx schematics unlock all kinds of essential tools for enterprise developers, like the monorepo pattern, built-in support for testing with Jest and Cypress, and an incredible suite of scripts (like the ability to generate a dependency graph). Nx is definitely a power tool for the advanced user and Angular Console lets you wield it with ease and grace.

## A Tour through Angular Console
Now that you know *why* Angular Console is so helpful, why don’t you take it for a test drive?

### How to Install Angular Console
You’ll first need to head over to the [Angular Console site](https://angularconsole.com/#download) to download and install it. It’s available as a desktop app for Mac, Windows, and Linux (the Linux app is still experimental), as well as an [extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console). The requirements for running Angular Console are the same as running the Angular CLI, so you’ll need to [download and install Node](https://nodejs.org/en/) first.

> Note: For this tour through Angular Console, I'll be using the dekstop version. The UI for the Visual Studio Code extension is a bit different, but all of the functionality is still there.

![AngularConsole.com desktop app download options](https://images.ctfassets.net/23aumh6u8s0i/78OTGmjvEC5SEgdbLELEUz/7c691bbb3ac7e5bf1cc2fc44d94ab44a/ac-download-window)

### How to Create a Project with Angular Console
Once you’ve got Angular Console installed, open it up. You’ll see a welcome screen that lets you choose between creating a new Angular workspace or opening an existing one.

![The Angular Console welcome screen - create a project.](https://images.ctfassets.net/23aumh6u8s0i/6j8uEp5XUH3FG9N1ScIl2a/efb585eaccffb24c20409c2fda020e0e/ac-get-started-2)

Click the create button. Select the parent directory you want to use and give a name to your new workspace (you can name it whatever you’d like). Angular Console will show you the path where your new workspace will live once it’s created.

![Angular Console - Select a parent directory and give your workspace a name.](https://images.ctfassets.net/23aumh6u8s0i/2nDW40KJC9l8nRoRFPS1ob/934f7041ba2bc4dd366549ab76814c49/ac-name-new-workspace)

Click on step 3, “Choose a schematic set.” Here, Angular Console gives you the option to use either the default Angular schematics or Nrwl’s Nx schematics. As mentioned earlier, the Nx schematics create a monorepo and allow for some great other options for enterprise developers. For now, let’s keep things simple. Choose the default schematics.

![Angular Console workspace - Choose the default schematics and click Create.](https://images.ctfassets.net/23aumh6u8s0i/2aH2CDRyFYb1wS2tSasEJE/64a4b45d576664f1e3bfe944d4c162b7/ac-create-workspace-schematics-2)

There's also an optional step 4, "Set schematic options." This includes options to skip the initial dependency installation, initialization of a git repostory, and many others.

You can keep it simple right now, though. Skip all of those and just click "Create."

You’ll see a bunch of output from the command line as the Angular CLI generates the application and runs `npm install` for you. Once that’s done, Angular Console will open the workspace for you.

![Angular Console project automatically opens the workspace after setup.](https://images.ctfassets.net/23aumh6u8s0i/3OshHgPs2TNOWvk7oxLmoY/37b440545cd44c750e9d579f2550a132/ac-workspace-created-2)

If you click on the bar at the bottom (called the "action bar"), it will slide out as a bottom sheet and show you all of the command line output for running `ng new` to set up your workspace. This bar will appear any time you run a task. You can click on it to look at the output and then click the trash can icon to dismiss it.

In doing research for this article, I learned a couple of neat things about the action bar. I interviewed Nrwl engineer Dan Muller about Angular Console and it turns out this is his favorite feature in the app. Dan and his best friend [Cindy](https://twitter.com/czengg) were traveling together while they brainstormed on how to make this feature amazing. The action bar actually caches the last five tasks you ran. In addition to dismissing the output, there’s also a button that lets you re-run these tasks. Here’s an example from another project I have open:

![Angular Console application listing up to five prior tasks.](https://images.ctfassets.net/23aumh6u8s0i/4MngwN18OAMfMeQoCJJCu8/69b709c56c1111f950290efae9175c17/ac-task-sheet-2)

Dan also put a lot of love into the UI design of this feature, like how the icons change if the task failed or was successful. The Angular Material library has no built-in bottom sheet, so he created it from scratch. You can really tell that Nrwl put a lot of care and attention into Angular Console, which developers like me really appreciate.

Okay, your new workspace is ready to go! Let’s look at how to use Angular Console.

### Angular Console basics
Looking at the open project, you’ll notice a hamburger menu button in the upper left corner. That button takes you back to a list of workspaces, where you can also create or open a new workspace.

Below the main title bar, you’ll see a filter bar and a sorting button to organize projects. Of course, this brand new application only contains the main project and its `e2e` folder, so those aren’t terribly useful yet.

Below the filter and sorting bar, you’ll notice that there are a few buttons. To the right of the name of the main application, you’ll see buttons for “Serve,” “Test,” “Build,” and “Generate Component.” To the right of the end-to-end project name, you’ll see an “E2E” button. These buttons correspond to Angular CLI commands or `npm` scripts.

<include src="TweetQuote" quoteText="Angular Console can generate code, run tasks, and install extensions."/>

The left toolbar is home to all of the core functionality of Angular Console.

![The Angular Console app UI has buttons to get to a list of projects, code generation, task running, and extension installation.](https://images.ctfassets.net/23aumh6u8s0i/44AUZ7tT8SzdpR5Q33fLnf/afa7a84379ed550e9d7333233c416f3d/ac-toolbar-2)

The top list button you takes back to the list of projects in the open workspace (where you are now). The bottom gear button takes you to the settings screen. The chat bubble icon is where you can access [Nrwl Connect](https://nrwl.io/connect), which is Nrwl’s premium support service. Nrwl Connect also unlocks some additional features in Angular Console.

The other three buttons are for generating code, running tasks, and installing extensions. Let’s step through each of these.

### Generate code
You can use Angular Console to generate code in projects by clicking on the brackets icon in the left toolbar.  This screen lists all available schematics, which you can also filter by name.

![The Generate Code screen in Angular Console.](https://images.ctfassets.net/23aumh6u8s0i/7HQZxs1tK64c8wwquMMXbQ/7d73963ffda705e193b6f6d9b4a29d8d/ac-code-gen-2)

To try this, click on `component` under the standard `@schematics/angular` package. You’ll see a new screen with two sections: “Important fields” and “Optional fields.” You'll also see a collapsible bottom pane with a button that toggles between structured output or console output. The console output shows the `generate` command using the `--dry-run` flag and updates as you change options (so cool!). You can also hide this pane at any time with the caret button to the right.

![Generating a component with Angular Console.](https://images.ctfassets.net/23aumh6u8s0i/6S4njbgc6tA4GxcIgUaoqQ/dbf71cba5e147f07b4671e82af193ef6/ac-create-component-2)

You’ll probably stick with the “Important fields” most of the time, but the “Optional fields” are where power users of the CLI will benefit. It can be tough to remember all of those extra flags and options. Angular Console’s live updating of the dry run output is extremely useful, too. Sometimes I just use Angular Console as a staging area for the commands I want to run and then copy and paste them into my terminal.

To generate a component from this screen, fill out a name and select the main project (not the `e2e` one). You can leave everything else with the default values, but feel free to experiment to see how the console output changes. When you’re ready, click “Generate” in the upper right corner. You’ll see the command change to drop the dry run and execute in the console. If you toggle the bottom pane to “Structured Output,” you’ll see that the task completed successfully.

![Successful component generation in Angular Console.](https://images.ctfassets.net/23aumh6u8s0i/2kJczWnhQd8KYALcNd67Ua/95aaf22148d5cd6c31038a0ed4f28dcf/ac-component-successful-2)

Click the “X” in the upper left corner to return to the code generation screen. The task output is still available to you from the action bar you saw earlier.

### Run tasks
Code generation is really awesome, but it’s only one of the features of Angular Console. You can also use Angular Console to run tasks. Click on the terminal icon in the left toolbar to get started. You’ll see a list of `package.json` scripts, as well as tasks related to the main project and the `e2e` project. You can also filter by name like on the other screens.

![The task runner screen in Angular Console.](https://images.ctfassets.net/23aumh6u8s0i/6pHBc9DJ3m08JwVUerkgGb/fc732f0a4b75c63175c0132cb4894ef0/ac-task-runner-2)

Search for “serve” and click on the task under the main project you created. You’ll see a screen similar to the one you saw when generating code. The familiar “Important fields” and “Optional fields” will be present, as well as the output pane.  You’ll also see radio buttons for the `serve` task to either run with the default or production configuration.

![The individual task screen in Angular Console.](https://images.ctfassets.net/23aumh6u8s0i/5aKvIyOvQPn0NUwz4MlyrG/a0efce6e1b3021d6272be2ab166f74f7/ac-serve-task-2)

Just as with the code generation screen, you’ll most likely stick with the standard fields as you get started. That being said, there are a wealth of options just for the `serve` command, like the port, the host, SSL settings, and settings specific to the underlying Webpack build. When you run `ng serve` or its cousin `ng build` from the terminal, you may not realize just how much granular control you can have on the CLI build. Having a UI really helps with that.

Once you’ve got the settings how you want them, click the “Run” button in the upper right corner. You’ll see the successful Console Output, as well as some new information from the Structured Output. You can click on the provided link to view your application in the browser at `localhost:4200`. If you make changes to your code, Angular Console will also let you know when the application rebuilds.

![The task output of the serve command.](https://images.ctfassets.net/23aumh6u8s0i/78TOtC2e192hD3qdSfMOVU/d20071673753b77ceac84655d83c506d/ac-serve-output)

Click the “X” in the upper left corner to return to the task runner screen. The task is again available to you from the action bar. This time, since the server is in watch mode, you’ll see the spinning progress circle inside of a button on the left side. You can stop the `serve` task any time by clicking that button.

### Install extensions
Last but not least, Angular Console features an easy way to install other extensions and schematics packages in your workspace. Click on the puzzle piece in the left toolbar to go to the extensions screen. You’ll see a long list of available extensions from the Angular team, outside companies, and members of the community. Whether you need to add state management, a UI library, or mobile support, you can search through the list and install the package you need with ease. You can also install Nrwl’s Nx schematics to convert your default CLI workspace into an Nx workspace.

![Angular Console extensions screen.](https://images.ctfassets.net/23aumh6u8s0i/eqthXndlrMiNUwSqdXru7/4da0bf84daef618ba3fa28672aeb79fe/ac-extensions-list)

To try this out, search for “material” and click on the `@angular/material` package. You’ll see the familiar UI, but without any additional options.

![The screen to add Angular Material.](https://images.ctfassets.net/23aumh6u8s0i/1XZaZH25iEcoeNXgi53i48/7da6ad5110208ba854beb304ea43f5c0/ac-add-material-2)

Click the “Add” button in the upper right corner. You’ll see the installation output in the console, as well as “Task completed successfully” in the Structured Output.

![Angular Material was added successfully!](https://images.ctfassets.net/23aumh6u8s0i/2viRdtqnyE5QFsgnbprt11/58ff2fdc2a380c10de5963c285164dc6/ac-add-material-successful-2)

Clicking on the “X” in the upper left corner will take you back to the extension installation screen. You’ll also see your completed task added to the bottom task list. You can clear that list any time by clicking on the bar to pop out the bottom sheet and clicking the trash can button. Note that clearing out the list will also stop any running tasks like `ng serve`.

If you install extensions that include CLI schematics, such as Nx or NgRx, you'll also see new tasks available from the Task Runner screen.

## Conclusion
I hope this tour of Angular Console has given you some ideas of how it can be useful to you. If you’re new to Angular, I hope Angular Console will become a great learning tool that helps you get up and running quickly with Angular. If you’re experienced with Angular, I hope you’ll see it as a timesaver and a cheatsheet for CLI commands. If you can’t stand GUIs and want to stick to the command line, that’s okay too. Whatever you choose, happy coding everyone!

*Special thanks to [Dan Muller](https://github.com/mrmeku) from Nrwl for  talking through some of the features and engineering decisions of Angular Console with me. Dan can be reached at [dan@nrwl.io](mailto:dan@nrwl.io).*

<include src="asides/Angular" />


A Tour of Angular Console

Learn how to create apps, libs, and custom workspace schematics with the enterprise Angular tool Nx.

Create Your First Custom Angular CLI Schematic with Nx

Auth0's Sam Julien had the opportunity to speak at AngularConnect 2018 in London.


**TL;DR:** In this post, we take a look at a few of the can't-miss talks from [AngularConnect 2018](http://www.angularconnect.com/), covering topics like Ivy, Bazel, and why you might not need NgRx after all.

I had the incredible opportunity this year to speak at [AngularConnect 2018](http://www.angularconnect.com/), held November 6-7 at ExCel London.

![AngularConnect Day One Opening](https://images.ctfassets.net/23aumh6u8s0i/hYaUzjJNQqND5cb4m15m5/1933125ab1170ff2291f4ecd38292bef/connect-opening)
[Source - Photo by Drew McLellan](https://www.flickr.com/photos/whiteoctevents/45244428804/in/album-72157697939547280/)

This conference was organized by [White October Events](https://www.whiteoctoberevents.co.uk/) and was amazingly well run.  Both as a speaker and as an attendee, I was blown away by how great this conference was. There was excellent content, an emphasis on giving back to the community, and mindfulness towards accessibility like live-captioning of every talk. On top of all that, the logistics for speakers were flawless. My only complaint is that I couldn’t clone myself to watch all of the talks&mdash;I can’t recommend this conference enough!

This year’s AngularConnect featured two main tracks, as well as mini-workshops, office hours, and Q&A panels on subjects like AngularJS migration, UI, tooling, and architecture. All of the talks from the two main tracks were streamed live and recorded and [all of the videos have been uploaded](https://www.youtube.com/watch?v=rbFLorQWlOQ&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl).

<br/>
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">2 days of amazing talks with an amazing community <a href="https://twitter.com/AngularConnect?ref_src=twsrc%5Etfw">@AngularConnect</a> 😀 <a href="https://twitter.com/hashtag/AngularConnect?src=hash&amp;ref_src=twsrc%5Etfw">#AngularConnect</a> <a href="https://twitter.com/hashtag/Frontend?src=hash&amp;ref_src=twsrc%5Etfw">#Frontend</a> <a href="https://twitter.com/hashtag/evtech?src=hash&amp;ref_src=twsrc%5Etfw">#evtech</a> <a href="https://t.co/glfQ9JlbFG">pic.twitter.com/glfQ9JlbFG</a></p>&mdash; Hassen Hichri (@Hassen91Hassen) <a href="https://twitter.com/Hassen91Hassen/status/1060491046528933888?ref_src=twsrc%5Etfw">November 8, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Highlights from AngularConnect
Let’s look at some highlights from the conference and some talks you definitely don’t want to miss.

### The Keynote
Since [AngularMix](https://auth0.com/blog/top-takeaways-from-angularmix-2018/) was just a few weeks prior to AngularConnect, most of the themes of the conference were the same. Angular team lead [Igor Minar](https://twitter.com/IgorMinar) gave the [Day One Keynote](https://www.youtube.com/watch?v=rbFLorQWlOQ&index=1&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl) and it covered much of the same ground as Brad Green’s keynote in Orlando at AngularMix. Igor talked about the history of Angular from when he joined Google, the current community efforts, and what’s happening right now in the Angular ecosystem. His keynote really set the stage for the rest of the talks in the conference, highlighting Ivy, Bazel, Angular Elements, and other tools in the Angular ecosystem like the [Material CDK](https://material.angular.io/cdk/categories). Check out [Igor’s slides](http://g.co/ng/ac2018) for more.

![Igor Minar delivering the opening Keynote at AngularConnect](https://images.ctfassets.net/23aumh6u8s0i/5yaJj5ZPLw16J7FBxCsF86/da9d28ad0856da0d127a7270f15970f6/igor-minar)
[Source - Photo by Drew McLellan](https://www.flickr.com/photos/whiteoctevents/45056872205/in/album-72157697939547280/)

<include src="TweetQuote" quoteText="We are trying to create excellent interactions in the @angular community. - @igorminar @angularconnect"/>

### All About Ivy
Perhaps the number one buzzword these days in the Angular community is “Ivy.” Ivy is the eagerly anticipated new render engine that will be faster and produce smaller builds due to its use of tree-shaking. Only the parts of Angular you use will be shipped to the browser! At AngularConnect, there were two really awesome talks about Ivy given by folks from Google:

* Google engineer [Alex Rickabaugh](http://twitter.com/synalx) opened day two of AngularConnect with  his fascinating talk about [The Theory of Angular Ivy](https://www.youtube.com/watch?v=isb5Ef6yI48&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl&index=2).  Alex talked about how Ivy’s overarching purpose is to simplify compilation, deployment, and managing dependencies. To illustrate this, Alex walked us through how the same application gets compiled with the Angular 2.0 renderer, the Angular 4+ View Engine, and Ivy. You definitely want to see this one!

![Alex Rickabaugh talking about Ivy](https://images.ctfassets.net/23aumh6u8s0i/5h7c6CkEDBO94RRbVUk6ir/33cf9c39880c1809eb57703bc5c949ba/alex-rickabaugh)
[Source - Photo by Drew McLellan](https://www.flickr.com/photos/whiteoctevents/45986219891/in/album-72157697939547280/)

* After Alex, Google engineer [Jason Aden](http://twitter.com/jasonaden1) showed us [Angular Ivy by Example](https://www.youtube.com/watch?v=MMPl9wHzmS4&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl&index=24). Jason dove right into debugging and coding with Ivy, demonstrating the simpler stack traces and new debugging APIs. He also demonstrated changes to dynamic components, lazy loading, and routing due to Ivy that look really awesome.

### A Bit of Bazel
[Martin Probst](https://twitter.com/martin_probst), another software engineer at Google, gave a really fascinating talk about [Why You Should Use Bazel](https://www.youtube.com/watch?v=Qb3tykleV_g&index=28&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl). I learned a lot about Bazel from this talk, especially what makes Bazel different from other bundlers or task runners. For example, in one of Martin’s [slides](https://docs.google.com/presentation/d/1Q0S4ee49PoEoIxRydp3JgIdfAnGanbPCuMTJuz37Nk0/preview?slide=id.g26d86d3325_0_0), he notes that builds in Bazel are pure functions. They have no side effects and only depend on their inputs. This makes Bazel builds not only easier to analyze, but also easier to debug and run in parallel. This was a great talk for folks who want to dig a little deeper into Bazel.

![Bazel builds are functional.](https://images.ctfassets.net/23aumh6u8s0i/7IY4WBwaEx3SWkIprJOn2e/ede13340122359431d9b52e944704cab/bazel-builds)
[Source](https://docs.google.com/presentation/d/1Q0S4ee49PoEoIxRydp3JgIdfAnGanbPCuMTJuz37Nk0/preview?slide=id.g44208fb040_5_55)

<include src="TweetQuote" quoteText="With Bazel, builds are functional and thus easy to analyze and debug."/>

### More on Migration
With [Pete Bacon Darwin](https://twitter.com/petebd), who created the [ngUpgrade library](https://github.com/angular/angular/tree/master/packages/upgrade), as one of the conference organizers, it makes sense that migration from AngularJS to Angular was a big focus at this year’s AngularConnect. There’s still a ton of legacy AngularJS code out there and the Angular community wants to be sure those folks feel supported in their migration. There were three main talks on migration:

- I gave a talk the first day about [How to Save Time and Money by Planning Your ngUpgrade](https://www.youtube.com/watch?v=495KHr966e0&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl&index=32). I went over the four main migration strategies and walked the audience through helping two fictional companies decide which path makes the most sense for them. These example companies were based on my own experiences, as well as answering questions from the students of [my ngUpgrade course](http://www.upgradingangularjs.com). Check out [my slides](http://www.upgradingangularjs.com/angularconnect) for more resources.
- Later on the first day, [Erin Coughlan](https://twitter.com/ErinCoughlan16) gave a fascinating talk on [Upgrading to Angular without ngUpgrade](https://www.youtube.com/watch?v=aXOYa4S96OM&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl&index=31). Erin is a front end engineer at Google and her talk focused on using Angular Elements to migrate from AngularJS. She created a really useful library called [create-ng1-wrapper](https://github.com/ErinCoughlan/create-ng1-wrapper) and demonstrated how to use it with Angular Elements.
- On the second day, [Elana Olson](https://twitter.com/elanathellama) went further in depth on the four recommended paths for [Migrating from AngularJS to Angular](https://www.youtube.com/watch?v=fFLKEtIqZeY&index=23&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl). She also talked about some amazing tools she’s created through her internship with Google, including the [ngMigration Assistant](https://github.com/ellamaolson/ngMigration-Assistant) and the [ngMigration Forum and Wiki](https://github.com/angular/ngMigration-Forum/wiki).

![Elana Olson discussing ngMigration Assistant](https://images.ctfassets.net/23aumh6u8s0i/6J2YLXqaOxX5cWq1vLLFj4/81fbbbdc8993a580185639dbdefc6df3/elana-olson)
[Source - Photo by Drew McLellan](https://www.flickr.com/photos/whiteoctevents/45074320625/in/album-72157697939547280/)

In addition to these talks, there was also an upgrade panel and office hours with Elana, Erin, and myself.

## Even More Talks You Don’t Want to Miss
I wish I could highlight every single talk and workshop at AngularConnect — there were so many great ones! Here are a few more you need to be sure to watch (but really, just watch all of them):

- With NgRx feeling omnipresent these days, it’s easy to feel like you’re doing something wrong by not using it in your Angular project. Luckily, Mr. NgRx himself, [Mike Ryan](https://twitter.com/MikeRyanDev), gave a fantastic talk this year on why [You Might Not Need NgRx](https://www.youtube.com/watch?v=omnwu_etHTY&index=30&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl). Mike covers the use cases for when it’s a great idea to use NgRx and when you’re better off managing state on your own.
- [Max Koretskyi](https://twitter.com/maxim_koretskyi) has quickly made a name for himself as the go-to person for [in-depth breakdowns of source code](http://www.angularindepth.com). In his phenomenal talk [Optimize and Debug Change Detection Like a Pro](https://www.youtube.com/watch?v=DsBy9O0c6eo&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl&index=17), Max explains why the infamous `ExpressionChangedAfterItHasBeenCheckedError` happens, how change detection really works, and how you can debug it yourself. Excellent work from Max, as always!
- One exceptionally effective talk this year came from [Uri Shaked](https://twitter.com/UriShaked) and [Kapunahele Wong](https://twitter.com/kapunahele). Their talk [Climbing up Injector Trees](https://www.youtube.com/watch?v=F6rF16TmB0E&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl&index=40) explored dependency injection through lots of live-coding. Their ability to break down a complex subject with simple examples was just amazing.

![Uri Shaked and Kapunahele Wong talking about dependency injection.](https://images.ctfassets.net/23aumh6u8s0i/3BgvwE1ahbDkh8TUSyNll/7834f7fa5b14d4d5b78528f325c3952a/uri-and-kapunahele)
[Source - Photo by Drew McLellan](https://www.flickr.com/photos/whiteoctevents/45074330685/in/album-72157697939547280/)

- You can’t help but love [Sani Yusuf](https://twitter.com/saniyusuf). He could talk about just about anything and capture an audience, but this year he gave a talk called [Crossing Across Platforms](https://www.youtube.com/watch?v=G39uEEa2hxo&index=7&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl). It was all about how to structure your Angular application to be used on the web, desktop, and mobile with minimal code duplication. You can also check out [Sani’s slides](https://slides.com/saniyusuf/crossing-across-platforms) for reference.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/saniyusuf?ref_src=twsrc%5Etfw">@saniyusuf</a> - I enjoyed your ionic class very much but your “Crossing Across Platforms” was hands down my favorite talk at <a href="https://twitter.com/hashtag/AngularConnect?src=hash&amp;ref_src=twsrc%5Etfw">#AngularConnect</a></p>&mdash; Lisa Copeland (@Lisacope1) <a href="https://twitter.com/Lisacope1/status/1060304729866190848?ref_src=twsrc%5Etfw">November 7, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

- Last but not least, something a bit different. [Jo Pearce](https://twitter.com/jdpearce) gave a fantastic, unique lightning talk called [Speaker Ballads](https://youtu.be/Fd_MkhU3JUU?t=955). These two poems do a wonderful job of capturing what it’s like to be a technical speaker. Don’t forget to check out Jo’s website for the [written poems](https://jopearce.co.uk/poetry/speaker-ballads/).

...And I haven't even talked about [Asim Hussain](https://www.youtube.com/watch?v=_H2NNofisA0&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl&index=29), [Shmuela Jacobs](https://www.youtube.com/watch?v=q2Exs-82tkw&index=15&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl), or [Michael Hladky](https://www.youtube.com/watch?v=S1eDh7MonbI&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl&index=19)! Seriously, just watch all of the talks.

<include src="asides/AboutAuth0" />

## See you next year!
I hope to see you at AngularConnect next year, so save the date: September 19-20, 2019. In the meantime, if you’re looking to become part of the Angular community, check out this great [Angular Conferences site](https://angularconferences.com/). It was built by the team at [Ultimate Courses](https://ultimatecourses.com), especially [Ana Cidre](https://twitter.com/AnaCidre_), who gave a [great talk on component architecture](https://youtu.be/fLNERt19FTs?list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl) with [Sheri List](https://twitter.com/sherrrylst). At the site, you’ll find Angular conferences, meetups, and workshops all over the world. Come join the Angular family!

<br/>
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">We had a ROAR-some time at <a href="https://twitter.com/hashtag/AngularConnect?src=hash&amp;ref_src=twsrc%5Etfw">#AngularConnect</a> 2018 🦖 Catch up on all the action below and get ready for next year!<br><br>📺 Videos: <a href="https://t.co/gIPABaEfAI">https://t.co/gIPABaEfAI</a><br>📸 Photos: <a href="https://t.co/saINRnHuS4">https://t.co/saINRnHuS4</a><br>✉️ Newsletter: <a href="https://t.co/ZaM5ezw3rn">https://t.co/ZaM5ezw3rn</a><br>🗓 19 &amp; 20 September 2019 <a href="https://t.co/poxCyNl72Z">pic.twitter.com/poxCyNl72Z</a></p>&mdash; AngularConnect (@AngularConnect) <a href="https://twitter.com/AngularConnect/status/1065588831783739392?ref_src=twsrc%5Etfw">November 22, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


Must-See Talks from AngularConnect 2018

Auth0's Kim Maida and Sam Julien spoke at AngularMix 2018 in Orlando, Florida. Learn what's new in the Angular ecosystem and what's coming soon.

Top Takeaways from AngularMix 2018

lasse-marting

Lasse Martin Jakobsen

A series that will show you how to develop modern applications with Golang and Angular.

Golang & Angular Series - Part 2: Developing and Securing Angular Apps

Golang & Angular Series - Part 1: Developing and Securing Golang APIs

Learn how to create Angular applications secured by Auth0 using StackBlitz, an online cloud IDE for Angular and React web applications powered by Visual Studio Code.

Create Secure Angular Apps in the Cloud with StackBlitz and Auth0

This series shows how to create a simple, full-stack web application with Angular, TypeScript, and Nest.js. Part 2: Developing frontend Angular apps.

Full-Stack TypeScript Apps - Part 2: Developing Frontend Angular Apps

Learn how to develop modern mobile apps with Angular, Ionic, RxJS and NgRx. Follow this tutorial to create a mobile audio player app.

Building An Audio Player App with Ionic, Angular, RxJS, and NgRx

Learn about upgrading an application from AngularJS to the new Angular. As well as how to upgrade AngularJS authentication strategies to Angular.

Upgrade Your AngularJS Authentication Service

1097492785caf9ffeebffeb624202d8f?s=200 avatar

1097492785caf9ffeebffeb624202d8f?s=200

Prosper is a great speaker, community leader, open source hacker, technical consultant, and a fervent Developer Advocate. He is a full-stack software engineer who has worked on biometric, health and developer tools. Prosper recently co-founded a startup called Eden that’s focused on improving the quality of lives in Nigeria and currently leads the engineering team. He also co-founded forloop, the largest developer community in Africa.

Former Auth0 Employee

Prosper Otemuyiwa

Fresh out the oven is Angular 6. It brings some new features and enhancement to one of the most popular JavaScript frameworks for crafting mobile, desktop and web applications. Learn what's new in Angular!



---

**TL;DR:** In this article, I'll cover the new features in Angular 6 and several other changes and deprecations.

---

Angular is a very popular framework that is actively [maintained by Google](https://developers.google.com/experts/all/technology/angular). Its popularity and wide adoption have been driven by how it keeps evolving and getting better by the day. Angular powers a lot of web platforms such as _Google Adwords_, _Google Fiber_, _Adsense_, and _Winc_.

The previous major Angular version was Angular 5. We covered the [major features and bug fixes that shipped with Angular 5 before](https://auth0.com/blog/whats-new-in-angular5/). Now, we are going to cover the latest major release, Angular 6, which focuses on making Angular smaller and faster to use.

Let's go through the major changes in Angular 6.


## 1. Improved Service Worker Support

Angular 6 now supports the configuration of navigation URLs in Service Workers. The service worker will redirect navigation requests that don't match any `asset` or `data` group to the specified index file.

<include src="TweetQuote" quoteText="Angular 6 now supports configuration of navigation URLs in Service Workers."/>

By default, a navigation request can have any URL except for those containing `__` and URLs containing a file extension (i.e a `.`) in the last path segment. Sometimes it is great to be able to configure different rules for the URLs of navigation requests (e.g. ignore specific URLs and pass them through to the server).

Now, you can specify an optional `navigationUrls` list in `ngsw-config.json`. which contains URLs or simple globs. Only requests whose URLs match any of the positive URLs/patterns and
none of the negative ones (i.e. URLs/patterns starting with `!`) will be
considered navigation requests and handled the right way by the service worker.

Before now, the service worker would enter a degrade mode where only existing clients would be served if either the client or server was offline while trying to fetch `ngsw.json`. In Angular 6, the service worker remains in the current mode until connectivity to the server is restored.

Furthermore, a helper script, `safety-worker.js`, has been added to the service worker package to enable easy deactivation of an existing service worker in production.

_packages/service-worker/safety-worker.js_

```js
self.addEventListener('install', event => { self.skipWaiting(); });

self.addEventListener('activate', event => {
  event.waitUntil(self.clients.claim());
  self.registration.unregister().then(
      () => { console.log('NGSW Safety Worker - unregistered old service worker'); });
});
```

## 2. Goodbye Template Element

The `<template>` element was deprecated long ago, precisely in Angular 4. It has been removed completely in Angular 6.

The `<ng-template>` element should be used instead.

**Before:**

``` html  

  <template>some template content</template>

```

**Now:**

``` html  

  <ng-template>some template content</ng-template>

```

## 3. Better URL Serialization

Before now, there were issues around routes and URL serialization such as this below:

![What's new in Angular 6 - URL Serialization](https://images.ctfassets.net/23aumh6u8s0i/3IBqTAJniLXU1hZBFJz3em/249f3d8e3460446f7475fb2630207abb/urlissues)
_What's new in Angular 6 - URL Serialization_

In Angular 6, issues like the one above have been fixed and:

* URI fragments will now serialize the same as query strings.
* In the URL path, (portion prior to the query string and/or fragment), the plus sign (`+`) and ampersand (`&`) will appear decoded.
* In the URL path, parentheses values (`(` and `)`) will now appear percent-encoded as `%28` and `%29` respectively.
* In the URL path, semicolons will be encoded in their percent encoding `%3B`.

It's also important to know that parentheses and semicolons denoting auxiliary routes will, in any case, show up in their decoded shape except for parentheses and semicolons used as values in a segment or key/value pair for matrix params which will show up encoded.

## 4. Support Added for Custom Elements

This is crazy. When I discovered this, I jumped! Let me explain before you get too excited.

The support is currently experimental and unstable. It's targeted to land and become stable in the Angular 6.x release cycle.

With this support, developers can simply register Angular Components as Custom Elements. Once registered, these components can be used just like built-in HTML elements. They are HTML Elements, so why not?

So, Angular developers can do something like this:


```js

//my-name.ts

import { Component, Input, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';

@Component({
  selector: 'my-name',
  template: `<h1>Hello my name is {{name}}</h1>`
})

export class MyName {
  @Input() name: string = 'Prosper!';
}

@NgModule({
  declarations: [ MyName ],
  entryComponents: [ MyName ]
})

export class MyNameModule {}

```

```ts
//app.component.ts
import { Component, NgModuleRef } from '@angular/core';
import { createCustomElement } from '@angular/elements';

import { MyName } from './my-name.ngfactory';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  constructor(private injector: Injector, ngModuleRef: NgModuleRef) {
    const ngElementConfig = createCustomElement(MyName, injector);
    customElements.define('my-name', NgElementConfig);
  }
}
```

### 5. Forms Validation in Angular 6

Before now, `ngModelChange` was always emitted before the underlying form control was updated.

If you had a handler for the `ngModelChange` event that checked the value through the control, the old value would be logged instead of the updated value. This is not the case if you pass the value through the `$event` keyword directly.

Check out this example:

_Passing the value through the $event keyword directly_

``` html  

  <input [(ngModel)]="name" (ngModelChange)="onChange($event)">

```

```js
onChange(value) {
   console.log(value); // logs updated value
}
```

_Using a Handler_


``` html  

  <input #modelDir="ngModel" [(ngModel)]="name" (ngModelChange)="onChange(modelDir)">

```

```js
onChange(ngModel: ngModel) {
   console.log(ngModel.value); // logs old value
}
```

In Angular 6, `ngModelChange` is now emitted after the value is updated on its form control.

<include src="TweetQuote" quoteText="In Angular 6, ngModelChange is now emitted after the value is updated on its form control."/>

```js
onChange(ngModel: NgModel) {
   console.log(ngModel.value); // logs updated value
}
```

## 6. Multiple Validators for Form Builder Array

In previous versions of Angular, you could set only one validator on a `FormArray` field with the `FormBuilder.array` method.

In Angular 6, you can set multiple validators with the `FormBuilder.array` method:

```js
...
ngOnInit() {
  this.speakerForm = this.formBuilder.group({
    text: ['', Validators.required],
    options: this.formBuilder.array([], [MyValidators.correctProposalCount, MyValidators.totalProposals])
  });
}
```

## 7. Token Marking for Runtime Animation Context

In Angular 6, it's now possible to determine which animation context is used for a component at runtime. A token is provided as a marker to determine whether the component is running a `BrowserAnimationsModule` or `NoopAnimationsModule` context at runtime.

## 8. Hello Schematics

**Schematics** is a new scaffolding library that's used by the Angular CLI to generate custom templates. The Angular team has always been keen on improving developer productivity, which explains the birth of **schematics**.

With Schematics, you can easily create Angular libraries like so:

First, install the necessary schematic tools:

```bash
npm i -g  ng-lib-schematics  @angular-devkit/core @angular-devkit/schematics-cli
```

Next, create a new `angular-cli` project:

```bash
ng new avengers --skip-install // avengers is the name of the new library I'm trying to create
```

Finally, you can just run `schematics` like so:

```bash
schematics ng-lib-schematics:lib-standalone --name avengers
```

A new `lib` directory will be generated for you inside the `src` folder. The `lib` directory ships with a sample demo and the build tools necessary for a typical Angular package.

Check out this [deep and excellent guide to Schematics](https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2).

## Deprecations and Other Updates

* Angular 6 ships with [Rxjs 6.0.0.](https://github.com/ReactiveX/rxjs)
* `@Injectable` now supports tree-shakeable tokens.
* Service workers now properly handle invalid hashes in all scenarios.
* The router sometimes hits a race condition while a route is being instantiated and a new navigation request arrives. This issue has been solved in Angular 6.
* Avoid overriding `ngInjectableDef` in the decorator if present on the type.

Check out other [Angular 6 updates here](https://github.com/angular/angular/blob/master/CHANGELOG.md).

## Upgrading to Angular 6

The Angular team built an [awesome tool](https://angular-update-guide.firebaseapp.com/) to make upgrading as easy as possible.

![Angular 6 Upgrade](https://images.ctfassets.net/23aumh6u8s0i/6YATIYgiYoEPc8YKmQf71g/08ee8023c2ff4df81ff0758c93a3e4f8/upgrade)
_Angular 6 upgrade tool_

<include src="asides/Angular" />

## Conclusion

**Angular 6** came loaded with new features and significant improvements. Kudos to the Angular team on making Angular faster and better to use.

Have you upgraded to Angular 6 yet? What are your thoughts? Did you notice any significant improvement? Let me know in the comments section! 😊


Angular 6 Release: What’s New?

Learn how to develop applications in AngularJS  using a component-based architecture.

New Features for Developing AngularJS Applications - Part 2: Build An App

Learn how to develop applications in AngularJS using a component-based architecture.



**TL;DR:** AngularJS 1.5+ has undergone major updates. In this article, you'll learn how to develop AngularJS applications using a component-based architecture and leverage the API changes that will help you write your AngularJS applications in an Angular(v2+) style.

The Component-based Architecture is prevalent in frontend development today. JavaScript Client-side frameworks such as React, Preact, Ember, Vue.js all advocate building applications in components. _Angular_ also popularly known as _Angular(v2+)_ which is a major rewrite of AngularJS is completely component-based.

<include src="TweetQuote" quoteText="The Component-based Architecture is prevalent in frontend development today."/>

A typical example of an application built applying the component architecture involves developing several features of the application as modules with reusable components.

For example, let's use a Music Player application. A required feature for this product could be a Music Player widget. A developer designing their app in a component-based architecture style can model this feature as a *Module*.

Let's call it the _Music Player Widget_ Module. Inside the module, we can have the following components:

- _Music Search_ Component, `<music-search>`.
- _Music Playlist_ Component, `<music-playlist>`.
- _Currently Playing Song_ Component, `<music-currently-playing>`.

In a Component-based Architecture, we usually have _Parent_ and _Child_ components. The three individual components mentioned above can be referred to as _Child_ components wrapped up into a big component that will be known as the _Parent Component_ or _Root_ component.

## The AngularJS .component() method

The Angular team introduced the `.component()` method in AngularJS 1.5. This method allows developers to write their applications using the component-based architecture. How do we use the `.component()` ?

Before Angular 1.5, we only had directives, Angular directives such as `ngHide`, `ngHref`, `ngRepeat`, and custom directives.

Directives are a unique and powerful feature that allows you create custom HTML-like tags, specific to your application. In this article, we'll examine a directive, and convert it to a component using the `.component()` method.

<include src="TweetQuote" quoteText="Directives are a unique and powerful feature that allows you create custom HTML-like tags, specific to your application"/>

```js
angular.module('tutorial', [])
  .directive('abacus', function abacus() {
    return {
      scope: {},
      bindToController: {
        count: '='
      },
      controller: function () {
        function increment() {
          this.count++;
        }
        function decrement() {
          this.count--;
        }
        this.increment = increment;
        this.decrement = decrement;
      },
      controllerAs: 'abacus',
      template: `
        <div>
          <input type="text" ng-model="$ctrl.count">
          <button type="button" ng-click="$ctrl.decrement();">-</button>
          <button type="button" ng-click="$ctrl.increment();">+</button>
        </div>
      `
    };
  });
```

The first step in converting the directive to a component is to change `.directive()` to `.component()`.

_directive_

```js
.directive('abacus', function abacus() {
  return {

  };
});
```

_component_

```js
.component('abacus', function abacus() {

});
```

Nice and simple. Essentially the return `{};` statement inside the `.directive()` becomes the Object definition inside `.component()`. Awesome!

## Bindings

In a `.directive()`, the scope property allows us to define whether we want to isolate the `$scope` or inherit it, this has now become a sensible default to always make our directives have isolated scope. So repeating ourselves each time just creates excess boilerplate.

With the introduction of `bindToController`, we can explicitly define which properties we want to pass into our isolate scope and bind directly to the Controller.

With the bindings property on `.component()` we can remove this boilerplate and simply define what we want to pass down to the component, under the assumption that the component will have an isolated scope.

```js
// before
.directive('abacus', function abacus() {
  return {
    scope: {},
    bindToController: {
      count: '='
    }
  };
});

// after
.component('abacus', {
  bindings: {
    count: '='
  }
});
```

## Refactoring Controller Function

Nothing has changed in the way we declare controller, however it’s now a little smarter and has a default `controllerAs` value of `$ctrl`.

If we’re using a controller local to the component, we’ll do this:

```js
  // 1.4
  {
    ...
    controller: function () {}
    ...
  }
```

If we’re using another controller defined elsewhere, we’ll do this:

```js
// 1.4
{
  ...
  controller: 'SomeCtrl'
  ...
}
```

If we want to define `controllerAs` at this stage, we’ll need to create a new property and define the instance alias:

```js
// 1.4
{
  ...
  controller: 'SomeCtrl',
  controllerAs: 'vm'
  ...
}
```

This then allows us to use something like `vm.title` inside our template to talk to the instance of the controller. In AngularJS 1.5, we can do the following inside `.component()`:

```js
// 1.5
{
  ...
  controller: 'SomeCtrl as vm'
  ...
}
```

This helps us minimize our code by preventing the use of `controllerAs` property. However, we can add the `controllerAs` property to maintain backwards compatibility or keep it if that’s within your style for writing directives or components.

There is another option that completely eliminates the need for `controllerAs`, and Angular automatically uses the property, `$ctrl`. For instance:

```js
.component('bet', {
  controller: function () {
    this.betNumber = 777;
  }
});
```

In the code above, there is no `controllerAs` property. In our template, controller defaults to `$ctrl`, so we can get the value of `777` in our template using `$ctrl.betNumber`.

Since there is no need for the `controllerAs` property, we can just have our directive refactored to a component like so:

```js
// before
.directive('abacus', function abacus() {
  return {
    scope: {},
    bindToController: {
      count: '='
    },
    controller: function () {
      function increment() {
        this.count++;
      }
      function decrement() {
        this.count--;
      }
      this.increment = increment;
      this.decrement = decrement;
    },
    controllerAs: 'abacus'
  };
});

// after
.component('abacus', {
  bindings: {
    count: '='
  },
  controller: function () {
    function increment() {
      this.count++;
    }

    function decrement() {
      this.count--;
    }

    this.increment = increment;
    this.decrement = decrement;
  }
});
```

## Templating Changes

Look at the code below, and how the template property is defined.

```js
.component('abacus', {
  bindings: {
    count: '='
  },
  controller: function () {
    function increment() {
      this.count++;
    }
    function decrement() {
      this.count--;
    }
    this.increment = increment;
    this.decrement = decrement;
  },
  template: `
    <div>
      <input type="text" ng-model="$ctrl.count">
      <button type="button" ng-click="$ctrl.decrement();">-</button>
      <button type="button" ng-click="$ctrl.increment();">+</button>
    </div>
  `
});
```

The template property can be defined as a function injected with `$element` and `$attrs` parameters. If the template property is a function then it needs to return a String representing the HTML to compile:

```js
{
  ...
  template: function ($element, $attrs) {
    // access to $element and $attrs
    return `
      <div>
        <input type="text" ng-model="$ctrl.count">
        <button type="button" ng-click="$ctrl.decrement();">-</button>
        <button type="button" ng-click="$ctrl.increment();">+</button>
      </div>
    `
  }
  ...
}
```

## One Way Data Binding

If you have been using AngularJS long enough, you will be accustomed to the two-data way binding it provides. However, in AngularJS 1.5+, there is a new one-way data binding that we can explore and also use to improve the performance of our AngularJS applications.

A new syntax expression for the one-way data binding is the use of `<` notation. For two-way data bindings, the `=` notation is used instead.

```js
{
  ...
  bindings: {
    firstObj: '<',
    secondObj: '='
  },
  ...
}
```

Check out a good example of one-way data binding below:

```js

var sample = {
  bindings: {
    firstObj: '<',
    secondObj: '<'
  },
  template: `
    <div class="section">
      <h4>
        One way Data binding Example
      </h4>
      <p>First Object: {{ $ctrl.firstObj }}</p>
      <p>Second Object: {{ $ctrl.secondObj }}</p>
      <a href="" ng-click="$ctrl.testDataBinding();">
        Change Values
      </a>
    </div>
  `,
  controller: function () {
    this.testDataBinding = function () {
      this.firstObj = 10;
      this.secondObj = {
        maxwell: {
          language: 'PHP',
          name: 'Jack Maxwell'
        }
      };
    };
  }
};

function ExampleController() {
  this.exfirstObj = 99;
  this.exSecondObj = {
    unicodeveloper: {
      language: 'JavaScript',
      name: 'Prosper Otemuyiwa'
    }
  };
  this.testDataBinding = function () {
    this.exfirstObj = 33;
    this.exSecondObj = {
      lesasote: {
        language: 'Scala',
        name: 'Shitta Kalesaso'
      }
    };
  };
}

angular
  .module('app', [])
  .component('sample', sample)
  .controller('ExampleController', ExampleController);

```

``` html  

<div ng-app="app">
  <div ng-controller="ExampleController as example">
    <h3>
      One way data-binding
    </h3>
    <div class="section">
      <h4>
        Parent
      </h4>
      <p>
        First Object: {{ example.exfirstObj }}
      </p>
      <p>
        Second Object: {{ example.exSecondObj }}
      </p>
      <a href="" ng-click="example.testDataBinding();">
        Change Parent Values
      </a>
    </div>
    <sample firstObj="example.exfirstObj" secondObj="example.exSecondObj"></sample>
  </div>
</div>

```

One-way data binding allows changes to propagate down and flow into the component to update it with new data.

## LifeCycle Hooks

Lifecycle hooks shipped alongside the `.component()` method in AngularJS 1.5. These hooks are functions that can be invoked at different stages of a component's life in AngularJS apps. These hooks are:

- **$onInit()**
- **$onChanges()**
- **$onDestroy()**
- **$postLink()**


### $onInit()

The `$onInit()` hook is invoked when controllers have been constructed. It is used for initialization work for controllers. A typical example is populating a table or some form of list once a controller has been loaded.

```js
function MyController() {
  this.$onInit = function () {
    this.players = [{
        "name": "Lionel Messi",
        "club": "Barcelona",
        "jerseyNumber": 10,
        "position": "Forward",
      },
      ...

    ];
  };
}
```

``` html  

  <div ng-repeat="player in players">
    <td>{{ player.name }}</td>
    <td>{{ player.club }}</td>
    <td>{{ player.jerseyNumber }}</td>
    <td>{{ player.position }}</td>
  </div>

```

### $onChanges()

Remember the old way of detecting changes with `$scope.$watch()`. In Angular 1.5, changes can be detected with the `$onChanges()` hook. When building components at one point you will have data coming into your component from an external source e.g parent component. With `$onChanges()`, we can react to this changes and update the child component data effectively.

Before we go ahead into examples it is important for us to understand, how, why and when this hook is called. `$onChanges` hook is called in two scenarios, one being during component initialization, it passes down the initial changes that can be used right away through `isFirstChange` method.

```js
$ctrl.onChanges = function (changes) {
    if (changes.commit) {
        $ctrl.issues = openIssues(changes.commit.currentValue);
        $ctrl.repo = createdRepos(changes.commit.currentValue);
    }
}
```

### $onDestroy()

This hook is called when its containing scope is destroyed. We can use this hook to release external resources, watches and event handlers. This is basically the same as `$scope.on($destroy, fn)` when used in controllers.

```js
function MyController($element) {

  var eventHandler = function () {
    /**
     * Write code here
     */
  };

  /**
   * [$onInit: Attach our eventHandler when the element is clicked]
   */
  this.$onPostLink = function () {
    // When the component DOM has been compiled attach you eventHandler.
  };

  /**
   * [$onDestroy: Destroy the eventHandler once the component is destroyed]
   */
  this.$onDestroy = function () {
    // Destroy all custom events or bindings when the component scope is destroyed.
  };
}
```

When our component is constructed, we attach a click event to the component element that does something to it when clicked, it can be wherever we want let's say show alert box saying I am clicked.

In the duration when this component is active we would be happy to have this event, but when this component is inactive, we don't need this event anymore it has to go. Since this is our custom event and it's not native to Angular, it will not be detached from our app along with the component, but it will be left snooping around for an element which does not exist.

We need to tell Angular through the `$onDestroy` hook that when this component is destroyed, the event should be detached too.

### $postLink()

This hook is called after the controller's element and its children have been linked. When the component elements have been compiled and ready to go, this hook will be fired.

```js
function MyController($element) {
  /**
   * When the element and its child nodes have been compiled
   */

  this.$postLink = function () {
    /**
     * Engineer something epic here
     */
  };

}
```

This hook can help us to implement some functionalities that depend on the component elements to be fully compiled. It is important to note that this is not a complete replacement for DOM manipulation, this functionality should be handled by decorator directives.


## Stateless components

There’s now the ability to create `stateless` components. This is essentially a component with no controller attribute.

```js

var Person = {
  bindings: {
    name: '<',
    age: '<',
    sex: '<'
  },
  template: `
    <div>
      <p>Name: {{ ::$ctrl.name }}</p>
      <p>Age: {{ ::$ctrl.age }}</p>
      <p>Age: {{ ::$ctrl.sex }}</p>
    </div>
  `
};

angular
  .module('app', [])
  .component('person', Person);

```

Use in a html file like so:

``` html  

  <person name="prosper" age="14" sex="male"></person>

```


## Stateful Components

Stateful components are components that perform stateful tasks such as handling form data, making HTTP requests and generally manipulating data. In a stateful component, you can have a controller that loads a list of car items to display from an external service (API).

```js
var CarItems = {
  template: './car.html',
  controller: function($http) {
    var ctrl = this;
    // Initialising the component
    ctrl.$onInit = function() {
      $http.get('/api/carlistings').then(function (data) {
        ctrl.items = data;
      });
    };
  }
};

angular
  .module('app', [])
  .component('carItems', CarItems);
});
```

## Multi-slot Transclusions

In AngularJS, **transclusion** simply allows you to include content from one place into another template. In basic computer science definition, **transclusion** refers to the inclusion of part or all of an electronic document into one or more other documents by reference.

Multi-slot transclusions was one of the features included in Angular 1.5. How does this work? AngularJS 1.5+ allows us define multiple slots. A good case study is trying to create a generic `card` component. Something like:

``` html  

  <card>
    <card-title>Great Title</card-title>
    <card-body>
      This is the body of the card component.
    </card-body>
  </card>

```

In the definition of the `<card>` component, the `<card-title>` and `<card-body>` elements are the transclusion slots that will be present in the component.

```js
app.component('card', {
  template: [
      '<div style="border: 1px solid black;">'
      '<div ng-transclude="title"></div>',
      '<div ng-transclude="body"></div>',
      '</div>'
  ].join(''),
  transclude: {
    title: 'cardTitle',
    body: '?cardBody'
  },
  controller: function() {
    // Render the component as a card
  }
});
```

**Note:** `?` signifies that the slot is optional.


## Conclusion

As we can see, AngularJS applications can be better with these features listed above. Much work has gone in to the project from the team to make it very similar to the way we write Angular apps using the component archictecture.

In the next and final part of this series, we'll build a sample application with AngularJS 1.5+ that harnesses somes of these features. Stay tuned!


New Features for Developing AngularJS Applications - Part 1: Component-Based Architecture

bruno-krebs

I am passionate about developing highly scalable, resilient applications. I love everything from the database, to microservices (Kubernetes, Docker, etc), to the frontend. I find amazing to think about how all pieces work together to provide a fast and pleasurable experience to end users, mainly because they have no clue how complex that "simple" app is.

R&D Content Architect

Bruno Krebs

In this series, you will learn how to create modern web applications with Python, Flask, and Angular.

Using Python, Flask, and Angular to Build Modern Web Apps - Part 3

Using Python, Flask, and Angular to Build Modern Web Apps - Part 2

Using Python, Flask, and Angular to Build Modern Web Apps - Part 1

krti_XnE_400x400

At Auth0 we ❤️ developers. Serving & giving back to the community is one of the most rewarding things we do. We want to empower others to join the mission!

Auth0 Ambassador

ngVikings brought the European Angular communities to Espoo, Finland for two days of networking and learning.



A big part of being an [Auth0 Ambassador](https://auth0.com/ambassador-program) and Evangelist is attending and speaking at conferences all over the world. Our ambassadors attend a very diverse set of events ranging from technology-specific conferences, like [Oracle Code](https://developer.oracle.com/code), to technology agnostic conferences like [CodeMash](http://www.codemash.org/), and everything in between.

The **Conference Recap** series will summarize our experiences at the various conferences we attend, sharing the big news, things we learned, things we liked, and more. We’ll kick the series off with [ngVikings](https://ngvikings.org/).

<AmpContent>

[Watch "ngVikings 2018 &mdash; Highlights"](https://www.youtube.com/watch?v=-wVodWS-9OU)


</AmpContent>

<NonAmpContent>


<iframe width="560" height="315" src="https://www.youtube.com/embed/-wVodWS-9OU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


</NonAmpContent>

## ngVikings 2018

![ngVikings Venue](https://images.ctfassets.net/23aumh6u8s0i/39jPAKVqu8vOejBL7XQTh2/b36446505b50304cdbb11d97532c8903/ng-vikings-2018-stage)

Dubbed as the "main Angular event in the Nordics — and the only traveling Angular conference in the world", ngVikings was a unique two-day conference organized by a coalition of Angular and GDG Meetups from the Nordic countries of Norway, Sweden, Finland, and Denmark. This year, the traveling conference was scheduled to be in Helsinki but found itself in close-by Espoo, Finland and was held at [Aalto University](http://www.aalto.fi/en/).

The conference brought together over 300 developers and speakers from all over the world.

The keynote address was delivered by a core member of the Angular team [Matias Niemelä](https://twitter.com/yearofmoo/) and focused on his journey to Angular, how Angular has evolved over the last five years, and where it’s headed next. [Angular Elements](https://github.com/angular/angular/issues/20891) and the new ngIvy renderer seem really promising additions to the already excellent framework. Watch the keynote here:

<AmpContent>
<amp-youtube
    data-videoid="WahpV6zn8lQ"
    layout="responsive"
    width="480" height="270">
</amp-youtube>

</AmpContent>

<NonAmpContent>

<iframe width="560" height="315" src="https://www.youtube.com/embed/WahpV6zn8lQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</NonAmpContent>

After the keynote, the conference was split into two tracks with each speaker giving a 30-minute presentation. The talks featured at ngVikings focused mainly on Angular 2+ showing best practices, sharing lessons learned, and focusing on the future of the framework. You can view all of the talks [here](https://www.youtube.com/watch?v=WahpV6zn8lQ&index=1&list=PLVI0Ut22uwY4UC1v5fUvi2RIU4R4jPkba), and while all of the talks were great and worth checking out, a few that really stood out for me where:

### Deploying Angular and Node to the Cloud

<AmpContent>
<amp-youtube
    data-videoid="XmpEZN5TCjw"
    layout="responsive"
    width="480" height="270">
</amp-youtube>

</AmpContent>

<NonAmpContent>

<iframe width="560" height="315" src="https://www.youtube.com/embed/XmpEZN5TCjw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</NonAmpContent>

by [John Papa](https://twitter.com/John_Papa)

> Your Angular app is complete! Now it's time to deploy it to the cloud. But how? One key ingredient is determining our goals. Do you want to publish directly from your laptop or through source control and CI/CD? Do you worry that it may work differently on your machine than the cloud? What about locking down versions of node, packages, and OS? Is your head about to explode? We'll explore several good options as we discuss the pros and cons of each including direct deployments, GitHub hooks with CI, and docker. We'll demonstrate how to code, debug, and run docker locally to have confidence that what works locally will work in the cloud. The good news is that tooling has improved to make all of these deployment options within your reach to guide you to successfully deploy your Angular app to the cloud.

### Advanced Angular DI

<AmpContent>
<amp-youtube
    data-videoid="PRRgo6F0cjs"
    layout="responsive"
    width="480" height="270">
</amp-youtube>

</AmpContent>

<NonAmpContent>

<iframe width="560" height="315" src="https://www.youtube.com/embed/PRRgo6F0cjs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</NonAmpContent>

by [Ward Bell](https://twitter.com/wardbell?lang=en)

> You Don’t Know DI? Go beyond Dependency Injection basics. Learn about the two parallel DI hierarchies and which one wins, what happens when you provide the same token twice … when multi is true, what’s the effect of lazy loading, what’s going on in forRoot and forFeature, what’s in a component’s injector, and how to talk to the components in content children when you don’t know their types. It’ll be fast, code-frontal, fun.

### 6 Apps One Codebase with Ionic

<AmpContent>
<amp-youtube
    data-videoid="4bGMXuPM_FI"
    layout="responsive"
    width="480" height="270">
</amp-youtube>

</AmpContent>

<NonAmpContent>

<iframe width="560" height="315" src="https://www.youtube.com/embed/4bGMXuPM_FI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</NonAmpContent>

by [Sani Yusuf](https://twitter.com/saniyusuf)

> You and your team have this great Idea and you have your users using different devices and operating systems to access the same application. Some users are on the Web, some on Mobile some of their Desktop and you also have to worry about what operating system they are on and also have to consider how your application is presented on each device & operating system. What if there was a way to code your app without worrying too much about operating systems/devices/screen sizes and just focusing on getting your idea across to your users regardless. Join me on a journey where I show you how to use Angular, Ionic & the PWA standard to build apps for IOS, Android, Windows, Web, Mac & PC with the same code all using just HTML5.

A big shout out to the organizers including [Maxim Salnikov](https://twitter.com/webmaxru), [Shahrzad (Sherry) Aziminia](https://twitter.com/sherrrylst), [Chris Noring](https://twitter.com/chris_noring), [Jussi Kinnula](https://twitter.com/jussikinnula), and the [rest of the team](https://2018.ngvikings.org/team/) for putting together such a great conference.

## Auth0 at ngVikings 2018

[Ado Kukic](https://ado.xyz), Developer Evangelist at Auth0, was the only Auth0 representative at ngVikings and gave a talk titled “A Token Walks Into a SPA…”, which focused on token-based authentication for single page applications and Angular in specific. You can watch the talk here:

<AmpContent>
<amp-youtube
    data-videoid="EoEOjQhSHNo"
    layout="responsive"
    width="480" height="270">
</amp-youtube>

</AmpContent>

<NonAmpContent>

<iframe width="560" height="315" src="https://www.youtube.com/embed/EoEOjQhSHNo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</NonAmpContent>

The talk covered topics ranging from why you should consider token-based authentication, how JSON Web Tokens actually work, SPA architectures and security considerations they bring with them, and finally how to incorporate token based authentication using various Angular specific features like HTTP Interceptors, Route Guards, and more.

## ngVikings 2019

I am very hopeful that ngVikings makes a return next year, and the official conference website implies it will. Check out the [official site](https://ngvikings.org/) for updates on where the traveling conference is sailing to next!

![Over 300 developers attended ngVikings](https://images.ctfassets.net/23aumh6u8s0i/5ysl15Y4PNwYquLgpU7r3E/0a5ed58058f87f7c08effe5b1057022a/attendees)

If you are interested in learning more about or joining the Auth0 Ambassador program, check out the [Ambassador page on our website](https://auth0.com/ambassador-program).

<include src="asides/AboutAuth0" />


Conference Recap: ngVikings 2018

Angular 5 brings some new features to the popular JavaScript framework for building mobile, desktop and web applications. Learn what's new in Angular!



---

**TL;DR:** Angular is an all-encompassing JavaScript framework that is frequently used by developers all over the world for building web, desktop, and mobile applications. In this article, I'll cover the new features in Angular 5 and several other changes and deprecations.

---

Angular is built and [maintained by Google.](https://developers.google.com/experts/all/technology/angular). It is a platform that combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Web platforms such as _Google Adwords_, _Google Fiber_, _Adsense_, and _Winc_ use Angular to build their user interfaces.

Angular 5 was announced to the world on November 1, 2017. The previous Angular version was 4.4.0. This release focused on making Angular smaller and faster to use. Let's go through the major changes in version 5.

## 1. Http Deprecated, HttpClient Here to Stay

Before version 4.3, the `@angular/http` module was used for making HTTP requests in Angular applications. The Angular team has now deprecated `Http` in version 5. The `HttpClient` API from `@angular/common/http` package that shipped in version 4.3 is now recommended for use in all apps. The `HttpClient` API features include:

* Typed, synchronous response body access, including support for JSON body types.
* JSON is an assumed default and no longer needs to be explicitly parsed.
* Interceptors allow middleware logic to be inserted into the pipeline.
* Immutable request/response objects.
* Progress events for both request upload and response download.
* Post-request verification & flush based testing framework.

```js
import { HttpClientModule } from '@angular/common/http';
```

## 2. Support for Multiple Export Alias in Angular 5

In Angular 5, you can now give multiple names to your components and directives while exporting. Exporting a component with multiple names can help your users migrate without breaking changes.

<include src="TweetQuote" quoteText="Exporting a component with multiple names can help your users migrate without breaking changes."/>


_Example Usage:_

```js
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  exportAs:'dashboard, logBoard'
})
export class AppComponent {
  title = 'app';
}
```

## 3. Internationalized Number, Date, and Currency Pipes

Angular 5 ships with new number, date, and currency pipes that increase standardization across browsers and eliminate the need for i18n polyfills. The pipes rely on the [CLDR](http://cldr.unicode.org) to provide extensive locale support and configurations for any locales you want to support. To use the old pipes, you will have to import the `DeprecatedI18NPipesModule` after the `CommonModule`.

```js
  import { NgModule } from '@angular/core';
  import { CommonModule, DeprecatedI18NPipesModule } from '@angular/common';

  @NgModule({
    imports: [
      CommonModule,
      // import deprecated module after
      DeprecatedI18NPipesModule
    ]
  })
  export class AppModule { }
```

## 4. Improved Decorator Support in Angular 5

Angular 5 now supports expression lowering in decorators for lambdas, and the value of `useValue`, `useFactory`, and `data` in object literals. Furthermore, a lambda can be used instead of a named function like so:

_In Angular 5_

```js
  Component({
    provider: [{provide: 'token', useFactory: () => null}]
  })
  export class MyClass {}
```

_Before Angular 5_

```js
  Component({
    provider: [{provide: 'token', useValue: calculated()}]
  })
  export class MyClass {}
```

## 5. Build Optimization

The Angular team focused on making Angular 5 faster, smaller and easier to use. In Angular 5, production builds created with the Angular CLI will now apply the build optimizer by default. The build optimizer removes Angular decorators from your app's runtime codes thereby reducing the size of your bundle and increasing the boot speed of your application. In addition, the build optimizer removes part of your application that is not needed during runtime via tree-shaking. This action leads to a decreased bundle size, and faster application speed.

<include src="TweetQuote" quoteText="In Angular 5, production builds created with the Angular CLI will now apply the build optimizer by default."/>

## 6. Angular Universal Transfer API

The Angular Universal team has added [Domino](https://github.com/fgnass/domino) to the `platform-server`. This simply means more DOM manipulations can happen out of the box within server-side contexts.

Furthermore, two modules, `ServerTransferStateModule` and `BrowserTransferModule` have   been added to Angular Universal. These modules allow you to generate information as part of your rendering with platform-server and then transfer it to the client side to avoid re-generation of the same information. In summary, it transfers state from the server which means developers do not need to make a second HTTP request once the application makes it to the client.

## 7. Faster Compiler in Angular 5

A lot of improvements have been made to the Angular compiler to make it faster. The Angular compiler now leverages TypeScript transforms. You can take advantage of it by running:

```bash
ng serve --aot
```

[Angular.io](https://angular.io) was used as a case study and the compiler pipeline saved 95% of the build time when an incremental AOT build was performed on it.

> **Note:** TypeScript transforms are a new feature introduced as part of TypeScript 2.3, that allows hooking into the standard TypeScript compilation pipeline.

## 8. Forms Validation in Angular 5

In Angular 5, forms now have the ability to decide when the validity and value of a field or form are updated via on `blur` or on `submit`, instead of every input event.

_Example Usage_

```html

  <input name="nickName" ngModel [ngModelOptions]="{updateOn: 'blur'}">

```

_Another Example_

```html

  <form [ngFormOptions]="{updateOn: 'submit'}">

```

In the case of Reactive forms, you can add the option like so:

```js
ngOnInit() {
  this.newUserForm = this.fb.group({
    userName: ['Bob', { updateOn: 'blur', validators: [Validators.required] }]
  });
}
```

## 9. Animations in Angular 5

In Angular 5, we have two new transition aliases, `:increment` and `:decrement`.

```js
...
animations: [
  trigger('bannerAnimation', [
   transition(":increment", group([
     query(':enter', [
       style({ left: '100%' }),
       animate('0.5s ease-out', style('*'))
     ]),
     query(':leave', [
       animate('0.5s ease-out', style({ left: '-100%' }))
     ])
   ])),
   transition(":decrement", group([
     query(':enter', [
       style({ left: '-100%' }),
       animate('0.5s ease-out', style('*'))
     ]),
     query(':leave', [
       animate('0.5s ease-out', style({ left: '100%' }))
     ])
   ])),
 ])
]
```

Animation queries now support negative limits, in which case elements are matched from the end rather than from the beginning like so:

```js
...
animations: [
 trigger(
   'myAnimation',
   [
     transition(
         '* => go',
         [
           query(
               '.item',
               [
                 style({opacity: 0}),
                 animate('1s', style({opacity: 1})),
               ],
               {limit: -3}),
        ]),
   ]),
]
...
```

## 10. New Router Lifecycle Events in Angular 5

Some new lifecycle events have been added to the router. The events are `GuardsCheckStart`, `ChildActivationStart`, `ActivationStart`, `GuardsCheckEnd`, `ResolveStart`, `ResolveEnd`, `ActivationEnd`, and `ChildActivationEnd`. With these events, developers can track the cycle of the router from the start of running guards through to completion of activation.

Furthermore, you can now configure the router to reload a page when it receives a request to navigate to the same URL.

```js
providers: [
  // ...
  RouterModule.forRoot(routes, {
    onSameUrlNavigation: 'reload'
  })
]
```

## 11. Better Support for Service Workers in Angular 5

In Angular 5, we have better support for service workers via the [@angular/service-worker](https://github.com/angular/angular/tree/master/packages/service-worker) package. The service worker package is a conceptual derivative of the `@angular/service-worker` package that was maintained at [github.com/angular/mobile-toolkit](https://github.com/angular/mobile-toolkit), but has been rewritten to support use-cases across a much wider variety of applications.

> **Note:** Right now you will have to manually integrate the package because it's not fully integrated with the CLI v1.5 yet. It is available as beta in version 1.6 of the CLI.

## Deprecations and Other Updates

* `NgFor` has been removed as it was deprecated since v4. Use `NgForOf` instead. This does not impact the use of `*ngFor` in your templates.
* The compiler option `enableLegacyTemplate` is now disabled by default as the `<template>` element was deprecated since v4. Use `<ng-template>` instead. The option `enableLegacyTemplate` and the `<template>` element will both be removed in Angular v6.
* The method `ngGetContentSelectors()` has been removed as it was deprecated since v4. Use `ComponentFactory.ngContentSelectors` instead.
* `ReflectiveInjector` is now deprecated. Use `Injector.create` as a replacement.
* `NgProbeToken` has been removed from `@angular/platform-browser` as it was deprecated since v4. Import it from `@angular/core` instead.

Check out other [Angular 5 updates here](https://github.com/angular/angular/blob/master/CHANGELOG.md).

## Upgrading to Angular 5

The Angular team built a [nifty tool](https://angular-update-guide.firebaseapp.com/) to make upgrading as easy as possible.

![Angular 5 Upgrade](https://images.ctfassets.net/23aumh6u8s0i/6l3nYaXeqt7ULml8oEfZ5l/1749800324cf32e0b56e710ee7b879d7/upgrade)
_Angular 5 upgrade tool_

<include src="asides/Angular" />

## Conclusion

**Angular 5** came loaded with new features and significant improvements. It is smaller and faster. I am proud of what the Angular team achieved with this release.

Have you switched to Angular 5 yet? What are your thoughts? Did you notice any significant improvement? Let me know in the comments section! 😊


Angular 5 Release: What’s New?

eHk3ciM

I am the Group Manager, Developer Content at Okta, and a Google Developer Expert in Web Technologies and Angular. I'm passionate about identity, authentication, constant learning, and developer communities. As a developer advocate, engineer, mentor, and international speaker, I love learning from and sharing with other inhabitants of the tech space.

Group Manager, Developer Content

Kim Maida

Build an app to learn about the power and flexibility of RxJS in Angular while exploring speech recognition with Web Speech API.

RxJS Advanced Tutorial: Create a Web Speech Service

In this tutorial series, we'll learn how to build a small app with some big concepts. We'll cover reactive programming with [Reactive Extensions (Rx*)](http://reactivex.io/), JS framework component interaction in [Angular](https://angular.io), and speech recognition with the [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API). The completed Madlibs app code can be found at [this GitHub repo](https://github.com/auth0-blog/madlibs).

---

In this part, we will cover the following:

* Introduction to reactive programming with Rx* and observables
* Setting up our Angular app

Let's get started!

## What We'll Learn About

The concepts and tools we'll use and learn about include:

* Component communication in [Angular](https://angular.io) JavaScript framework
* Managing streams with [RxJS](http://reactivex.io/rxjs/) ReactiveX for JavaScript (packaged with Angular)
* [Annyang](https://github.com/TalAter/annyang) library for [Web API Speech Recognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition)
* Accessing a prebuilt [Node API](https://github.com/kmaida/madlibs-api) to generate random words

Let's begin with some core concepts to facilitate the use of these tools.

## Reactive Programming with RxJS and Observables

[Angular](https://angular.io) brought the ReactiveX [RxJS](http://reactivex.io/rxjs/) library to the forefront for JavaScript Single Page Application (SPA) developers. RxJS is packaged with Angular, and while it was unfamiliar to many at first, the concept of reactive programming with _observables_ in JS has gained traction and popularity with increased Angular adoption.

### Observables Are Streams

_Observables_ are a vital part of RxJS and now Angular. When learning about observables, the first concept to reconcile is that observables are _streams_. What does this mean?

Consider an array. An array is a collection of values. With a normal array, you theoretically have the collection of all values available to you from the beginning. Of course, we know this isn't always the case: in fact, it's common practice to _push_ additional values to an array in response to events, or to create new arrays _from_ other arrays with methods like [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), and [reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce). Traditionally, if we do this with a normal array, we need to use _callbacks_ in order to tell our scripting code that the array has a new value.

On the other hand, an observable "stream" represents a _collection over time_. A stream may (or may not) have an initial value, and over time, more values are added to it. We can _subscribe_ to the observable stream to be notified whenever a new value has been added. This is an ideal way to react to collections over time.

<include src="TweetQuote" quoteText="An observable is a stream that represents a collection over time."/>

For example, say we have a shopping cart. Every time a user successfully adds an item to their cart, we then want to run some code. (This code might display a toast with the name of the item, update a count of all items in the cart, update the cart subtotal, etc.) We could do this with a state container such as [Redux](http://redux.js.org/) or [@ngrx/store](https://github.com/ngrx/platform/blob/master/docs/store/README.md), or we could simply use an observable and subscribe to it to react each time a new value is added.

We'll implement several observables in the app that we'll build in this tutorial. To see additional examples right now, look over the [Observables section of the Glossary of Modern JavaScript Concepts](https://auth0.com/blog/glossary-of-modern-javascript-concepts/#observables). You should also check out [Rob Wormald's](https://twitter.com/robwormald) ["Everything is a Stream" slides](http://slides.com/robwormald/everything-is-a-stream) and [presentation](https://www.youtube.com/watch?v=UHI0AzD_WfY).

### Reactive Programming and RxJS

[ReactiveX, or Rx*](http://reactivex.io/rxjs/), is an API for asynchronous programming with observable streams. The JavaScript implementation is [RxJS, which is available on GitHub](https://github.com/reactivex/rxjs). As mentioned, Angular comes packaged with RxJS, so it's to our great advantage to make use of it wherever it might help.

_Reactive programming_, in a nutshell, is based on propagating and responding to incoming events over time in a [declarative](https://auth0.com/blog/glossary-of-modern-javascript-concepts/#imperative-declarative) manner. Observables, which are streams of collections over time, are ideal for this.

<include src="TweetQuote" quoteText="Reactive programming is based on propagating and responding to incoming events over time, declaratively."/>

You can read more about [reactive programming here](https://auth0.com/blog/glossary-of-modern-javascript-concepts/#reactive-programming).

## Web Speech API

The [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) is an in-draft feature that enables the incorporation of voice data into web apps. It's still an [experimental technology](https://dvcs.w3.org/hg/speech-api/raw-file/tip/webspeechapi.html) at the time of writing, however, so cross-browser support is limited.

For our app, we're specifically interested in the [speech recognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition) interface of the Web Speech API. This technology allows the browser to start listening via the user's microphone, assess speech using language and grammar dictionaries, and then execute functionality (as defined by the developer) in response.

At the time of writing, this is [only supported in Chrome](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#Browser_compatibility), so we will build our app with progressive enhancement in mind.

We will use the lightweight [Annyang](https://github.com/TalAter/annyang) JS library to work with speech recognition more easily in our application.

## What We'll Build

We're going to build an [ad libitum](https://en.wikipedia.org/wiki/Ad_libitum) web app inspired by [Mad Libs games](https://en.wikipedia.org/wiki/Mad_Libs)! Our own Madlibs app will have the following features:

* The app requires 5 nouns, 5 verbs, and 5 adjectives to generate a short, silly story.
* Words can be generated automatically through a provided Node [madlibs-api](https://github.com/kmaida/madlibs-api).
* Words can be typed in manually by the user.
* If the user's browser supports it, words can be entered through speech recognition using the computer's microphone.
* The app will then automatically fetch supplemental pronouns and use the user's words to generate and then display the story.

In Chrome, our app will look like this when it's finished:

![Madlibs app with Angular and speech recognition](https://images.ctfassets.net/23aumh6u8s0i/6W07LfYGGUdaJf2NVrcqHu/ad8d56f679900f1ba1d74648054b74c2/final-chrome)

> **Note:** In other browsers that don't support speech recognition, the "Speak to Play" feature will not be displayed. Users will still be able to generate words using the API or type them manually.

Though our Madlibs app is relatively small, it has a lot of features and robust functionality, so we'll build it over a short series of two tutorial articles.

> **Note:** This tutorial moves quickly over the core Angular concepts. It's recommended that you have some experience with Angular before tackling the Madlibs app. You can check out the [Angular Tour of Heroes tutorial](https://angular.io/tutorial) or my [Real-World Angular Series](https://auth0.com/blog/real-world-angular-series-part-1/) to learn about Angular in-depth before beginning this tutorial.

Let's get started!

## Dependencies and Setup

The first thing we need to do is install dependencies. You'll need:

* [Node.js](https://nodejs.org) with npm
* [Angular CLI](https://github.com/angular/angular-cli#installation) - follow the README instructions to install the CLI globally

You should also clone the [madlibs-api](https://github.com/kmaida/madlibs-api) to your local machine. Once installed, you can start the API server by running the following command from the project's root folder:

```bash
$ node server
```

The API will then be accessible in the browser at `http://localhost:8084/api` with the endpoints specified in the [madlibs-api README](https://github.com/kmaida/madlibs-api).

### Create a New Angular Project

We'll use the Angular CLI to generate a new Angular project. In a folder of your choosing, run the following command:

```bash
$ ng new madlibs --style=scss
```

A new Angular project called `madlibs` will be generated with SCSS support. To start the app's server, navigate into the new project folder and run the `serve` command like so:

```bash
$ cd madlibs
$ ng serve
```

The app will run at `http://localhost:4200` and should look something like this in the browser:

![new Angular app works](https://images.ctfassets.net/23aumh6u8s0i/V1G0tbxhMi7gAz04ptRjj/3828aec3fce492ee0bb0545b0a505909/app-works)

### Add Bootstrap and Annyang From CDN

We'll add [Bootstrap](https://v4-alpha.getbootstrap.com/) for CSS styling and [Annyang](https://github.com/TalAter/annyang) for speech recognition using CDNs.

> **Note:** This tutorial uses an alpha version of Bootstrap v4, latest available at the time of writing. If a newer v4 release is available at the time of reading, please feel free to upgrade and make changes as necessary to the CSS in your app.

Open your app's `index.html` file and add the following CDN links to the document `<head>`:

``` html  

<!doctype html>
<html lang="en">
<head>
  ...
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  
  <script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script>
  ...
```

We now have access to Bootstrap's styles and Annyang's Web Speech API helpers in our application. We're ready to start development!

RxJS Advanced Tutorial: Getting Started

RxJS Advanced Tutorial: Use the Madlibs API

9d2e715baab928f5bedb837bfcb70b2b

Gabor Soos

Learn how to test Components in Angular. We will start with writing isolated tests for a component and finish with integration tests for the rendered component.



<div class="alert alert-info alert-icon">
  <i class="icon-budicon-664"></i>
  <strong>Get the "Migrating an Angular 1 App to Angular 2 book" for Free.</strong> Spread the word and <a href="https://auth0.com/e-books/migrating-to-angular2">download it now!</a>
</div>

Components enable us to display content on our website. The Angular compiler parses component templates and
displays them according to the given state. The business logic inside the components can be tested with
traditional unit tests just like services. But what happens with the displayed HTML
from the template and the interaction with other components? In this tutorial I'll show you
how to test the rendered components, starting from isolated unit tests to fully integrated ones.

This article is the third part of a series in which
I share my experiences testing different building blocks of an Angular application.
It relies heavily on Dependency Injection based testing and it is recommended that you read
[the first part](https://auth0.com/blog/angular-2-testing-in-depth-services/)
if you are not familiar with the concepts.

- [Services](https://auth0.com/blog/angular-2-testing-in-depth-services/)
- [HTTP Services](https://auth0.com/blog/angular-testing-in-depth-http-services/)
- Components (this article)
- Pipes
- Routing

### The component we'll test

The component we will test is a login form. It doesn't directly access the Authentication service,
instead it just informs the parent component about the submission through an `Output` property.
The form consists of two fields: an email and a password field.
The email address can be preloaded through an `Input` property
if it is passed down from the wrapping parent component.

<p align="center">
  <img src="https://images.ctfassets.net/23aumh6u8s0i/NefimDEZKVVWDa8hgzpEo/31fbf004d320b3262d4509cda24729a3/login-form" alt="Angular Testing Framework"/>
</p>

The two fields are handled by a reactive form created in the component.
With reactive forms, we can add validation to the fields and access their values without touching the DOM.
I've chosen reactive forms because they are more flexible and easier to test than template-driven forms.
Template-driven forms can only be tested through the DOM, making test writing harder.

If you are not familiar with reactive forms, it is recommended to read
[this part from the official documentation](https://angular.io/docs/ts/latest/guide/reactive-forms.html).

The [`FormBuilder`](https://angular.io/docs/ts/latest/api/forms/index/FormBuilder-class.html)
is created inside the constructor and adds validation to the input fields.
When the `email` input changes, the [`ngOnChanges`](https://angular.io/docs/ts/latest/api/core/index/OnChanges-class.html)
lifecycle hook passes it down to the field.
Setting the value on one of the forms control also updates its value in the HTML input element.

```typescript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'login-form',
  templateUrl: './login-form.template.html'
})
export class LoginFormComponent {

  private loginForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.loginForm = this.formBuilder.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', Validators.required]
    });
  }

  @Input()
  email: string;

  @Output()
  submitted = new EventEmitter();

  ngOnChanges(change) {
    if (change.email) {
      this.loginForm.controls['email'].setValue(change.email.currentValue);
    }
  }

  onSubmit({ email, password }) {
    this.submitted.emit({ email, password });
  }
}
```

The template only includes tags that are necessary for the form to function.
The value of the `formControlName` property will be the reference name
when we access our inputs inside the form controls.
With the `[formGroup]` property, we fire up the form handling with the components `FormGroup` and
listen to form submissions with `(ngSubmit)`.
When we click on the submit button, Angular will catch the event and pass it to the `onSubmit` handler function.

```html
<form (ngSubmit)="onSubmit(loginForm.value)" [formGroup]="loginForm">
    <input type="text" formControlName="email" id="login-email">

    <input type="password" formControlName="password" id="login-password">

    <button type="submit">Log In</button>
</form>
```

### Isolated tests

If we just want to focus on the business logic, we can treat and test the component as a service.
The `Component` decorator extends the `Injectable` decorator, which means it can be created as a service.
We just have to pass the component to the `providers` array in the module dependencies.
When testing in isolation, the template never gets compiled.
It only gets the required dependencies through the constructor.

```typescript
import { LoginFormComponent } from './login-form.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { TestBed, inject, async } from '@angular/core/testing';
import { Component } from '@angular/core';

describe('Isolated', () => {
  let subject: LoginFormComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [LoginFormComponent],
      imports: [FormsModule, ReactiveFormsModule]
    });
  });

  beforeEach(inject([LoginFormComponent], (loginForm: LoginFormComponent) => {
    subject = loginForm;
  }));

  it('should send credentials on submit', () => {
    subject.submitted.subscribe(({ email, password }) => {
      expect(email).toEqual(expectedEmail);
      expect(password).toEqual(expectedPassword);
    });

    subject.onSubmit({ email: expectedEmail, password: expectedPassword });
  });
});
```

The test focuses on the method that is called when the form is submitted.
It only passes the given email and password to the `EventEmitter` after destructuring the input object.
We don't have to pass Jasmine's asynchronous `done` callback to the testcase
because the `EventEmitter` acts synchronously.

Isolated tests are good when you want to focus on the component's logic.
These tests are also much faster than any other solution.
The only downsides are that it won't detect errors in the template
nor check the interactions with other components.

### Shallow tests

If we also want to detect errors inside the template, but still focus on a single component,
shallow tests are the way to go.
The key difference compared to isolated tests is that here the component is compiled.

Inside the `beforeEach` block, the component class moves to the `declarations` property instead of `providers`.
Before we can create an instance of the component, it has to be compiled.
The `compileComponents` method does the task asynchronously. It can't be synchronous,
because templates and styles can be referenced with relative urls
and the fetching of these resources is asynchronous by nature.
We have to wait for these tasks to complete. We can do the waiting with the `async` helper function.
In the background, `async` creates a new zone
and waits until every asynchronous operation is finished within that zone.
This way, we don't have to fiddle with Jasmine's `done` callback.

```typescript
describe('Shallow', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [LoginFormComponent],
      imports: [FormsModule, ReactiveFormsModule]
    });
    TestBed.compileComponents();
  }));

  it('should send credentials on submit', () => {
    let fixture = TestBed.createComponent(LoginFormComponent);
    let component: LoginFormComponent = fixture.componentInstance;
    let element = fixture.nativeElement;

    fixture.detectChanges();

    element.querySelector('#login-email').value = expectedEmail;
    element.querySelector('#login-email').dispatchEvent(new Event('input'));
    element.querySelector('#login-password').value = expectedPassword;
    element.querySelector('#login-password').dispatchEvent(new Event('input'));

    fixture.detectChanges();

    component.submitted.subscribe(({ email, password }) => {
      expect(email).toEqual(expectedEmail);
      expect(password).toEqual(expectedPassword);
    });

    element.querySelector('button[type="submit"]').click();
  });
});
```

With the `createComponent` method, we will have access to the component instance(`componentInstance`)
and the generated HTML fragment (`nativeElement`). We test the same thing as before:
what is emitted on the output at form submission.
The big difference is that we fill the inputs and click the submit button.
Filling the inputs with valid data is necessary
because the form validation leaves the submit button disabled as long as the inputs contain invalid data.

To make the component work, we have to call the `detectChanges` method after every change.
The `detectChanges` method does the synchronization of the component instance and the generated HTML.
Otherwise the component won't know that the input's value has changed.
When we modify an input, triggering the `input` event manually is also necessary
because this is the event that Angular listens for.

Also before doing anything inside the `nativeElement`, we have to call `detectChanges` first.
Calling the method does the first round of property checks on the component and fills out the template based on it.

Finally, we can use the native DOM methods and selectors on the `nativeElement` property.

With shallow tests, we gain the ability to test the templates, but it comes with a price.
These tests run much slower by including the compilation step.

### Integration tests

The next step is to test the component through its interactions with other components.
With integration tests, not only the template, but inputs and outputs will also be tested.

The setup is very similar to shallow tests. We have to set up and compile components.
The difference is that we have one more component that uses the login form component inside its template.
The wrapper component passes down the predefined email address and listens for the submit event.

```typescript
describe('Integration', () => {
  @Component({
    selector: 'site',
    template: `<login-form [email]="email" (submitted)="onFormSubmit($event)"></login-form>`
  })
  class SiteComponent {
    email = expectedEmail;

    storedEmail: string;

    storedPassword: string;

    onFormSubmit({ email, password }) {
      this.storedEmail = email;
      this.storedPassword = password;
    }
  }

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [LoginFormComponent, SiteComponent],
      imports: [FormsModule, ReactiveFormsModule]
    });
    TestBed.compileComponents();
  }));

  it('should send credentials on submit', () => {
    let fixture = TestBed.createComponent(SiteComponent);
    let component: SiteComponent = fixture.componentInstance;
    let element = fixture.nativeElement;

    fixture.detectChanges();

    expect(element.querySelector('#login-email').value).toEqual(expectedEmail);

    element.querySelector('#login-password').value = expectedPassword;
    element.querySelector('#login-password').dispatchEvent(new Event('input'));

    fixture.detectChanges();

    element.querySelector('button[type="submit"]').click();

    expect(component.storedEmail).toEqual(expectedEmail);
    expect(component.storedPassword).toEqual(expectedPassword);
  });
});
```

The modification of the input fields is the same, but the assertions are different.
This time we don't write assertions for the login form, but write them for the wrapper component instead.
This way, we ensure the bindings are correct.

There is no considerable slowdown compared to shallow tests. Integration tests need a bit more setup upfront,
but we can test the interactions between the components.

<include src="asides/Angular" />

### Summary

We have learnt three methods to test Angular components.
The first and fastest is testing the component in isolation:
we don't compile the template, just focus on the callable methods, like with a service.
If we also want to test the template, we will have to compile that component.
These are shallow tests. They are slower, but test more parts.
The last missing aspect is the interaction with other components. This can be tested with integration tests.
The extra element here is that we need to write a wrapper component around the component under test
and observe it through the wrapping component.

Either type we choose, we have to find the right balance between speed and how deeply we test the components.
It is optimal if we test business through isolation tests
and add some shallow and integration tests to ensure interactions and the template are valid.

To see the tests in action, check out
[this GitHub repository](https://github.com/blacksonic/angular2-testing-ground "Angular testing ground").


Angular Testing In Depth: Components

Angular v4, realtime, rendering on the server, best practices, and more. Read about the sessions from ng-conf 2017 (April 7) Day 3.

ng-conf 2017 Summary - Day 3

Angular v4 has been released. Read about Fair Day from ng-conf 2017 (April 6) Day 2.



**TL;DR:** Learn about the "open-track" Fair Day at [ng-conf 2017](https://www.ng-conf.org/) on April 6, 2017 (Day 2 of 3).

---

## ng-conf 2017: Fair Day

Day 2 of ng-conf 2017 was Fair Day. There were workshops and sessions running simultaneously with other activities and entertainment such as combat bots, board games, VR park, Prison Escape Bus, Experts Rooms, and lounge/hack rooms. In addition to general fair activities, I attended sessions on ngrx, Apollo and GraphQL, machine learning with Angular, and improving components. You can check out summaries of these sessions below.

---

## ngrx

[Ngrx](https://github.com/ngrx) consists of small, concise libraries built with RxJS to solve problems such as state management and side effect management in Angular.

### ngrx/store

Ngrx/store is an [RxJS state management container](https://auth0.com/blog/managing-state-in-angular-with-ngrx-store/) heavily based on Redux. It uses actions, reducers, and a single store. A reducer is a function of state. The initial state goes in, then handles each action and returns the new state. Reducers are pure functions. ngrx/store abstracts away the application reducer so that child reducers only handle one piece of the state. New reducers can be added to manage their own individual slices of state.

The `dispatch()` and `select()` methods are used to send actions to the reducer to update state, and return an observable of only changed state, respectively. We may want to write concise components and refactor `select()` out to _selectors_. This way, we can share the selectors across the application. Selectors should be stored where our state is defined. Abstracting the selectors puts less responsibility on the component to know how to get the selected data.

### ngrx/effects

Any code that interacts with the outside world is a [side effect](https://auth0.com/blog/glossary-of-modern-javascript-concepts/#purity). We don't know how they're going to behave when that code is run. For example, API calls are side effects. Isolating side effects out of the component tree makes them easier to test.

Ngrx/effects is a side effect model. With it, we can listen for certain actions, perform side effects, and deliver new actions back to the store. The `@Effect()` decorator hints to tell the store to subscribe and returns an observable of an action. This can be mapped to its payload. When implementing ngrx/effects to manage side effects, we've performed the same action but the component has a lot less responsibility. Components are now a pure representation of state.

### ngrx Performance Improvements

Reducers are pure, so we don't need Angular to perform any deep dirty checking. Angular only needs to check if the reference has changed.

### Redux Devtools Extension

We can also wire up the Redux Devtools Chrome extension in our ngrx application. Importing `StoreDevtoolsModule` provides a bridge to the Chrome extension, and we can then instrument store in the `app` module. Doing so incurs a performance penalty, so it's important to only use in development. The Redux Devtools extension provides an interface to see what the state of the application looks like, complete with a time traveling debugger.

> _"Redux is not great for making simple things quickly. It's great for making complex things simple."_ —Brandon Roberts & Mike Ryan

---

## Managing Data with GraphQL

Angular has solved developer issues and concerns with initial loading and size, prerendering, rendering, transitions, and animations. These are no longer concerns.

However, we are still left with a concern regarding network latency. Users expect instant feedback, ie., when liking something on Facebook. Caching and prefetching can reduce network latency. When looking for a library that handles network and data management problems, [Apollo](http://dev.apollodata.com/angular2/) offers solutions along with its dev tools.

Improving network performance is not an all-or-nothing solution. Think about data and the network when creating your apps. Every effort makes your app a little bit faster, so anything you do helps. Here are two things we can address:

* Send fewer requests.
* Send less data in the requests.

When using REST APIs, particularly those we have little control over, we call the server and can frequently get a _lot_ of information back. This can be a mess, but we can use [GraphQL](http://graphql.org/) to describe what info we want and get just this information at the field level.

With GraphQL and Apollo:

* It doesn't matter how many resources we query, we'll get everything in one single response in the structure desired.
* We can create an Apollo query with the exact structure we want back and it returns an observable.
* We can take advantage of code autocompletion with the data that could come back from the server; this creates a good separation of concerns regarding the front end and back end.
* We can also change data with post and put requests (mutation).

By using queries inside components, we create a "super Redux or ngrx" that understands the larger picture and brings back only what we need from the server. Within components, we can query only for what is needed for that particular component.

We do _not_ need a GraphQL backend in order to take advantage of GraphQL on the client. We can achieve the benefits without touching the server at all, _or_ we can build middleware that can query any data sources.

Check out [urigo's repos on GitHub for examples](http://github.com/urigo).

---

## Build, Measure, and Machine Learn with Angular

### Build Measure Learn

**Conversion** refers to crafting solutions that lead to users doing what you want them to do. For example, this might be downloading an ebook, subscribing to your service, signing up for a newsletter, etc.

We build features and then we want to measure the features and see if visitors like the features or not. We then learn about the visitors and using this information, build better features in the next cycle to increase conversion.

The most important part of any data analysis is how the data captured. [Redux Beacon](https://github.com/rangle/redux-beacon) is an open source library created at [Rangle](http://rangle.io). Redux Beacon wiretaps Redux sections in an app and sends them to a target of your choice for conversion and reporting purposes, allowing you to map Redux or ngrx actions and state to your analytics data model.

### A/B Testing

When just gathering data is not enough, A/B testing can also be performed with [feature toggles](https://github.com/rangle/feature-toggle-ng2-redux). Almost anything on your website that affects visitor behavior can be A/B tested. This includes features, colors, buttons, CTAs, headlines, etc. The problem with A/B testing is that we learn the more successful option, but we don't know the user demographic that caused this result, and analysts want to know this information.

Regionally, visitors might pick different options. For example, if  a visitor is close to your office geographically, they might choose an "In Office Training" call to action whereas people located far away may only select "Online Training".

### Machine Learning

A custom Redux Beacon target sends raw data set for each user showing the pages they visited, their location, and more. This data can be passed to a machine learning algorithm that can use patterns to generate a model. This can then show scores with a probability of given user behaviors. This is called a **decision tree model**. Machine learning can predit the probability of which decision a user will make based on the user's behavior.

In a nutshell, the steps to do this are:

* Save the data.
* Convert that data to vectors.
* Train the predictive model.
* Generate the rules.
* Do the predictions.

---

## Using Directives

Mike Brocchi talked about utilizing directives in Angular. When building out an application, we build out a component tree, but where do we go from there? If we want to reuse logic, we factor it out into a service. What happens if we have behavior in the component that we want to be able to use elsewhere? The answer is directives, which are underused in the current version of Angular.

There are three types of directives:

* Attribute-based, ie. `[ngClass]`
* Structural, ie. `*ngFor`, `*ngIf`
* Components

Mike focused on attribute-based directives. With directives, we can add behaviors just by adding an attribute to an existing element. We can then pass values in using `@Input()` and use host binding to access DOM properties and manipulate them. We can also use host listeners to handle events, such as clicks. After applying a directive, we can expose events by emitting them to the parent component with event emitters and outputs.

Directives provide a way to share both logic and behavior throughout an application _without_ the burden of unneeded templates. They are underused in the current version of Angular, but can provide powerful shared functionality.

---

## Aside: Auth0 for Angular

It's a great time to explore Angular for your single page JavaScript applications. Auth0 can help out by providing authentication, a JWT library, Quick Start documentation, and tutorials. Check out some of the following resources:

* [JWT library for Angular](https://github.com/auth0/angular2-jwt)
* [Angular 2+ Quick Start with Auth0](https://auth0.com/docs/quickstart/spa/angular2)
* [Migrating an AngularJS App to Angular eBook](https://auth0.com/e-books/migrating-to-angular2)
* [Managing State in Angular with ngrx/store](https://auth0.com/blog/managing-state-in-angular-with-ngrx-store/)
* [Angular 2 Authentication Tutorial](https://auth0.com/blog/angular-2-authentication/)

You can <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">sign up for a free Auth0 account here</a>!

> Auth0 provides the simplest and easiest to use [user interface tools to help administrators manage user identities](https://auth0.com/user-management) including password resets, creating and provisioning, blocking and deleting users. [A generous **free tier**](https://auth0.com/pricing) is offered so you can get started with modern authentication.

---

## Conclusion

Day 2 of ng-conf 2017 was packed with workshops, networking, and fun activities. Day 3 will be normal single track sessions.

You can tune into the [ng-conf 2017 livestream here](https://www.ng-conf.org/livestream) as well as watch recorded streams from previous days.


ng-conf 2017 Summary - Day 2 (Fair Day)

Angular v4 has been released. Read the major takeaways from ng-conf 2017 (April 5) Day 1.

ng-conf 2017 Summary - Day 1

Develop an Angular app from scratch, with serverless REST API, security and persistence and deploy it to GitHub Pages in no time.

Serverless REST API with Angular, Persistence and Security

Learn how to test HTTP services in Angular. We will start by writing tests for requests and finish by refactoring them to a cleaner format.



<div class="alert alert-info alert-icon">
  <i class="icon-budicon-664"></i>
  <strong>Get the "Migrating an Angular 1 App to Angular 2 book" for Free.</strong> Spread the word and <a href="https://auth0.com/e-books/migrating-to-angular2">download it now!</a>
</div>

When we write a web application, most of the time it has a backend.
The most straightforward way to communicate with the backend is with HTTP requests.
These requests are crucial for the application, so we need to test them.
More importantly, these tests need to be isolated from the outside world.
In this article I will show you how to test your requests properly and elegantly.

This article is the second part of a series in which
I share my experiences testing different building blocks of an Angular application.
It relies heavily on Dependency Injection based testing and
it is recommended that you read [the first part](https://auth0.com/blog/angular-2-testing-in-depth-services/)
if you are not familiar with the concepts.

- [Services](https://auth0.com/blog/angular-2-testing-in-depth-services/)
- HTTP Services (this article)
- [Components](https://auth0.com/blog/angular-testing-in-depth-components/)
- Pipes
- Routing

### Testing our first request

<p align="center">
  <img src="https://github.com/blacksonic/articles/raw/master/img/angular2-testing-http-services/github-logo.png" alt="Angular Testing Framework"/>
</p>

To get started we will test a basic request, the GET request.
It will call a parameterized url without a body or additional headers.
The [Github API](https://developer.github.com/v3/) has an endpoint for retrieving public profile information about users.
The profile information is returned in JSON format.

```typescript
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class GithubService {
  constructor(private http: Http) {}

  getProfile(userName: string) {
    return this.http
      .get(`https://api.github.com/users/${userName}`)
      .map((response: Response) => response.json());
  }
}
```

The ```getProfile``` method sends a GET request to the API and returns the response.
Every request made with the ```HttpModule``` returns an ```Observable.```
The returned value will always be a ```Response``` object, which can return the response body.
With the help of the ```json``` or ```text``` method we can transform the value of the Observable.

The first thing we have to do is to set up the test dependencies.
The ```Http``` dependency is required.
If we don't provide it, we will get this error message: ```No provider for Http!```.

```typescript
beforeEach(() => {
  TestBed.configureTestingModule({
    providers: [GithubService],
    imports: [HttpModule]
  });
});
```

The problem with the real ```HttpModule``` is that we will end up sending real HTTP requests.
It is an absolutely terrible idea to do this with unit tests, because it breaks the test's isolation from the outside world.
Under no circumstances will the result of the test be guaranteed.
For example, the network can go down and our well-crafted tests will no longer work.

Instead, Angular has a built-in way to fake HTTP requests.

```typescript
import { MockBackend, MockConnection } from '@angular/http/testing';
import { Http, BaseRequestOptions, Response, ResponseOptions, RequestMethod } from '@angular/http';

...

beforeEach(() => {
  TestBed.configureTestingModule({
    providers: [
      GithubService,
      MockBackend,
      BaseRequestOptions,
      {
        provide: Http,
        useFactory: (mockBackend: MockBackend, defaultOptions: RequestOptions) => {
          return new Http(mockBackend, defaultOptions);
        },
        deps: [MockBackend, BaseRequestOptions]
      }
    ]
  });
});
```

Instead of providing ```Http``` as a module,
it is better to use the factory provider and pass the ```MockBackend``` instance to the ```Http``` constructor.
This way the fake backend captures every request and can respond accordingly.

Before writing the first test it is also important to get an instance of the ```MockBackend,```
because without it we won't be able to respond to requests.

```typescript
beforeEach(inject([GithubService, MockBackend], (github, mockBackend) => {
  subject = github;
  backend = mockBackend;
}));
```

Let's write the first test that checks the result of the request.

```typescript
it('should get profile data of user', (done) => {
  let profileInfo = { login: 'sonic', id: 325, name: 'Tester' };
  backend.connections.subscribe((connection: MockConnection) => {
    let options = new ResponseOptions({ body: profileInfo });

    connection.mockRespond(new Response(options));
  });

  subject.getProfile('blacksonic').subscribe((response) => {
    expect(response).toEqual(profileInfo);
    done();
  });
});
```

Requests made are available through the ```connections``` property of the fake backend as an ```Observable.```
When it receives the request through the ```subscribe``` method we can respond with a JSON object.

In our example only the response body is set. In addition, you can set the status and the headers of the request.

Another new element is the ```done``` callback that is passed into the test function.
It is needed when writing asynchronous tests.
This way the test doesn't end when the execution of the function ends.
It will wait until the ```done``` callback is called.
Of course, there is a timeout for hanging tests that don't call this ```done``` method within a given interval.

HTTP requests are asynchronous by nature,
but the fake backend we use responds to them synchronously (it calls the ```subscribe``` method synchronously).
You may wonder what makes the test asynchronous, then.

The answer is false positive tests.
If we comment out the response to the request, the test will still pass, even though we have an assertion.
The problem here is that the ```subscribe``` callback never gets executed if we don't respond to the request.

```typescript
it('should get profile data of user', () => {
  // backend.connections.subscribe...

  subject.getProfile('blacksonic').subscribe((response) => {
    expect(response).toEqual(profileInfo);
  });
});
```
### Checking the request

Until now we haven't made any assertions for the request.
For example, what was the called url, or what was the method of the request?
To make the test more strict we have to check these parameters.

```typescript
backend.connections.subscribe((connection: MockConnection) => {
  expect(connection.request.url).toEqual('https://api.github.com/users/blacksonic');
  expect(connection.request.method).toEqual(RequestMethod.Get);

  ...
});
```

The original ```Request``` object resides on the ```MockConnection``` object.
With its ```url``` and ```method``` property, we can add the assertions easily.

### Digging deeper

GET requests are good for retrieving data, but we'll make use of other HTTP verbs to send data.
One example is POST.
User authentication is a perfect fit for POST requests.
When modifying data stored on the server we need to restrict access to it.
This is usually done with a POST request on the login page.

<p align="center">
  <img src="https://github.com/blacksonic/articles/raw/master/img/angular2-testing-http-services/auth0-logo.png" alt="Angular Testing Framework"/>
</p>

Auth0 provides a good solution for handling user authentication.
It has a feature to authenticate users based on username and password.
To demonstrate how to test POST requests, we will send a request to the Auth0 API.
We won't be using their recommended package here, because it would abstract out the actual request,
but for real-world scenarios I would recommend using it.

```typescript
@Injectable()
export class Auth0Service {
  constructor(private http: Http) {}

  login(username: string, password: string) {
    let headers = new Headers({
      'Content-Type': 'application/json'
    });
    let options = new RequestOptions({ headers });

    return this.http
      .post(
        'https://blacksonic.eu.auth0.com.auth0.com/usernamepassword/login',
        { username, password, client_id: 'YOUR_CLIENT_ID' },
        options
      )
      .map((response: Response) => response.text());
  }
}
```

The main difference between this example and the previous one is that here we are sending a JSON payload to the server
and appending additional headers onto it.
We don't have to manually ```JSON.stringify``` the payload --- the request methods will take care of it.
The response will be in text format, so this time we don't have to convert anything to JSON.

Let's look at the test to see how we can check every detail of the request.

```typescript
it('should be called with proper arguments', (done) => {
  backend.connections.subscribe((connection: MockConnection) => {
    expect(connection.request.url).toEqual('https://blacksonic.eu.auth0.com.auth0.com/usernamepassword/login');
    expect(connection.request.method).toEqual(RequestMethod.Post);
    expect(connection.request.headers.get('Content-Type')).toEqual('application/json');
    expect(connection.request.getBody()).toEqual(JSON.stringify(
      {
        username: 'blacksonic',
        password: 'secret',
        client_id: 'YOUR_CLIENT_ID'
      }, null, 2
    ));
    ...
  });

  subject.login('blacksonic', 'secret').subscribe((response) => {
    expect(response).toEqual('<form />');
    done();
  });
});
```

The headers are also available on the ```Request``` object and can be checked one by one.
The payload can be retrieved with the ```getBody``` method.
This method always returns the body converted to a string, which will we see in the network traffic.
When we send JSON it will contain the output of the ```JSON.stringify``` method: printed with spaces and an indentation of two.

### Refactoring

The previous setup works, but it has multiple problems.

- For every service we test, the provider configuration will be exactly the same.
- The subscription to the outgoing connection responds the same immediately, regardless of the url.
- The assertions are verbose and hard to read.

Those who have tested their HTTP services in Angularjs may remember how simple the setup was for those tests.
Angularjs provided convenient methods for setting expectations on requests.

Angular doesn't have those built-in functionalities,
but very similar ones are present in the [ngx-http-test](https://github.com/blacksonic/ngx-http-test) library.

It can solve the problems mentioned earlier.
Let's look at the test with the library for the Github profile fetch.

```typescript
...
import { FakeBackend } from 'ngx-http-test';

describe('GithubServiceRefactored', () => {
  ...

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        GithubService,
        FakeBackend.getProviders()
      ]
    });
  });

  beforeEach(inject([GithubService, FakeBackend], (github, fakeBackend) => {
    subject = github;
    backend = fakeBackend;
  }));

  it('should get profile data of user', (done) => {
    backend
      .expectGet('https://api.github.com/users/blacksonic')
      .respond(profileInfo);

    subject.getProfile('blacksonic').subscribe((response) => {
      expect(response).toEqual(profileInfo);
      done();
    });
  });
});

```

The setup becomes a function call to ```FakeBackend.getProviders()```.
Setting the expectation hides the subscription and gives more readable methods like ```expectGET```.

The login test also becomes less verbose.

```typescript
it('should be called with proper arguments', (done) => {
  backend.expectPost(
    'https://blacksonic.eu.auth0.com.auth0.com/usernamepassword/login',
    {
      username: 'blacksonic',
      password: 'secret',
      client_id: 'YOUR_CLIENT_ID'
    },
    { 'Content-Type': 'application/json' }
  ).respond(responseForm);

  subject.login('blacksonic', 'secret').subscribe((response) => {
    expect(response).toEqual('</form>');
    done();
  });
});
```

## Aside: Securing Angular Applications with Auth0

Are you building a product with Angular? We at Auth0, can help you focus on what matters the most to you, the special features of your product. [Auth0](https://auth0.com/) can help you make your product secure with state-of-the-art features like [passwordless](https://auth0.com/passwordless), [breached password surveillance](https://auth0.com/breached-passwords), and [multifactor authentication](https://auth0.com/multifactor-authentication). [We offer a generous **free tier**](https://auth0.com/pricing) to get started with modern authentication.

We provide the simplest and easiest to use [User interface tools to help administrators manage user identities](https://auth0.com/user-management) including password resets, creating and provisioning, blocking and deleting users.

### Conclusion: What we've learned about Angular HTTP testing

In this tutorial, we managed to:

- setup tests and fake an HTTP backend
- write assertions for requests
- refactor the tests to be more readable

Angular has the tools to test HTTP requests, but still lacks the readable assertion methods that were present in Angularjs.
Until such methods are implemented, the [ngx-http-test](https://github.com/blacksonic/ngx-http-test) library can be used.

To see the tests in action check out
[this GitHub repository](https://github.com/blacksonic/angular-testing-ground "Angular testing ground").


Angular Testing In Depth: HTTP Services

a28d70be6ae2b9389db9ad815cab510e

Wojciech Kwiatek

Angular is built on the top of RxJS. Learn how you can make use of RxJS in your Angular apps for a clearer and more maintainable codebase.

<div class="alert alert-danger alert-icon">
  <i class="icon-budicon-500"></i>
  <strong>This post is out of date.</strong> Angular 5+ replaced `Http` with `HttpClient` and RxJS 6 introduced many changes to operators. Check out the [Real-World Angular Series](https://auth0.com/blog/real-world-angular-series-part-1/) and [RxJS 6: What's new and what has changed?](https://auth0.com/blog/whats-new-in-rxjs-6/) for more recent content.
</div>

---

**TL;DR** Angular, [previously known as Angular 2](http://angularjs.blogspot.com/2017/01/branding-guidelines-for-angular-and.html), incorporates RxJS and uses it internally. We can make use of some RxJS goodies and introduce FRP to write more robust code in our apps.

---

If you're new to RxJS, I recommend reading [Understanding Reactive Programming and RxJS](https://auth0.com/blog/understanding-reactive-programming-and-rxjs/) before proceeding.

RxJS is all about streams, operators to modify them, and observables.

## Functional Reactive Programming (FRP)
FRP has recently become a buzzword. To give you a deeper understanding on that topic, there is an awesome post from Andre Stalz -- [The introduction to Reactive Programming you've been missing](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754). What is the key takeaway from the this comprehensive post? Reactive programming is actually programming with asynchronous data streams. But where does the word *functional* come into play? Functional is about how we can modify these streams to create new sets of data. A stream can be used as an input to another stream. We have a bunch of operators in RxJS to do things like this. So, can we do some of FRP with RxJS? The short answer is: yes! And we'll do so with Angular.

## RxJS in Angular
To get started with RxJS in Angular, all we need to do is import the operators we want to use. TRxJS is itself an Angular dependency so it's ready to use out of the box.

### Passing observables to the view
We are about to start with some observables created ad hoc. Let's create an observable from the JavaScript array:

```ts
const items = Observable.of([1, 2, 3])
```

Now, we can use the created observable as a component's property and pass it into the view. Angular introduced a new filter, which will be a perfect fit here. It's called `async`. Its purpose is to unwrap promises and observables. In the case of an observable it'll pass the last value of the observable:


```ts
import { Component } from '@angular/core'
import { Observable } from 'rxjs/Rx'

@Component({
  selector: 'my-app',
  template: `
    <ul>
      <li *ngFor="let item of items | async">
        {{ item }}
      </li>
    </ul>
  `
})
export class AppComponent {
  public items = Observable.of([1, 2, 3])
}
```

We should see a list of elements in the browser.

This is our *hello world* example to see how async works and how we can use it.

### Http
Angular relies on RxJS for some of its internal features. One of the most well-known services is *Http*. In Angular 1.x, *Http* was a promise-based service. In Angular 2+, it's based on observables. This means that we can also make use of the `async` pipe here. Let's try to create a real-world example with a service. We want to fetch a list of repos authored by Auth0 on GitHub:

```ts
import { Injectable } from '@angular/core'
import { Http } from '@angular/http'
import { Observable } from 'rxjs/Rx'
import 'rxjs/add/operator/map'

@Injectable()
export class RepoService {
  constructor(private _http: Http) {}

  getReposForUser(user: string): Observable<any> {
    return this._http
      .get(`https://api.github.com/users/${user}/repos`)
      .map((res: any) => res.json())
  }
}
```

Here, we have the service, which exposes the `getReposForUser` method to make an http call. Note the return type of the method -- it's an `Observable<any>`. Now, we can add it into the module and use it in the component:

```ts
import { RepoService } from './repo.service.js'

@Component({
  selector: 'my-app',
  template: `

  `,
})
export class AppComponent {
  public repos: Observable<any>

  constructor(repoService: RepoService) {
    this.repos = repoService.getReposForUser('auth0')
    console.log(this.repos)
  }
}
```

Something important has just happened. You can take a look into the *Network* tab of your developer tools in the browser. No call was made. Let's add the `for` loop with the `async` pipe:

```ts
@Component({
  selector: 'my-app',
  template: `
    <ul>
      <li *ngFor="let repo of repos | async">
        {{ repo.name }}
      </li>
    </ul>
  `,
})
export class AppComponent {
  public repos: Observable<any>

  constructor(repoService: RepoService) {
    this.repos = repoService.getReposForUser('auth0')
  }
}
```

Now the call for repositories is fired, and we can see that the list of repos has been fetched correctly. Why is that?

## Hot and Cold Observables
The `http.get` observable above is **cold**: that means each subscriber sees the same events from the beginning. It's independent of any other subscriber. It also means that if there's no subscriber, no value is emitted! See this one in action:

```ts
export class AppComponent {
  public repos: Observable<any>

  constructor(repoService: RepoService) {
    this.repos = repoService.getReposForUser('auth0')
    this.repos.subscribe()
    this.repos.subscribe()
  }
}
```

Now you'll be able to see three calls. You can now see one more thing -- `async` makes a subscription under the hood.

On the other hand, we have **hot** observables. The difference is, no matter how many subscribers there are, the observable starts just once. And we can make our observable hot, instead of cold, by using the `share` operator:

```ts
// ...
import 'rxjs/add/operator/share'

@Injectable()
export class RepoService {
  constructor(private http: Http) {}

  getReposForUser(user: string): Observable<any> {
    return this.http
      .get(`https://api.github.com/users/${user}/repos`)
      .map((res: any) => res.json())
      .share()
  }
}
```

Now you should see just one call. If you want to go deeper with the topic, here is a [Hot vs Cold Observables](http://medium.com/@benlesh/hot-vs-cold-observables-f8094ed53339) article by Ben Lesh.

## Programming the reactive way in Angular

### Handling events
We've covered how you've probably used RxJS observables for *Http* in Angular, even if you weren't aware of it. However, there are many more things you can do with streams, even if Angular doesn't require you to do so. Now we move on to the *on click* events. The traditional, imperative way of handling click events in Angular is as follows:

```ts
@Component({
  selector: 'my-app',
  template: `
    <button (click)="handleButtonClick(1)">
      Up Vote
    </button>
  `,
})
export class AppComponent {
  handleButtonClick(value: number) {
    console.log(value)
  }
}
```

We can create a stream of click events using RxJS `Subject`. *Subject* is both an observer and an observable at the same time. It means it can emit value (using `.next()`), and you can subscribe to it (using `subscribe`).

Here, you can see the same case achieved with functional approach using RxJS:

```ts
@Component({
  selector: 'my-app',
  template: `
    <button (click)="counter$.next(1)">
      Up Vote
    </button>
  `,
})
export class AppComponent {
  public counter$: Observable<number> = new Subject<number>()

  constructor() {
    this.counter$.subscribe(console.log.bind(console))
  }
}
```

It's not much different than the previous one, though. Let's try to add some more logic there. Like making sum of clicks and printing some text instead of just number.

```ts
@Component({
  selector: 'my-app',
  template: `
    <button (click)="counter$.next(1)">
      Up Vote
    </button>
  `,
})
export class AppComponent {
  public counter$: Observable<string> = new Subject<number>()
    .scan((acc: number, current: number): number => acc + current)
    .map((value: number): string => `Sum of clicks: ${value}`)

  constructor() {
    this.counter$.subscribe(console.log.bind(console))
  }
}
```

The key point is that *we define how the clicks stream will behave.* We say that we don't really need clicks but only the sum of them with some prepended text. And this sum will be our stream, not the pure click events. And we subscribe to the stream of summed values. In other words, *the key of functional programming is to make the code declarative, not imperative.*

### Communication between components
Let's briefly address communication between Angular components using an RxJS approach. It's actually about dumb components in the RxJS approach of an Angular world. Last time I described the [change detection of Angular](https://auth0.com/blog/understanding-angular-2-change-detection/) and what we can do with it to fine-tune the app. We'll add the component with `clicks$` stream as the input.

```ts
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'

@Component({
  selector: 'my-score',
  template: 'Summary: {{ score }}',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ScoreComponent {
  @Input() public score: number
}
```

Note that the component has `ChangeDetectionStrategy.OnPush` turned on, so this means that we assume that the new reference will come as the input. The component accepts a numeric parameter, but there is no reference to streams. We can handle this with the `async` pipe:

```ts
@Component({
  selector: 'my-app',
  template: `
    <button (click)="counter$.next(1)">
      Up Vote
    </button>
    <my-score [score]="counter$ | async"></my-score>
  `,
})
export class AppComponent {
  public counter$: Observable<number> = new Subject<number>()
    .scan((acc: number, current: number): number => acc + current)
}
```

### Forms
Another place when you can use the power of RxJS is forms. We can use all of the knowledge that we have gained up to this point and see how we can create a reactive login form.

First, let's start with adding `ReactiveFormsModule` from `@angular/forms` to the module. Then we can make use of the reactive forms introduced in Angular. Here's how it can look:

```ts
import { FormBuilder, FormGroup } from '@angular/forms'

@Component({
  selector: 'my-app',
  template: `
    <form
      [formGroup]="loginForm"
    >
      <label>Login:</label>
      <input
        formControlName="login"
        type="text"
      >

      <label>Password:</label>
      <input
        formControlName="password"
        type="password"
      >

      <button type="submit">Submit</button>
    </form>
  `,
})
export class AppComponent implements OnInit {
  public loginForm: FormGroup

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      login: '',
      password: '',
    })
  }
}
```

We now have a few additional blocks:
- `formControlName` -- added to match names from templates to the appropriate fields in the controller
- `formBuilder.group` -- creates the form
- `[formGroup]` -- connects the template and the controller

We can now use the `valueChanges` observable:

```ts
// ...
    this.loginForm.valueChanges.subscribe(console.log.bind(console))
// ...
```

Now, each changed field will emit an event and will be logged to the console. This offers many possibilities since we can take advantage of any operator that RxJS provides. In this example, let's focus on submitting the form in a reactive way. We can put `(submit)` on the form:

```ts
@Component({
  selector: 'my-app',
  template: `
    <form
      [formGroup]="loginForm"
      (submit)="submit$.next()"
    >
    
  `
})
// ...
export class AppComponent {
  public loginForm: FormGroup
  private submit$: Observable<any> = new Subject()

// ...
```

We now have a stream of submit events and a stream of values. All that remains is to combine these streams. The resulting stream will emit the current state of the fields when the form is submitted. The desired behavior can be achieved by using the [withLatestFrom](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-withLatestFrom) operator of RxJS. The combined stream is as follows:

```ts
// ...
    this.submit$
      .withLatestFrom(this.loginForm.valueChanges, (_, values) => values)
      .subscribe(values => {
        console.log('submitted values', values)
      })
// ...
```

We now have combined streams, and the logic is consolidated. It can be written in a single line. Just to recap, here is the final code for the form component:

```ts
@Component({
  selector: 'my-app',
  template: `
    <form
      [formGroup]="loginForm"
      (submit)="submit$.next()"
    >
      <label>Login:</label>
      <input
        formControlName="login"
        type="text"
      >

      <label>Password:</label>
      <input
        formControlName="password"
        type="password"
      >

      <button type="submit">Submit</button>
    </form>
  `,
})
export class AppComponent {
  public loginForm: FormGroup
  private submit$: Observable<any> = new Subject()

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      login: '',
      password: '',
    })

    this.submit$
      .withLatestFrom(this.loginForm.valueChanges, (_, values) => values)
      .subscribe(values => {
        console.log('submitted values', values)
      })
  }
}
```

<include src="asides/Angular" />

## Conclusion
Angular has a lot more features than meets the eye. RxJS is, in my personal opinion, one of the best of them. It can rocket the app to the next level in term of maintainability and clarity. The future is more declarative, less imperative code.

RxJS can appear intimidating at first, but once you’re familiar with its functionality and operators, it supplies many benefits (such as defining logic at the declaration time). All of this is to say, the code is easier to understand compared to imperative code. RxJS requires a different mode of thinking, but it is very worthwhile to learn and use.

Making use of RxJS in Angular

Single Page Applications (SPAs) can benefit greatly from JWT secured backends. Here we will see how to secure an Angular 2 app, backed by Koa, with JWTs.

Building and Securing Koa and Angular 2 with JWT

Learn how to migrate real-world features of an AngularJS 1 application to a fresh Angular 2+ build (Part 3): routing  & API with params, authentication.

Migrating an AngularJS App to Angular - Part 3

Learn how to migrate real-world features of an AngularJS 1 application to a fresh Angular 2+ build (Part 2): routing, API, and filtering.

Migrating an AngularJS App to Angular - Part 2

Learn how to migrate real-world features of an AngularJS 1 application to a fresh Angular 2+ build (Part 1): setup, architecture, and components.

"Angular 2"