Modern client-side Web application framework based on Angular, Angular Material / Material Design, TypeScript, Redux, RxJS, ...
OTHER License
Bot releases are hidden (Show)
loggingFlushDisabled == true
(0aeece5), closes #3620
@npmcli/ci-detect
dependency by ci-info
(dc3eb8a), closes #3658
angular-in-memory-web-api
dependency (c82f142)Published by mhenkens 5 months ago
@ngrx/*
and @uirouter/angular
dependencies (1e1bf48)@nationalbankbelgium/eslint-config
: 15.0.0
(afbf819)StarkArrayIsValid
validation decorator (8560439)class-validator
dependency (50d54f5), closes #3708
angular 15
(13b992f)Published by mhenkens 8 months ago
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)rxjs
and [@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)Published by SuperITMan 9 months ago
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 pluginhtmlWebpackPlugin
, 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
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
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
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
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
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
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
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 obsoleteAs 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%" },
]
}
Published by SuperITMan 9 months ago
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 pluginhtmlWebpackPlugin
, 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
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
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
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
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
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
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
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 obsoleteAs 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%" },
]
}
Published by SuperITMan 12 months ago
Published by SuperITMan almost 2 years ago
Published by SuperITMan about 2 years ago
Published by SuperITMan almost 3 years ago
Published by SuperITMan over 3 years ago
MockAppSidebarService
to MockStarkAppSidebarService
in @nationalbankbelgium/stark-ui/testing
subpackage (4b51363)testing
subpackage and its classes in the API docs and Developer Guide (9e23744), closes #1600
// Before
module.exports = require("@nationalbankbelgium/code-style/prettier/1.16.x");
// After
module.exports = require("@nationalbankbelgium/code-style/prettier/2.2.x");
Published by SuperITMan about 4 years ago
Published by SuperITMan over 4 years ago
Published by SuperITMan over 4 years ago
See CHANGELOG
Published by nicanac over 4 years ago
See CHANGELOG