test(integration): angular 5.2 + typescript 2.7

integrations/hello-world-ng5/.angular-cli.json

@@ -11,7 +11,11 @@
       "main": "main.ts",
       "tsconfig": "tsconfig.app.json",
       "prefix": "app",
-      "environmentSource": "environments/environment.ts"
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
     }
   ],
   "warnings": {

integrations/hello-world-ng5/package.json

@@ -18,17 +18,9 @@
     "@angular/platform-browser": "5.2.0",
     "@angular/platform-browser-dynamic": "5.2.0",
     "@angular/router": "5.2.0",
-    "@ngxs/store": "file:../../@ngxs/store",
-    "@ngxs/logger-plugin": "file:../../@ngxs/logger-plugin",
-    "@ngxs/devtools-plugin": "file:../../@ngxs/devtools-plugin",
-    "@ngxs/storage-plugin": "file:../../@ngxs/storage-plugin",
-    "@ngxs/websocket-plugin": "file:../../@ngxs/websocket-plugin",
-    "@ngxs/form-plugin": "file:../../@ngxs/form-plugin",
-    "@ngxs/router-plugin": "file:../../@ngxs/router-plugin",
-    "@ngxs/hmr-plugin": "file:../../@ngxs/hmr-plugin",
     "core-js": "2.4.1",
     "rxjs": "5.6.0-forward-compat.4",
-    "rxjs-compat": "6.4.0",
+    "rxjs-compat": "6.2.2",
     "zone.js": "0.8.19"
   },
   "devDependencies": {
@@ -50,6 +42,6 @@
     "protractor": "5.1.2",
     "ts-node": "4.1.0",
     "tslint": "5.9.1",
-    "typescript": "2.7.1"
+    "typescript": "2.8.1"
   }
 }

integrations/hello-world-ng5/src/app/app.module.ts

@@ -1,13 +1,12 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { NgxsModule } from '@ngxs/store';
 
+import { StoreModule } from './store.module';
 import { AppComponent } from './app.component';
-import { AppState } from './app.state';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, NgxsModule.forRoot([AppState])],
+  imports: [BrowserModule, StoreModule],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

integrations/hello-world-ng5/src/app/store.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { NgxsModule } from '@ngxs/store';
+import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
+import { NgxsFormPluginModule } from '@ngxs/form-plugin';
+import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
+import { NgxsStoragePluginModule } from '@ngxs/storage-plugin';
+import { NgxsWebsocketPluginModule } from '@ngxs/websocket-plugin';
+
+import { AppState } from './app.state';
+
+@NgModule({
+  imports: [
+    NgxsModule.forRoot([AppState]),
+    NgxsReduxDevtoolsPluginModule.forRoot(),
+    NgxsFormPluginModule.forRoot(),
+    NgxsLoggerPluginModule.forRoot(),
+    NgxsStoragePluginModule.forRoot(),
+    NgxsWebsocketPluginModule.forRoot()
+
+    // TODO:  error TS2315: Type 'ModuleWithProviders' is not generic.
+    // Only support Angular 6
+    // NgxsRouterPluginModule.forRoot()
+  ],
+  exports: [NgxsModule]
+})
+export class StoreModule {}

integrations/hello-world-ng5/src/environments/environment.prod.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: true,
+  hmr: false
+};

integrations/hello-world-ng5/src/environments/environment.ts

@@ -1,3 +1,4 @@
 export const environment = {
-  production: true
+  production: false,
+  hmr: true
 };

integrations/hello-world-ng5/src/main.ts

@@ -1,13 +1,25 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BootstrapModuleFn, hmr, WebpackModule } from '@ngxs/hmr-plugin';
 
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
+declare const module: WebpackModule;
+
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch(err => console.log(err));
+const bootstrap: BootstrapModuleFn = () => platformBrowserDynamic().bootstrapModule(AppModule);
+
+if (environment.hmr) {
+  if (module['hot']) {
+    hmr(module, bootstrap).catch(err => console.error(err));
+  } 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));
+}

integrations/hello-world-ng5/tsconfig.json

@@ -2,18 +2,26 @@
   "compileOnSave": false,
   "compilerOptions": {
     "outDir": "./dist/out-tsc",
+    "baseUrl": "./",
     "sourceMap": true,
     "declaration": false,
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "target": "es5",
+    "paths": {
+      "@angular/*": ["./../node_modules/@angular/*"],
+      "@ngxs/*": ["./../../../@ngxs/*"]
+    },
     "typeRoots": [
       "node_modules/@types"
     ],
     "lib": [
       "es2017",
       "dom"
     ]
-  }
+  },
+  "exclude": [
+    "node_modules"
+  ]
 }

package.json

@@ -132,7 +132,7 @@
     "lint-staged": "^8.0.0",
     "mocha": "^6.0.0",
     "mock-socket": "^8.0.5",
-    "ng-packagr": "^4.4.5",
+    "ng-packagr": "^4.7.1",
     "npm-delay": "^1.0.4",
     "npm-run-all": "^4.1.2",
     "prettier": "1.15.3",

packages/hmr-plugin/src/public_api.ts

@@ -1,4 +1,10 @@
-export { NgxsHmrLifeCycle, NgxsHmrOptions, NgxsHmrSnapshot } from './symbols';
 export { HmrInitAction } from './actions/hmr-init.action';
+export {
+  NgxsHmrLifeCycle,
+  NgxsHmrOptions,
+  NgxsHmrSnapshot,
+  WebpackModule,
+  BootstrapModuleFn
+} from './symbols';
 export { HmrBeforeDestroyAction } from './actions/hmr-before-destroy.action';
 export { hmr } from './hmr-bootstrap';

packages/hmr-plugin/src/symbols.ts

@@ -23,7 +23,7 @@ export interface NgxsHmrLifeCycle<T = NgxsHmrSnapshot> {
 }
 
 export type HmrCallback<T> = (ctx: StateContext<T>, state: Partial<T>) => void;
-export type BootstrapModuleFn<T> = () => Promise<NgModuleRef<T>>;
+export type BootstrapModuleFn<T = any> = () => Promise<NgModuleRef<T>>;
 
 export interface NgxsHmrOptions {
   /**