Skip to content

Instantly share code, notes, and snippets.

@ball6847

ball6847/environment.ts

Last active November 1, 2017 03:47
Show Gist options
  • Save ball6847/a3d4db62c9538fd1050b3523e41a06d8 to your computer and use it in GitHub Desktop.
Save ball6847/a3d4db62c9538fd1050b3523e41a06d8 to your computer and use it in GitHub Desktop.
Download ZIP
Enabling hot module replacement for angular cli project
Raw
environment.ts
// environments/environment.ts
export const environment = {
production: false,
hmr: true
};
Raw
hmr.ts
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);
const makeVisible = createNewHosts(elements);
ngModule.destroy();
makeVisible();
});
};
Raw
main.ts
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();
}
const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule)
if (environment['hmr']) {
if (module['hot']) {
hmrBootstrap(module, bootstrap);
} else {
console.error('HMR is not enabled for webpack-dev-server!');
console.log('Are you using the --hmr flag for ng serve?');
}
} else {
bootstrap().catch(err => console.log(err));
}
@ball6847
Copy link
Author

ball6847 commented Oct 31, 2017 •
edited
Loading

Extra dependency

npm install @angularclass/hmr --save-dev
yarn add @angularclass/hmr -D

Start angular using ng serve --hmr
or even faster ng serve --hmr --sourcemaps=false if you are fine without sourcemaps.

You can add npm scripts for quicker access

{
  "scripts": {
    "start": "ng serve --hmr --sourcemaps=false",
    "start:debug": "ng serve --hmr --sourcemaps=true"
  }
}

FYI - https://medium.com/@beeman/tutorial-enable-hmr-in-angular-cli-apps-1b0d13b80130 (Written by Bram Borggreve)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment