Skip to content

Release 12.0.0-beta.0

Pre-release
Pre-release
Compare
Choose a tag to compare
@SuperITMan SuperITMan released this 24 Jan 13:21
· 253 commits to master since this release
12.0.0-beta.0
7b35373

12.0.0-beta.0 (2024-01-24)

Bug Fixes

  • build-main: fix npm run commit script in order to fix the usage on Windows OS (ec74726)
  • build-main: remove wrong spaces in .editorconfig file (58d3c26)
  • stark-all: disable emitDecoratorMetadata in tsconfig of stark-* packages in order to solve build warnings (d37ba9f), closes ng-packagr/ng-packagr#2056
  • stark-all: fix compodoc dependency to v1.1.13 (bfcd2f3)
  • stark-all: remove vulnerable event-source-polyfill dependency (713239f)
  • stark-build: fix index-html transform script to support ng12 production build (aab9a4f)
  • stark-build: remove csp 'plugin-types' rule and adapt 'object-src' rule (0fd48d1), closes #3086
  • stark-build: remove support for obsolete webpack-monitor (095117c)
  • stark-core: add support for http 204 status code when persisting logs (e24d92b)
  • stark-testing: remove useless coveralls dependency (df5bed4)
  • stark-ui: dropdown - fix click event not working around the mat-select element (cd29848)
  • stark-ui: fix ViewDestroyedError issue linked to formControl usage (f0857e8), closes #2874
  • stark-ui: handles paste and drop event on the restrict-input directive (28791f3), closes #1905
  • stark-ui: minimap - fix [class.open]="minimapMenuTrigger.menuOpen" not changing when menu closed (50034b3)
  • stark-ui: pretty-print - add support for uppercase extension names (9e1e837)
  • stark-ui: remove KeybordEvent.char (c25fec8), closes #3634
  • stark-ui: table action column do not works when language is NL (20c010e), closes #3391

chore

  • stark-all: upgrade project engine from NodeJS-12_npm-7 to NodeJS-14_npm-8 (ca333ce)
  • stark-ui: change linting engine from TSLint to ESLint (781d133)

Features

  • build-main: adapt husky configuration after husky upgrade (b784013)
  • build-main: upgrade npm to v7 and NodeJS to v12 (37d400a)
  • showcase: adapt generic-search demo to use public results$ variable directly in template (b8ca98f)
  • showcase: add the ngx-form-errors demo to the showcase (4a98d3c), closes #1195
  • showcase: update generic-search actions style (7dd7c09)
  • showcase: upgrade to Angular 12 (26327e0)
  • stark-all: remove ngrx-store-freeze dependency thanks to @ngrx/store 8.x upgrade (4af3e25)
  • stark-all: upgrade npm to v7 and NodeJS to v12 (1e127a1)
  • stark-build: add Stylelint plugin in build configuration (30a191d)
  • stark-build: enable writeToDisk in webpack-dev-server configuration (95dcf2c)
  • stark-build: merge webpack configurations into a single new webpack.config.js file (7791bc2), closes #2558
  • stark-build: replace ContextReplacementPlugin by MomentLocalesPlugin to reduce Moment.js size (68c6489)
  • stark-build: update TSLint to v6.1.3 (f77d719)
  • stark-build: upgrade to Angular 12 (44502de)
  • stark-build: upgrade to Angular 8 (c3c83b6)
  • stark-core: add support for httpOnly cookie in StarkXSRFService (9fe3907), closes #3136
  • stark-core: removed Throw Error to create stack trace for IE (c58408f), closes #3636
  • stark-core: update class-validator dependency to version ~0.13.1 (1fd6700)
  • stark-core: update uuid and @types/uuid dependencies to version "^8.3.0" (15b5c08), closes #2759 #2760
  • stark-core: update error handling actions style (727c244)
  • stark-core: update logging actions style (3dd57d2)
  • stark-core: update routing actions style (97b067d)
  • stark-core: update session actions style (810bbc1)
  • stark-core: update settings actions style (f1803a8)
  • stark-core: update user actions style (8418efc)
  • stark-core: upgrade to Angular 12 (367c2b2)
  • stark-core: upgrade to Angular 8 (3d0b6ea)
  • stark-rbac: update rbac actions style (c4efd6a)
  • stark-rbac: upgrade to Angular 12 (d07c680)
  • stark-testing: bump @types/jasmine in /packages/stark-testing/package.json from 3.6.4 to 3.8.2 (758bc2c)
  • stark-testing: improve karma config for ng test usage (82d0bac)
  • stark-testing: replace karma-typescript by karma + @angular/devkit:build-angular (a9e06dc)
  • stark-testing: upgrade to Angular 12 + karma 6 (2fed5d6)
  • stark-ui: add support for Angular html templates in pretty-print component (b9e2aa2)
  • stark-ui: generic-search - adapt results$ variable visibility to public (99d1ae8), closes #3082
  • stark-ui: keep highlight the menu when go to child state (4f55b60), closes #3521
  • stark-ui: replace pretty-data by prettier+@sqltools/formatter in pretty-print component (286556e), closes #2543
  • stark-ui: split stark-ui modules in different chunks to reduce bundle size of applications (205f136)
  • stark-ui: update message-pane actions style (3ff099f)
  • stark-ui: update prettier to version 3.1 (227e46b)
  • stark-ui: update progress-indicator actions style (374c429)
  • stark-ui: update styles for Sass v8 usage (1be66d3)
  • stark-ui: update styles to allow theme customization (5a2a1fb)
  • stark-ui: upgrade to Angular 12 (4869f11)
  • stark-ui: upgrade to Angular 8 (e19d4a8)
  • starter: adapt husky configuration after husky upgrade (9af712d)
  • starter: upgrade to Angular 12 (6754a96)

Reverts

  • Revert "chore(release): release 12.0.0-beta.0" (743bbb7)
  • Revert "chore(release): release 12.0.0-beta.0" (6cb7370)
  • Revert "chore(release): release 12.0.0-beta.0" (00763da)

BREAKING CHANGES

  • stark-ui: The selector of the StarkSessionTimeoutWarningDialogComponent component has been changed from
    "session-timeout-warning-dialog" to "stark-session-timeout-warning-dialog".

  • stark-all: The minimum versions for NodeJS and npm are now:

    • NodeJS: v14.20.0
    • npm: v8.19.1

  • stark-testing: Adapt test ci script in "package.json":

    // BEFORE
"test-fast:ci": "cross-env CI=1 npm run ng test --code-coverage",

// AFTER
"test-fast:ci": "npm run ng test -- --watch=false --code-coverage",

  • stark-ui: Due to upgrade to @angular/material v12, SCSS files should be adapted to use the
    new @use word instead of @import.

    Your current "src/styles/_theme.scss" should look like this:

    @import "variables";
@import "~@nationalbankbelgium/stark-ui/assets/theming";

    After upgrading to Stark v12, you should update the file as following:

    @use "variables";
@use "sass:map";

@use "~@angular/material" as mat;
@use "~@nationalbankbelgium/stark-ui" as stark-ui;

@include mat.core();
@include stark-ui.set-stark-ui-styles();

    As all the stark-ui styles are configured thanks to set-stark-ui-styles method, you should
    remove @import "~@nationalbankbelgium/stark-ui/assets/stark-ui-bundle"; import
    in "src/styles/styles.scss".

    If you use Stark media queries variables such as $tablet-query, $mobile-only-query...

    You should add the following @use rule at the top of your files:

    @use "~@nationalbankbelgium/stark-ui/styles/media-queries" as *;

  • stark-build: Remove useless babel-loader dependency + remove IE 11 support in development mode

  • stark-build: Due to Angular upgrade, "angular.json" file has to be updated as following:

    1. Edit projects.<project_name>.architect.build.options:

    Before:

    {
  // ...
  "projects": {
    "<project_name>": {
      // ...
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./node_modules/@nationalbankbelgium/stark-build/config/webpack-partial.dev.js",
              "mergeStrategies": {
                "modules.rules": "prepend",
                "plugins": "prepend",
                "devServer": "prepend",
                "replaceDuplicatePlugins": false
              }
            },
            // ...
          },
        }
      }
    }
  }
}

    After:

    {
  // ...
  "projects": {
    "<project_name>": {
      // ...
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./node_modules/@nationalbankbelgium/stark-build/config/webpack.config.js"
            },
            // /!\ Add following line
            "indexTransform": "./node_modules/@nationalbankbelgium/stark-build/config/index-html.transform.js",
            // ...
          },
        }
      }
    }
  }
}
    1. Edit projects.<project_name>.architect.build.configurations.<environment>:

    In Stark 12, there is only one "webpack.config.js" file.
    Thanks to this, this is no longer needed to have specific configurations for other environment.

    You need to remove the following lines in
    projects.<project_name>.architect.build.configurations.<environment>:

    Before:

    {
  // ...
  "projects": {
    "<project_name>": {
      // ...
      "architect": {
        "build": {
          "configurations": {
            "production": {
              // Remove all the "customWebpackConfig"
              "customWebpackConfig": {
                "path": "./node_modules/@nationalbankbelgium/stark-build/config/webpack-partial.prod.js",
                "mergeStrategies": {
                  "modules.rules": "prepend",
                  "plugins": "prepend",
                  "devServer": "prepend",
                  "replaceDuplicatePlugins": false
                }
              },
              // ...
            },
            // ...
          },
        }
      }
    }
  }
}

    After:

    {
  //...
  "projects": {
    "<project_name>": {
      // ...
      "architect": {
        "build": {
          "configurations": {
            "production": {
              // "customWebpackConfig" is entirely removed
              // ...
            },
            // ...
          },
        }
      }
    }
  }
}
    1. Edit projects.<project_name>.architect.serve.builder:

    Before:

    {
  //...
  "projects": {
    "<project_name>": {
      // ...
      "architect": {
        "serve": {
          "builder": "@angular-builders/dev-server:generic",
          "options": {
            "browserTarget": "<project_name>:build",
            "port": 3000,
            "open": true
          },
          // ...
        }
      }
    }
  }
}

    After:

    {
  //...
  "projects": {
    "<project_name>": {
      // ...
      "architect": {
        "serve": {
          // /!\ Edit following line
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "<project_name>:build",
            "port": 3000,
            "open": true
          },
          // ...
        }
      }
    }
  }
}
    1. Edit projects.<project_name>.architect.test.builder:

    Add support for stark-testing karma config with command ng test

    Before:

    {
  //...
  "projects": {
    "<project_name>": {
      // ...
      "architect": {
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "base.spec.ts",
            "karmaConfig": "./karma.conf.js",
            "tsConfig": "tsconfig.spec.json"
          }
        }
      }
    }
  }
}

    After:

    {
  //...
  "projects": {
    "<project_name>": {
      // ...
      "architect": {
        "test": {
          // /!\ Edit following line
          "builder": "@angular-builders/custom-webpack:karma",
          "options": {
            "main": "base.spec.ts",
            "karmaConfig": "./karma.conf.js",
            "tsConfig": "tsconfig.spec.json"
          }
        }
      }
    }
  }
}
    1. Edit projects.<project_name>.architect.build.configurations.hmr:

    Add support for CSS Hot Reloading by setting extractCss property to false in hmr configuration.

    Before:

    {
  // ...
  "projects": {
    "<project_name>": {
      // ...
      "architect": {
        "build": {
          "configurations": {
            "hmr": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.hmr.ts"
                }
              ]
            },
            // ...
          },
        }
      }
    }
  }
}

    After:

    {
  // ...
  "projects": {
    "<project_name>": {
      // ...
      "architect": {
        "build": {
          "configurations": {
            "hmr": {
              "extractCss": false, // <-- Line to add
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.hmr.ts"
                }
              ]
            },
            // ...
          },
        }
      }
    }
  }
}

  • stark-build: Adapt "src/index.html" file

    1. Adapt stark variables usage
      As htmlWebpackPlugin is no longer supported by Angular CLI, the options related to this plugin
      have been changed.
      Instead of using htmlWebpackPlugin, you need to use starkOptions like this:

    Before:

    <%= htmlWebpackPlugin.options.starkAppMetadata.name %>
<!-- or -->
<%= htmlWebpackPlugin.options.starkAppConfig.defaultLanguage %>
<!-- or -->
<%= htmlWebpackPlugin.options.metadata.TITLE %>

    After:

    <%= starkOptions.starkAppMetadata.name %>
<!-- or -->
<%= starkOptions.starkAppConfig.defaultLanguage %>
<!-- or -->
<%= starkOptions.metadata.TITLE %>

    Thanks to the following search & replace:

    • search: htmlWebpackPlugin.options.
    • replace: starkOptions.

    It should be easy to adapt the index.html file.

    1. Remove obsolete code related to webpack-dev-server

    Remove the following piece of code in "src/index.html"

    <!-- move the block of webpack dev server to the <head> section and change the IF conditions -->
<% if (starkOptions.starkAppMetadata.IS_DEV_SERVER && starkOptions.starkAppMetadata.HMR !== true) { %>
<!-- Webpack Dev Server reload -->
<script src="/webpack-dev-server.js"></script>
<% } %>

  • stark-build: Adapt "package.json" file. Remove scripts with MONITOR

    Due to Angular upgrade, webpack-monitor stopped working.
    Since the package was no longer maintained (4 years),
    we decided to remove the support from stark-build.

    The following scripts should be removed from "package.json" file:

    {
  "scripts": {
    "build:dev:monitor": "npx mkdirp reports && cross-env MONITOR=1 npm run build:dev",
    "server:dev:monitor": "npm run clean:dist && cross-env MONITOR=1 npm run ng -- serve",
    "start:monitor": "npx mkdirp reports && cross-env MONITOR=1 npm run server:dev"
  }
}

  • stark-build: Due to Angular upgrade, webpack-monitor stopped working. Since the package was no longer maintained (4 years),
    we decided to remove the support from stark-build.

    The following scripts should be removed from "package.json" file:

    {
  "scripts": {
    "build:dev:monitor": "npx mkdirp reports && cross-env MONITOR=1 npm run build:dev",
    "server:dev:monitor": "npm run clean:dist && cross-env MONITOR=1 npm run ng -- serve",
    "start:monitor": "npx mkdirp reports && cross-env MONITOR=1 npm run server:dev"
  }
}

  • stark-all: Stark framework now requires:

    • NodeJS >= 12.22.1
    • npm >= 7.12.1

  • stark-build: Due to TSLint update, it is required to adapt the usage in "tslint.json" file at the root of the project:

    // Before
{
  "extends": [
    // ...
    "@nationalbankbelgium/code-style/tslint/5.20.x",
    // ...
  ]
  // ...
}

// After
{
  "extends": [
    // ...
    "@nationalbankbelgium/code-style/tslint/6.1.x",
    // ...
  ]
  // ...
}

  • stark-core: Due to class-validator update:

    • Validatorjs releases contain some breaking changes e.g. IsMobileNumber or IsHexColor. Please
      check validatorjs CHANGELOG

    • Validation functions was removed from Validator class to enable tree shaking.

      BEFORE:

      import { Validator } from 'class-validator';

const validator = new Validator();
validator.isNotIn(value, possibleValues);
validator.isBoolean(value);

      AFTER:

      import { isNotIn, isBoolean } from 'class-validator';

isNotIn(value, possibleValues);
isBoolean(value);

    • IsNumberString decorator arguments changed to
      @IsNumberString(ValidatorJS.IsNumericOptions, ValidationOptions).

  • stark-testing: Adapt angular.json, package.json and base.spec.ts files.

    Check test config in "angular.json":

    // ...
"test": {
  "builder": "@angular-builders/custom-webpack:karma",
  "options": {
    "main": "base.spec.ts",
    "karmaConfig": "./karma.conf.js",
    "tsConfig": "tsconfig.spec.json"
  }
}

    Check tests scripts in "package.json":

    // BEFORE
"test-fast": "karma start",
"test-fast:ci": "karma start karma.conf.ci.js",

// AFTER
"test-fast": "npm run ng test",
"test-fast:ci": "cross-env CI=1 npm run ng test --code-coverage",

    Adapt "base.spec.ts" file as follows:

    "use strict";

import "core-js/es";
import "core-js/proposals/reflect-metadata";

// IE polyfills

// See https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill
/* tslint:disable:no-unbound-method */
if (!Element.prototype.matches) {
	Element.prototype.matches = (<any>Element.prototype).msMatchesSelector ||
	  Element.prototype.webkitMatchesSelector;
}
/* tslint:enable:no-unbound-method */

// See: https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach#Polyfill
if ((<any>window).NodeList && !NodeList.prototype.forEach) {
	(<any>NodeList.prototype).forEach = Array.prototype.forEach;
}

/* tslint:disable:no-import-side-effect */
import "zone.js/dist/zone";
import "zone.js/dist/zone-testing";
import "zone.js/dist/long-stack-trace-zone";
/* tslint:enable:no-import-side-effect */

// define global environment variable (used in some places in stark-core and stark-ui)
global["ENV"] = "development";

import { getTestBed } from "@angular/core/testing";
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from "@angular/platform-browser-dynamic/testing";

// tslint:disable:completed-docs bool-param-default
declare const require: {
	context(path: string, deep?: boolean, filter?: RegExp): {
		keys(): string[];
		<T>(id: string): T;
	};
};
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

// Then we find all the tests.
const context = require.context('./src', true, /\.spec\.ts$/);
// And load the modules.
context.keys().forEach(context);

  • stark-all: Remove ngrx-store-freeze dependency in favor of new built-in runtime checks in @ngrx/[email protected].

    Adapt code as follows:

    // Before
import { storeFreeze } from "ngrx-store-freeze";
//...
export const metaReducers: MetaReducer<State>[] =
  ENV === "development" ? [logger, storeFreeze] : [];

@NgModule({
    imports: [
      CommonModule,
      StoreModule.forRoot(reducer, {
        metaReducers: metaReducers
      }),
    ]
  })
  export class AppModule {}

// After
export const metaReducers: MetaReducer<State>[] = ENV === "development" ? [logger] : [];

@NgModule({
  imports: [
    CommonModule,
    StoreModule.forRoot(rootReducer, {
      metaReducers: metaReducers,
      runtimeChecks: {
        strictStateImmutability: true,
        strictActionImmutability: true
      }
    }),
  ]
})
export class AppModule {}

    See: https://ngrx.io/guide/migration/v8#deprecation-of-ngrx-store-freeze

  • stark-rbac: Due to an improvement on how actions are defined, the enum StarkRBACAuthorizationActionsTypes
    became obsolete so it has been removed.

As a result, the following actions have been changed:

  • StarkUserNavigationUnauthorized(public targetState: string)
    -> StarkRBACAuthorizationActions.userNavigationUnauthorized({ targetState: string })
  • StarkUserNavigationUnauthorizedRedirected(public targetState: string, public redirectionState: string) ->
    StarkRBACAuthorizationActions.userNavigationUnauthorizedRedirected({ targetState: string; redirectionState: string })

And also the previous union type has been replaced:
StarkRBACAuthorizationActions -> StarkRBACAuthorizationActions.Types.

Change in effect:

// Before
@Effect({ dispatch: false })
public starkRBACNavigationUnauthorized$(): Observable<void> {
    return this.actions$.pipe(
        ofType<StarkUserNavigationUnauthorized>(
            StarkRBACAuthorizationActionsTypes.RBAC_USER_NAVIGATION_UNAUTHORIZED
        ),
        map((action: StarkUserNavigationUnauthorized) => {
            // some logic
        })
    );
}

// After
public starkRBACNavigationUnauthorizedRedirected$ = createEffect(
    () => this.actions$.pipe(
        ofType(StarkRBACAuthorizationActions.userNavigationUnauthorized),
        map((action) => {
            // some logic
        })
    ),
    { dispatch: false }
);

Change in action usage:

// Before
this.store.dispatch(new StarkUserNavigationUnauthorized(transition.targetState().name()));

// After
this.store.dispatch(StarkRBACAuthorizationActions.userNavigationUnauthorized({
    targetState: transition.targetState().name()
}));
  • stark-ui: Due to an improvement on how actions are defined, the enum StarkMessagePaneActionsTypes
    became obsolete so it has been removed.

As a result, the following actions have been changed:

  • StarkAddMessages(public messages: StarkMessage[])
    -> StarkMessagePaneActions.addMessages({ messages: StarkMessage[] })
  • StarkRemoveMessages(public messages: StarkMessage[])
    -> StarkMessagePaneActions.removeMessages({ messages: StarkMessage[] })
  • StarkClearMessages() -> StarkMessagePaneActions.clearMessages()
  • StarkGetAllMessages() -> StarkMessagePaneActions.getAllMessages()

And also the previous union type has been replaced:
StarkMessagePaneActions -> StarkMessagePaneActions.Types.

Change in effect:

// Before
@Effect({ dispatch: false })
public starkAddMessages$(): Observable<void> {
    return this.actions$.pipe(
        ofType<StarkAddMessages>(StarkMessagePaneActionsTypes.ADD_MESSAGES),
        map((action: StarkAddMessages) => {
            // some logic
        })
    );
}

// After
public starkAddMessages$ = createEffect(
    () => this.actions$.pipe(
        ofType(StarkMessagePaneActions.addMessages),
        map((action) => {
            // some logic
        })
    ),
    { dispatch: false }
);

Change in action usage:

// Before
this.store.dispatch(new StarkAddMessages(messages));

// After
this.store.dispatch(StarkMessagePaneActions.addMessages({ messages: messages }));
  • stark-ui: Due to an improvement on how actions are defined, the enum StarkProgressIndicatorActionsTypes
    became obsolete so it has been removed.

As a result, the following actions have been changed:

  • StarkProgressIndicatorRegister(public progressIndicatorConfig: StarkProgressIndicatorFullConfig ) -> StarkProgressIndicatorActions.register({ progressIndicatorConfig: StarkProgressIndicatorFullConfig })
  • StarkProgressIndicatorDeregister(public topic: string) ->
    StarkProgressIndicatorActions.deregister({ topic: string })
  • StarkProgressIndicatorHide(public topic: string)
    -> StarkProgressIndicatorActions.hide({ topic: string })
  • StarkProgressIndicatorShow(public topic: string)
    -> StarkProgressIndicatorActions.show({ topic: string })

And also the previous union type has been replaced:
StarkProgressIndicatorActions -> StarkProgressIndicatorActions.Types.

Change in effect:

// Before
@Effect({ dispatch: false })
public starkProgressIndicatorShow$(): Observable<void> {
    return this.actions$.pipe(
        ofType<StarkProgressIndicatorShow>(
            StarkProgressIndicatorActionsTypes.PROGRESS_INDICATOR_SHOW
        ),
        map((action: StarkProgressIndicatorShow) => {
            // some logic
        })
    );
}

// After
public starkProgressIndicatorShow$ = createEffect(
    () => this.actions$.pipe(
        ofType(StarkProgressIndicatorActions.show),
        map((action) => {
            // some logic
        })
    ),
    { dispatch: false }
);

Change in action usage:

// Before
this.store.dispatch(new StarkProgressIndicatorShow(topic));

// After
this.store.dispatch(StarkProgressIndicatorActions.show({ topic: topic }));
  • stark-core: Due to an improvement on how actions are defined, the enum StarkRoutingActionsTypes
    became obsolete so it has been removed.

As a result, the following actions have been changed:

  • StarkNavigate(public currentState: string, public newState: string, public params?: RawParams, public options?: TransitionOptions) -> StarkRoutingActions.navigate({ currentState: string; newState: string; params?: RawParams; options?: TransitionOptions })
  • StarkNavigateSuccess(public previousState: string, public currentState: string, public params?: RawParams) -> StarkRoutingActions.navigateSuccess({ previousState: string; currentState: string; params?: RawParams })
  • StarkNavigateFailure(public currentState: string, public newState: string, public params: RawParams, public error: string) -> StarkRoutingActions.navigateFailure({ currentState: string; newState: string; params?: RawParams; error: string })
  • StarkNavigateRejection(public currentState: string, public newState: string, public params: RawParams, public reason: string) -> StarkRoutingActions.navigateRejection({ currentState: string; newState: string; params: RawParams; reason: string })
  • StarkNavigationHistoryLimitReached() -> StarkRoutingActions.navigationHistoryLimitReached()
  • StarkReload(public state: string) -> StarkRoutingActions.reload({ state: string })
  • StarkReloadSuccess(public state: string, public params: RawParams)
    -> StarkRoutingActions.reloadSuccess({ state: string; params: RawParams })
  • StarkReloadFailure(public state: string, public params: RawParams)
    -> StarkRoutingActions.reloadFailure({ state: string; params: RawParams })

And also the previous union type has been replaced:
StarkRoutingActions -> StarkRoutingActions.Types.

Change in effect:

// Before
@Effect({ dispatch: false })
public starkNavigateSuccess$(): Observable<void> {
    return this.actions$.pipe(
        ofType<StarkNavigateSuccess>(StarkRoutingActionsTypes.NAVIGATE_SUCCESS),
        map((action: StarkNavigateSuccess) => {
            // some logic
        })
    );
}

// After
public starkNavigateSuccess$ = createEffect(
    () => this.actions$.pipe(
        ofType(StarkRoutingActions.navigateSuccess),
        map((action) => {
            // some logic
        })
    ),
    { dispatch: false }
);

Change in action usage:

// Before
this.store.dispatch(new StarkNavigateSuccess(previousState, currentState, params));

// After
this.store.dispatch(StarkRoutingActions.navigateSuccess({
    previousState: previousState,
    currentState: currentState,
    params: params
}));
  • stark-core: Due to an improvement on how actions are defined, the enum StarkLoggingActionsTypes
    became obsolete so it has been removed.

As a result, the following actions have been changed:

  • StarkSetLoggingApplicationId(public applicationId: string)
    -> StarkLoggingActions.setLoggingApplicationId({ applicationId: string })
  • StarkLogMessageAction(public message: StarkLogMessage)
    -> StarkLoggingActions.logMessage({ message: StarkLogMessage })
  • StarkFlushLogMessages(public numberOfMessagesToFlush: number)
    -> StarkLoggingActions.flushLogMessages({ numberOfMessagesToFlush: number })

And aso the previous union type has been replaced:
StarkLoggingActions -> StarkLoggingActions.Types.

Change in effect:

// Before
@Effect({ dispatch: false })
public starkLogMessageAction$(): Observable<void> {
    return this.actions$.pipe(
        ofType<StarkLogMessageAction>(StarkLoggingActionsTypes.LOG_MESSAGE),
        map((action: StarkLogMessageAction) => {
            // some logic
        })
    );
}

// After
public starkLogMessageAction$ = createEffect(
    () => this.actions$.pipe(
        ofType(StarkLoggingActions.logMessage),
        map((action) => {
            // some logic
        })
    ),
    { dispatch: false }
);

Change in action usage:

// Before
this.store.dispatch(new StarkLogMessageAction(message));

// After
this.store.dispatch(StarkLoggingActions.logMessage({ message: message }));
  • stark-core: Due to an improvement on how actions are defined, the enum StarkSettingsActionsTypes
    became obsolete so it has been removed.

As a result, the following actions have been changed:

  • StarkPersistPreferredLanguage(public language: string)
    -> StarkSettingsActions.persistPreferredLanguage({ language: string })
  • StarkPersistPreferredLanguageSuccess()
    -> StarkSettingsActions.persistPreferredLanguageSuccess()
  • StarkPersistPreferredLanguageFailure(public error: any)
    -> StarkSettingsActions.persistPreferredLanguageFailure({ error: any })
  • StarkSetPreferredLanguage(public language: string)
    -> StarkSettingsActions.setPreferredLanguage({ language: string })

And also the previous union type has been replaced:
StarkSettingsActions -> StarkSettingsActions.Types.

Change in effect:

// Before
@Effect({ dispatch: false })
public starkSetPreferredLanguage$(): Observable<void> {
    return this.actions$.pipe(
        ofType<StarkSetPreferredLanguage>(StarkSettingsActionsTypes.SET_PREFERRED_LANGUAGE),
        map((action: StarkSetPreferredLanguage) => {
            // some logic
        })
    );
}

// After
public starkSetPreferredLanguage$ = createEffect(
    () => this.actions$.pipe(
        ofType(StarkSettingsActions.setPreferredLanguage),
        map((action) => {
            // some logic
        })
    ),
    { dispatch: false }
);

Change in action usage:

// Before
this.store.dispatch(new StarkSetPreferredLanguage(language));

// After
this.store.dispatch(StarkSettingsActions.StarkSetPreferredLanguage({ language: language }));
  • stark-core: Due to an improvement on how actions are defined, the enum StarkSessionActionsTypes
    became obsolete so it has been removed.

As a result, the following actions have been changed:

  • StarkChangeLanguage(public languageId: string)
    -> StarkSessionActions.changeLanguage({ languageId: string })
  • StarkChangeLanguageSuccess(public languageId: string)
    -> StarkSessionActions.changeLanguageSuccess({ languageId: string })
  • StarkChangeLanguageFailure(public error: any)
    -> StarkSessionActions.changeLanguageFailure({ error: any })
  • StarkInitializeSession(public user: StarkUser)
    -> StarkSessionActions.initializeSession({ user: StarkUser })
  • StarkInitializeSessionSuccess() -> StarkSessionActions.initializeSessionSuccess()
  • StarkDestroySession() -> StarkSessionActions.destroySession()
  • StarkDestroySessionSuccess() -> StarkSessionActions.destroySessionSuccess()
  • StarkSessionTimeoutCountdownStart(public countdown: number)
    -> StarkSessionActions.sessionTimeoutCountdownStart({ countdown: number })
  • StarkSessionTimeoutCountdownStop() -> StarkSessionActions.sessionTimeoutCountdownStop()
  • StarkSessionTimeoutCountdownFinish() -> StarkSessionActions.sessionTimeoutCountdownFinish()
  • StarkSessionLogout() -> StarkSessionActions.sessionLogout()
  • StarkUserActivityTrackingPause() -> StarkSessionActions.userActivityTrackingPause()
  • StarkUserActivityTrackingResume() -> StarkSessionActions.userActivityTrackingResume()

And also the previous union type has been replaced:
StarkSessionActions -> StarkSessionActions.Types.

Change in effect:

// Before
@Effect({ dispatch: false })
public starkChangeLanguageSuccess$(): Observable<void> {
    return this.actions$.pipe(
        ofType<StarkChangeLanguageSuccess>(StarkSessionActionsTypes.CHANGE_LANGUAGE_SUCCESS),
        map((action: StarkChangeLanguageSuccess) => {
            // some logic
        })
    );
}

// After
public starkChangeLanguageSuccess$ = createEffect(
    () => this.actions$.pipe(
        ofType(StarkSessionActions.changeLanguageSuccess),
        map((action) => {
            // some logic
        })
    ),
    { dispatch: false }
);

Change in action usage:

// Before
this.store.dispatch(new StarkChangeLanguageSuccess(languageId));

// After
this.store.dispatch(StarkSessionActions.changeLanguageSuccess({ languageId: languageId }));
  • stark-core: Due to an improvement on how actions are defined, the enum StarkErrorHandlingActionsTypes
    became obsolete so it has been removed.

As a result, the following actions have been changed:

  • StarkUnhandledError(public error: any)
    -> StarkErrorHandlingActions.unhandledError({ error: any })

And also the previous union type has been replaced:
StarkErrorHandlingActions -> StarkErrorHandlingActions.Types.

Change in effect:

// Before
@Effect({ dispatch: false })
public starkUnhandledError$(): Observable<void> {
    return this.actions$.pipe(
        ofType<StarkUnhandledError>(StarkErrorHandlingActionTypes.UNHANDLED_ERROR),
        map((action: StarkUnhandledError) => {
            // some logic
        })
    );
}

// After
public starkUnhandledError$ = createEffect(
    () => this.actions$.pipe(
        ofType(StarkErrorHandlingActions.unhandledError),
        map((action) => {
            // some logic
        })
    ),
    { dispatch: false }
);

Change in action usage:

// Before
this.store.dispatch(new StarkUnhandledError(error));

// After
this.store.dispatch(StarkErrorHandlingActions.unhandledError({ error: error }));
  • stark-core: Due to an improvement on how actions are defined, the enum StarkUserActionsTypes became obsolete
    so it has been removed.

As a result, the following actions have been changed:

  • StarkFetchUserProfile() -> StarkUserActions.fetchUserProfile()
  • StarkFetchUserProfileSuccess(public user: StarkUser)
    -> StarkUserActions.fetchUserProfileSuccess({ user: StarkUser })
  • StarkFetchUserProfileFailure(public error: StarkHttpErrorWrapper | Error)
    -> StarkUserActions.fetchUserProfileFailure({ error: StarkHttpErrorWrapper | Error })
  • StarkGetAllUsers() -> StarkUserActions.getAllUsers()
  • StarkGetAllUsersSuccess(public users: StarkUser[])
    -> StarkUserActions.getAllUsersSuccess({ users: StarkUser[] })
  • StarkGetAllUsersFailure(public message: string)
    -> StarkUserActions.getAllUsersFailure({ message: string })

And also the previous union type has been replaced: StarkUserActions -> StarkUserActions.Types.

Change in effect:

// Before
@Effect({ dispatch: false })
public starkFetchUserProfileSuccess$(): Observable<void> {
    return this.actions$.pipe(
        ofType<StarkFetchUserProfileSuccess>(StarkUserActionTypes.FETCH_USER_PROFILE_SUCCESS),
        map((action: StarkFetchUserProfileSuccess) => {
            // some logic
        })
    );
}

// After
public starkFetchUserProfileSuccess$ = createEffect(
    () => this.actions$.pipe(
        ofType(StarkUserActions.fetchUserProfileSuccess),
        map((action) => {
            // some logic
        })
    ),
    { dispatch: false }
);

Change in action usage:

// Before
this.store.dispatch(new StarkFetchUserProfileSuccess(starkUser));

// After
this.store.dispatch(StarkUserActions.fetchUserProfileSuccess({ user: starkUser }));

  • stark-build: Simplify and improve integration of stark-build inside angular projects. Need to adapt "angular.json" file.

    Before:

    {
  //...
  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./node_modules/@nationalbankbelgium/stark-build/config/webpack-partial.dev.js",
          "mergeStrategies": {
            "modules.rules": "prepend",
            "plugins": "prepend",
            "devServer": "prepend",
            "replaceDuplicatePlugins": false
          }
        },
        // ...
      },
      "configurations": {
        // ...
        "production": {
          "customWebpackConfig": {
            "path": "./node_modules/@nationalbankbelgium/stark-build/config/webpack-partial.prod.js",
            "mergeStrategies": {
              "modules.rules": "prepend",
              "plugins": "prepend",
              "replaceDuplicatePlugins": false
            }
          },
          // ...
        }
      }
    }
  }
}

    After:

    {
  //...
  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./node_modules/@nationalbankbelgium/stark-build/config/webpack.config.js"
          // mergeStrategies property is removed
        },
        // ...
      },
      "configurations": {
        // ...
        "production": {
          // "customWebpackConfig" property is removed
          // ...
        }
      }
    }
  }
}

  • stark-core: Related to "@uirouter/[email protected]":

    Removed string based lazy module loading via loadChildren
    Previously, we supported loadChildren: './lazymodule/lazy.module.ts#LazyModule'
    This lazy load mechanism is deprecated in Angular 8 in favor of:
    loadChildren: (): any => import('./lazymodule/lazy.module).then(x => x.LazyModule)

    See: ui-router/angular@2f1506c

    Due to this change, the following provider should be removed from
    "src/app/app.module.ts":

    @NgModule({
  // ...
  providers: [
    // ...
    // /!\ Remove the following line
    { provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader }, // needed for ui-router
  ]
})

  • stark-build: Support for htmlWebpackPlugin.options has been removed.
    A new support for starkAppMetadata, starkAppConfig and metadata has been implemented. You can now use starkOptions instead of htmlWebpackPlugin.options.
    See the following example:

    Before:

    <%= htmlWebpackPlugin.options.starkAppMetadata.name %>
<!-- or -->
<%= htmlWebpackPlugin.options.starkAppConfig.defaultLanguage %>
<!-- or -->
<%= htmlWebpackPlugin.options.metadata.TITLE %>

    After:

    <%= starkOptions.starkAppMetadata.name %>
<!-- or -->
<%= starkOptions.starkAppConfig.defaultLanguage %>
<!-- or -->
<%= starkOptions.metadata.TITLE %>

  • stark-build: Adapt "angular.json" file as follows:

    {
  //...
  "projects": {
    "<project_name>": {
      "architect": {
        "build": {
          // ...
          // /!\ Add the following line
          "indexTransform": "./node_modules/@nationalbankbelgium/stark-build/config/index-html.transform.js",
          // ...
        },
        "serve": {
          // Edit the following line.
          // Before:
          // "builder": "@angular-builders/dev-server:generic",
          // Now:
          "builder": "@angular-builders/custom-webpack:dev-server",
          // ...
        }
      }
    }
  }
}

  • stark-build: Adapt the "index.html" as follows:

    <html lang="en">
  <head>
    <!-- ... -->
    <!-- Adapt the title tag as follows -->
    <!-- Before: -->
    <title><%= htmlWebpackPlugin.options.starkAppMetadata.name %></title>
    <!-- After: -->
    <title>%starkAppMetadata.name%</title>

    <!-- /!\ Remove the following lines -->
    <meta name="description" content="<%= htmlWebpackPlugin.options.starkAppMetadata.description %>" />
    <% if (webpackConfig.htmlElements.headTags) { %>
      <!--Configured Head Tags  -->
    <%= webpackConfig.htmlElements.headTags %> <% } %>
    <!-- ... -->
  </head>

  <!-- -->
</html>

  • stark-build: Add the "config/index-head-config.js" the "description" meta in as follows:

    {
  links: [
    // ...
  ],
  meta: [
    // ...
    { name: "description", content: "%starkAppMetadata.description%" },
  ]
}
Assets 2
Loading