navix

Import JSON into Angular 7 during build

typings.d.ts

declare module '*.json' {
  const value: any;
  export default value;
}

navix

Wait for all animations to finish before :leave in Angular 7

Including child components.

@Component({
  ...
  animations: [
    trigger('host', [
 transition(':enter, :leave', [

navix

Proxy in Angular CLI 7

For example proxy GraphQL requests from the default Angular CLI port to your API server.

localhost:4200/graphql -> localhost:3000/graphql

proxy.conf.json

navix

<!-- wInViewRoot directive is needed to specify the `root` for `IntersectionObserver` and some other it's options e.g. `margin` -->
<div class="container" wInViewRoot="viewport">
  Any content can be here
  <w-in-view-item>
    <!-- Content will be replaced by a placeholder <div> with the same height as original content.
         Also `InViewItemComponent`s change detector will be detached when it become invisible which means
         all the content's change detectors won't be reachable and will be inactive as well. -->   
  </w-in-view-item>
  ...or any other content can be here
  <w-in-view-item>

navix

Typescript Paths

Setup an alternative path to directories.

tsconfig.json

{
  "compilerOptions": {
 ...

navix

Docker image with Angular application

How to build a Docker image that serves Angular application (without Universal).

Build your application to the dist/app directory, then copy it into an image.

Dockerfile

FROM nginx:latest

navix

Prevent leaving from any page using Router in Angular 7

Angular has CanDeactivate guard, but you have to declare it to each path in the routes configuration.

Valid until angular/angular#11836 will be done.

You can use CanActivateChild guard to prevent leaving from any component with single declaration.

leave-guard.service.ts

navix

Detect router navigation events called by browser in Angular 7

...
constructor(
  private router: Router,
) {
  this.router.events.subscribe(event => {
    if (event instanceof NavigationStart && event.navigationTrigger === 'popstate') {
 ...

navix

Import module using forRoot in Angular 7

Sometimes we want import a module and pass some configuration that will be processed before module services providing.

meta.ts

import { InjectionToken } from '@angular/core';

export interface FeatureConfig {

navix

Dynamic imports in Angular 7

Some big pieces of code you can load dynamically.

Update your tsconfig.json:

{
  ...
 "compilerOptions": {