Modern client-side Web application framework based on Angular, Angular Material / Material Design, TypeScript, Redux, RxJS, ...
next for the starter (a96138f)rxjs and [@ngrx](https://github.com/ngrx) (cd9c317)rxjs and [@ngrx](https://github.com/ngrx) (e08c19d)Angular from 13.0.0 to 14.0.0 (16b4ca4)rxjs (4339893)Angular from 13.0.0 to 14.0.0 (0caa789)rxjsand [@ngrx](https://github.com/ngrx) (ead28b1)Angular from 13.0.0 to 14.0.0 (4cd9c6a)Angular from 13.0.0 to 14.0.0 (74cdee4)Angular from 13.0.0 to 14.0.0 (6275964)Angular from 13.0.0 to 14.0.0 (adf96ff)karma and jasmine dependencies (202cfd8)Angular from 13.0.0 to 14.0.0 (5a4b14c)Angular from 13.0.0 to 14.0.0 (204696e)rxjs (e5d9b74)npm run commit script in order to fix the usage on Windows OS (ec74726)emitDecoratorMetadata in tsconfig of stark-* packages in order to solve build warnings (d37ba9f), closes ng-packagr/ng-packagr#2056
event-source-polyfill dependency (713239f)webpack-monitor (095117c)coveralls dependency (df5bed4)mat-select element (cd29848)ViewDestroyedError issue linked to formControl usage (f0857e8), closes #2874
[class.open]="minimapMenuTrigger.menuOpen" not changing when menu closed (50034b3)TSLint to ESLint (781d133)results$ variable directly in template (b8ca98f)ngrx-store-freeze dependency thanks to @ngrx/store 8.x upgrade (4af3e25)writeToDisk in webpack-dev-server configuration (95dcf2c)httpOnly cookie in StarkXSRFService (9fe3907), closes #3136
class-validator dependency to version ~0.13.1 (1fd6700)uuid and @types/uuid dependencies to version "^8.3.0" (15b5c08), closes #2759 #2760
karma-typescript by karma + @angular/devkit:build-angular (a9e06dc)results$ variable visibility to public (99d1ae8), closes #3082
pretty-data by prettier+@sqltools/formatter in pretty-print component (286556e), closes #2543
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:
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:
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",
// ...
},
}
}
}
}
}
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
// ...
},
// ...
},
}
}
}
}
}
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
},
// ...
}
}
}
}
}
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"
}
}
}
}
}
}
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
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:
htmlWebpackPlugin.options.
starkOptions.
It should be easy to adapt the index.html file.
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:
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()
}));
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 }));
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 }));
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
}));
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 }));
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 }));
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 }));
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 }));
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: https://github.com/ui-router/angular/commit/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%" },
]
}
See CHANGELOG