角热模块替换

角- HMR 函数 为Webpack和Angular重新装入热模块。 所有版本的 Angular 和 Webpack 将使用此模块

npm install @angularclass/hmr

main.browser.ts

import { removeNgStyles, createNewHosts, bootloader } from '@angularclass/hmr';

@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) {
    if (!store || !store.state) return;
    console.log('HMR store', store);
    console.log('store.state.data:', store.state.data)
    // inject AppStore here and update it
    // this.AppStore.update(store.state)
    if ('restoreInputValues' in store) {
      store.restoreInputValues();
    }
    // change detection
    this.appRef.tick();
    delete store.state;
    delete store.restoreInputValues;
  }
  hmrOnDestroy(store) {
    var cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
    // recreate elements
    store.disposeOldHosts = createNewHosts(cmpLocation)
    // inject your AppStore and grab state then set it on store
    // var appState = this.AppStore.get()
    store.state = {data: 'yolo'};
    // store.state = Object.assign({}, appState)
    // save input values
    store.restoreInputValues  = createInputTransfer();
    // remove styles
    removeNgStyles();
  }
  hmrAfterDestroy(store) {
    // display new elements
    store.disposeOldHosts()
    delete store.disposeOldHosts;
    // anything you need done the component is removed
  }
}

export function main() {
  return platformBrowserDynamic().bootstrapModule(MainModule)
    // use `hmrModule` or the "@angularclass/hmr-loader"
    .then((ngModuleRef: any) => {
      // `module` global ref for webpackhmr
      // Don't run this in Prod
      return hmrModule(ngModuleRef, module);
    });
}

// boot on document ready
bootloader(main);

bootloader 只需要探测到圆顶就已经准备好了 然后再用靴子去绑 这是需要的,因为那个多姆在重新装入时已经准备好了.

重要助手

• 删除NgStyles: 删除角样式
• 创建新屋并处理旧屋: 重新创建用于拖曳的根元素
• 卸货机: 已准备好的文档或已准备好的文档
• 创建输入传输器 财务报告和审定财务报表 恢复输入值: 替换时传输输入 DOM 状态

生产

在生产中,你只需要装货机 这样做:

export function bootloader(main) {
  if (document.readyState === 'complete') {
    main()
  } else {
    document.addEventListener('DOMContentLoaded', main);
  }
}

你会用正常的方式,在生产中, 在Dom准备好了之后, 拖住你的应用。 另外,在生产过程中,你应该移除装载器:

@NGRX/平面 (NGRX 4.x.x) (中文(简体) )

要钩入NGRX 4,你只需要提供一个减速器来设定状态,并将其纳入你的开发元减速器.

// make sure you export for AoT
export function stateSetter(reducer: ActionReducer<any>): ActionReducer<any> {
  return function(state: any, action: any) {
    if (action.type === 'SET_ROOT_STATE') {
      return action.payload;
    }
    return reducer(state, action);
  };
}

在你的根减少器中,你可以做类似的事情 把它包含在你的 metaReducers。 。 。 . 您应该进入这里的环境, 并且只将它包含在开发中.

/**
 * By default, @ngrx/store uses combineReducers with the reducer map to compose
 * the root meta-reducer. To add more meta-reducers, provide an array of meta-reducers
 * that will be composed to form the root meta-reducer.
 */
export const metaReducers: ActionReducer<any, any>[] = [stateSetter]

简而言之,把减速器给 StoreModule 和你的hmr钩入.

 StoreModule.forRoot(reducers, { metaReducers }),

享受.. 帕特里克·贾斯