splincode

@Injectable({ 
  providedIn: 'root'
})
export class HeroesService {

  @Select(HeroesState)
  public data$: Observable<Hero[]>;

  constructor(
    private api: ApiService,

splincode

@State<Hero[]>({
  name: 'heroes',
  defaults: []
})
export class HeroesState {

  @Action(AddHero)
  private addHeroByState(ctx: StateContext<Hero[]>, { hero }: AddHero) {
    ctx.setState([ ...ctx.getState(), hero ]);
  }

splincode

export const environment = {
 production: false,
 hmr: true
};

splincode

export const environment = {
 production: true,
 hmr: false
};

splincode

export const environment = {
 production: false,
 hmr: false
};

splincode

  "build": {
    "configurations": {
      ...
      "hmr": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.hmr.ts"
          }
        ]

splincode

{
  ...
  "compilerOptions": {
    ...
    "types": ["node"]
  },
}

splincode

import { NgModuleRef, ApplicationRef } from '@angular/core';
import { createNewHosts } from '@angularclass/hmr';

export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
  let ngModule: NgModuleRef<any>;
  module.hot.accept();
  bootstrap().then(mod => ngModule = mod);
  module.hot.dispose(() => {
    const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
    const elements = appRef.components.map(c => c.location.nativeElement);

splincode

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import { hmrBootstrap } from './hmr';

if (environment.production) {
  enableProdMode();

splincode

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BootstrapModuleFn as Bootstrap, hmr, WebpackModule } from '@ngxs/hmr-plugin';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

declare const module: WebpackModule;

if (environment.production) {