From 77d07d690968a9631fc0c8bafbaebd27a5ebaab6 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 12 Dec 2017 14:45:42 +0100 Subject: Add hmr --- client/package.json | 1 + client/src/environments/environment.prod.ts | 1 + client/src/environments/environment.ts | 1 + client/src/hmr.ts | 16 ++++++++++++++++ client/src/main.ts | 16 ++++++++++++++-- client/yarn.lock | 4 ++++ 6 files changed, 37 insertions(+), 2 deletions(-) create mode 100644 client/src/hmr.ts (limited to 'client') diff --git a/client/package.json b/client/package.json index b8103d433..14c20e8d9 100644 --- a/client/package.json +++ b/client/package.json @@ -33,6 +33,7 @@ "@angular/platform-browser": "~5.1.0", "@angular/platform-browser-dynamic": "~5.1.0", "@angular/router": "~5.1.0", + "@angularclass/hmr": "^2.1.3", "@ngx-meta/core": "^4.0.1", "@types/core-js": "^0.9.28", "@types/markdown-it": "^0.0.4", diff --git a/client/src/environments/environment.prod.ts b/client/src/environments/environment.prod.ts index c9f5a3b63..d5dfe5573 100644 --- a/client/src/environments/environment.prod.ts +++ b/client/src/environments/environment.prod.ts @@ -1,4 +1,5 @@ export const environment = { production: true, + hmr: false, apiUrl: '' } diff --git a/client/src/environments/environment.ts b/client/src/environments/environment.ts index 43d788541..42b8baee8 100644 --- a/client/src/environments/environment.ts +++ b/client/src/environments/environment.ts @@ -5,5 +5,6 @@ export const environment = { production: false, + hmr: true, apiUrl: 'http://localhost:9000' } diff --git a/client/src/hmr.ts b/client/src/hmr.ts new file mode 100644 index 000000000..4d707a250 --- /dev/null +++ b/client/src/hmr.ts @@ -0,0 +1,16 @@ +import { NgModuleRef, ApplicationRef } from '@angular/core' +import { createNewHosts } from '@angularclass/hmr' + +export const hmrBootstrap = (module: any, bootstrap: () => Promise>) => { + let ngModule: NgModuleRef + 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() + }) +} diff --git a/client/src/main.ts b/client/src/main.ts index f3825fe50..b02b6830f 100644 --- a/client/src/main.ts +++ b/client/src/main.ts @@ -4,10 +4,22 @@ 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() } -platformBrowserDynamic() +const bootstrap = () => platformBrowserDynamic() .bootstrapModule(AppModule) - .catch(err => console.log(err)) + +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() +} diff --git a/client/yarn.lock b/client/yarn.lock index b21624ec5..5c63a68a6 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -158,6 +158,10 @@ dependencies: tslib "^1.7.1" +"@angularclass/hmr@^2.1.3": + version "2.1.3" + resolved "https://registry.yarnpkg.com/@angularclass/hmr/-/hmr-2.1.3.tgz#34e658ed3da37f23b0a200e2da5a89be92bb209f" + "@ngtools/json-schema@1.1.0", "@ngtools/json-schema@^1.1.0": version "1.1.0" resolved "https://registry.yarnpkg.com/@ngtools/json-schema/-/json-schema-1.1.0.tgz#c3a0c544d62392acc2813a42c8a0dc6f58f86922" -- cgit v1.2.3