@angularclass/hmr - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

		{
		"name": "@angularclass/hmr",
		"version": "1.0.0",
		"version": "1.0.1",
		"description": "angular2-hmr: Hot Module Replacement for Webpack and Angular 2",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

		@@ -14,56 +14,58 @@ <p align="center">

		This module requires Angular 2.0.0-rc.1 or higher. Please see repository [Angular 2 Webpack Starter](https://github.com/angularclass/angular2-webpack-starter) for a working example.
		This module requires Angular 2.0.0-rc.5 or higher. Please see repository [Angular 2 Seed](https://github.com/angularclass/angular2-seed) for a working example.

		also download https://github.com/AngularClass/angular2-hmr-loader
		`main.browser.ts`
		```typescript
		import { removeNgStyles, createNewHosts, bootloader } from '@angularclass/hmr';

		function main(initialHMRstate) {
		// you must return
		return bootstrap(App, []);
		@NgModule({
		bootstrap: [
		App
		],
		declarations: [
		App
		],
		imports: [
		// Angular 2
		BrowserModule,
		FormsModule,
		HttpModule,
		RouterModule.forRoot([], {
		useHash: true
		}),
		// app
		appModule
		// vendors
		],
		providers: []
		})
		class MainModule {
		constructor(public appRef: ApplicationRef) {}
		hmrOnInit(store) {
		console.log('HMR store', store);
		}
		hmrOnDestroy(store) {
		var cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
		// recreate elements
		store.disposeOldHosts = createNewHosts(cmpLocation)
		// remove styles
		removeNgStyles();
		}
		hmrAfterDestroy(store) {
		// display new elements
		store.disposeOldHosts()
		delete store.disposeOldHosts;
		}
		}
		/*
		* Hot Module Reload
		* experimental version by @gdi2290
		*/
		if (isDevelopment) {
		// activate hot module reload
		let ngHmr = require('angular2-hmr');
		ngHmr.hotModuleReplacement(main, module); // pass the main function
		} else {
		// bootstrap when document is ready
		document.addEventListener('DOMContentLoaded', () => main());
		}
		```
		`app.service.ts`
		```typescript
		import {HmrState} from 'angular2-hmr';

		export class AppState {
		// @HmrState() is used by HMR to track the state of any object during a hot module replacement
		@HmrState() _state = { };
		export function main() {
		return platformBrowserDynamic().bootstrapModule(MainModule);
		}
		```

		`app.component.ts`
		```typescript
		import {HmrState} from 'angular2-hmr';
		@Component({ /... / })
		export class App {
		// boot on document ready
		bootloader(main);

		@HmrState() localState = {};

		}
		```


		In production set `NODE_ENV` to `"production"` to noop `HmrState` or strip it from your code
		```typescript
		new NormalModuleReplacementPlugin(
		/angular2-hmr/,
		path.join(__dirname, 'node_modules', 'angular2-hmr', 'prod.js')
		),
		```



		___
		@@ -70,0 +72,0 @@

@angularclass/hmr - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics