test(integration): angular 5.2 + typescript 2.7

.circleci/config.yml

@@ -125,6 +125,15 @@ jobs:
           command: yarn test:ci:integration:ssr
       # - *persist_coverage // we don't run code coverage for integration tests
 
+  integration_ng5_tests:
+    <<: *job_defaults
+    steps:
+      - *attach_workspace
+      - run:
+          name: Integration Tests
+          command: yarn run integration:ng5
+      # - *persist_coverage // we don't run code coverage for integration tests
+
   upload_coverage:
     <<: *job_defaults
     environment:
@@ -189,11 +198,16 @@ workflows:
           requires:
             - build
 
+      - integration_ng5_tests:
+          requires:
+            - build
+
       - upload_coverage:
           requires:
             - unit_tests
             - integration_tests
             - integration_ssr_tests
+            - integration_ng5_tests
 
       # Publish @dev builds if no tag is specified
       - publish_dev_build_to_npm:
@@ -207,6 +221,7 @@ workflows:
             - unit_tests
             - integration_tests
             - integration_ssr_tests
+            - integration_ng5_tests
 
       # Publish package.version @latest when a v.* git tag is present
       - publish_tagged_build_to_npm:
@@ -219,3 +234,4 @@ workflows:
             - unit_tests
             - integration_tests
             - integration_ssr_tests
+            - integration_ng5_tests

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

@@ -6,12 +6,20 @@
   "apps": [
     {
       "root": "src",
-      "prefix": "app",
       "outDir": "dist",
-      "main": "main.ts",
       "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
       "tsconfig": "tsconfig.app.json",
-      "environmentSource": "environments/environment.ts"
+      "prefix": "app",
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
     }
-  ]
+  ],
+  "warnings": {
+    "typescriptMismatch": false
+  }
 }

integrations/hello-world-ng5/package.json

@@ -4,8 +4,10 @@
   "license": "MIT",
   "scripts": {
     "ng": "ng",
-    "npx": "npx",
-    "test": "npm install @ngxs/store && npx -- ng build"
+    "start": "ng serve --hmr",
+    "test": "ng build",
+    "pretest": "npm install",
+    "postinstall": "cpx -v -C \"../../@ngxs/**/*\" \"node_modules/@ngxs/\"" 
   },
   "private": true,
   "dependencies": {
@@ -18,9 +20,9 @@
     "@angular/platform-browser": "5.2.0",
     "@angular/platform-browser-dynamic": "5.2.0",
     "@angular/router": "5.2.0",
-    "@ngxs/store": "^3.3.4",
     "core-js": "2.4.1",
-    "rxjs": "5.5.6",
+    "rxjs": "5.6.0-forward-compat.4",
+    "rxjs-compat": "6.2.2",
     "zone.js": "0.8.19"
   },
   "devDependencies": {
@@ -31,6 +33,7 @@
     "@types/jasminewd2": "2.0.2",
     "@types/node": "6.0.60",
     "codelyzer": "4.0.1",
+    "cpx": "^1.5.0",
     "jasmine-core": "2.8.0",
     "jasmine-spec-reporter": "4.2.1",
     "karma": "2.0.0",
@@ -42,6 +45,6 @@
     "protractor": "5.1.2",
     "ts-node": "4.1.0",
     "tslint": "5.9.1",
-    "typescript": "2.5.3"
+    "typescript": "2.7.1"
   }
 }

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

@@ -1,14 +1,15 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
+import { StoreModule } from './store.module';
 import { AppComponent } from './app.component';
-// import { NgxsModule } from '@ngxs/store';
+
+const routes: Routes = [{ path: '', component: AppComponent }];
 
 @NgModule({
   declarations: [AppComponent],
-  // fix me after they add support
-  // imports: [BrowserModule, NgxsModule.forRoot([])],
-  imports: [BrowserModule],
+  imports: [BrowserModule, RouterModule.forRoot(routes), StoreModule],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

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

@@ -0,0 +1,7 @@
+import { State } from '@ngxs/store';
+
+@State<string[]>({
+  name: 'app',
+  defaults: []
+})
+export class AppState {}

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

@@ -0,0 +1,24 @@
+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 { NgxsRouterPluginModule } from '@ngxs/router-plugin';
+
+import { AppState } from './app.state';
+
+@NgModule({
+  imports: [
+    NgxsModule.forRoot([AppState]),
+    NgxsReduxDevtoolsPluginModule.forRoot(),
+    NgxsFormPluginModule.forRoot(),
+    NgxsLoggerPluginModule.forRoot(),
+    NgxsStoragePluginModule.forRoot(),
+    NgxsWebsocketPluginModule.forRoot(),
+    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/src/polyfills.ts

@@ -0,0 +1 @@
+import 'zone.js/dist/zone';

integrations/hello-world-ng5/tsconfig.json

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

package.json

@@ -81,8 +81,7 @@
     "docs": "typedoc packages/store/src --options typedoc.json",
     "format": "prettier --write \"{packages,integration}/**/*.ts\"",
     "// - INTEGRATION": "Integration builds",
-    "integration:link": "cd @ngxs && npm link && cd ..",
-    "integration:ng5": "npm run integration:link && cd integrations/hello-world-ng5 && npm install && npm test"
+    "integration:ng5": "cd integrations/hello-world-ng5 && npm test"
   },
   "private": true,
   "devDependencies": {
@@ -133,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 {
   /**

packages/router-plugin/src/router.module.ts

@@ -3,13 +3,13 @@ import { NgxsModule } from '@ngxs/store';
 import { DefaultRouterStateSerializer, RouterStateSerializer } from './serializer';
 import { RouterState } from './router.state';
 
-// NOTE: Must mark as `dynamic` due to
-// https://github.com/dherges/ng-packagr/issues/767
-export const NgxsModuleRouterState = NgxsModule.forFeature([RouterState]);
-
 // @dynamic
 @NgModule({
-  imports: [NgxsModuleRouterState],
+  imports: [
+    // NOTE: Must mark as `dynamic` due to
+    // https://github.com/dherges/ng-packagr/issues/767
+    NgxsModule.forFeature([RouterState])
+  ],
   providers: [{ provide: RouterStateSerializer, useClass: DefaultRouterStateSerializer }]
 })
 export class NgxsRouterPluginModule {

packages/router-plugin/src/router.state.ts

@@ -16,7 +16,7 @@ import {
   RouterNavigation
 } from './router.actions';
 import { RouterStateSerializer } from './serializer';
-import { NgZone } from '@angular/core';
+import { NgZone, Injectable } from '@angular/core';
 
 export type RouterStateModel<T = RouterStateSnapshot> = {
   state?: T;
@@ -30,6 +30,7 @@ export type RouterStateModel<T = RouterStateSnapshot> = {
     navigationId: undefined
   }
 })
+@Injectable()
 export class RouterState {
   private routerStateSnapshot: RouterStateSnapshot;
   private routerState: RouterStateModel;