Since TSLint has been deprecated for a while now and Angular removed the TSLint support we had to migrate our project from TSLint to ESLint as well.
This means in version 2.0 all TSLint rules and configurations were removed and where possible replaced by ESLint.
This not only required configuration changes in the Intershop PWA project but also application code adaptions to comply with some of the new ESLint rules.
To allow for an as easy as possible migration of existing PWA projects, we split the whole switch in separate commits that should make it easier to resolve potential merge conflicts by providing some context, e.g. changes to satisfy a specific rule or project configuration changes etc.
We advise you to first cherry pick all the
eslint commits provided by the PWA release before applying the lint rules to the project customizations to fix the issues that reside in the project code.
If the found issues are too many to address them in an ordered manner, it is probably best to temporarily disable some of the failing rules in
.eslintrc.json (see Configuring ESLint and to only fix one after another.
It is also probably a good idea to do the PWA 2.0 migration not in one go as described in Import Changes from New PWA Release but to first do the commits before the linter switch and bring your project to a clean state (
npm run check).
After this all the linter switch commits should be applied and the project should be brought back to a clean state.
Once this is done, subsequent commits should be migrated.
If your project contains own custom TSLint rules you will have to re-implement them as ESLint rules to be able to apply them to your code base (see Custom ESLint rules).
With version 2.0 we introduce a renaming of the two standard PWA themes and change the default theme:
blueis now called
b2band is used as default theme from now on.
defaultis now called
With this change the according folders and references had to be renamed/moved and need to be adapted in customer projects as well.
In projects where the recommended procedure for using a custom theme has been followed (see Customization Guide - Start Customization), minimal migration effort should be required.
We moved the model
SelectOption from the select.component.ts to the
select-option.model.ts and adapted all necessary imports.
In the PWA 0.28 we introduced the usage of Formly to generate and maintain our forms.
Now we removed the obsolete form components.
If you want to use the obsolete form components in your project nevertheless, skip the commit
remove obsolete form components.
For more information concerning Formly please refer to our Formly - Guide).
dist folder now only contains results of the build process (except for
You must not edit any file inside that
dist folder, since this would include not being able to change Kubernetes liveness or readiness probes we included SSR container related source code under
The Angular configuration mechanism of the Intershop PWA was refactored to support running multiple configurations in one docker image (see Guide - Multiple Themes).
This now means that the former
environment.local.ts which had a standalone configuration can no longer be supported.
Instead theme-specific environments exist for
blue and development settings can be overridden in
environment.development.ts, which are imported into the theme-specific configurations (see Guide - Development).
npm install will create an initial version of the
environment.development.ts that can be filled with the needed information from
environment.local.ts itself becomes obsolete and can be deleted.
Locale definitions in
environment.ts models are no longer supported, only ICM channel configurations are now used for switching locales.
We introduced the feature toggle 'guestCheckout' in the
We switched to encode user logins when used in the api service.
This is to enable special characters (like the #) that are sometimes present in user logins (SSO case!) but would've lead to errors before.
We removed the property
production from Angular CLI
Production mode can now consistently be set by using Angular CLI configurations.
This also works when running multiple configurations like
We removed the property
serviceWorker from Angular CLI
The Service Worker can now be set consistently depending on the current configuration in the
We introduced formly to handle all kinds of forms from now on.
src/app/shared/address-forms in favor of
src/app/shared/forms-dynamic in favor of a generalized formly integration in
To implement your country-specific address forms in formly, see Forms.
We introduced an improved usage of memoized selectors for products selectors, split up state and saved additionally retrieved data in separate places and migrated almost all product related components to use the previously introduced product context facade (see changes #528).
We upgraded Cypress from Version 4 to 6 and followed all migrations in their Migration Guide.
productinput, as they retrieve the product from the context.
The project configuration was updated to use and test with Node.js version 14.15.0 LTS (including npm 6.14.8) for any further development.
We upgraded the Intershop PWA to use Angular 11.
With that a breaking change was introduced.
relativeLinkResolution property changed from
We couldn't detect any impact for the PWA itself but custom code might have to be adapted.
We removed the Intershop PWA mock-data, as there are currently public servers provided for testing and exploring.
The handling for mocking REST API calls during development is hereby untouched.
The Angular CLI environment property
mockServerAPI became obsolete, the property
mustMockPaths was renamed to
We replaced the simple ngx-cookie-banner cookie banner with an own implementation that provides the means to configure and set more fine grained cookie consent options.
A basic configuration is already provided.
The cookie consent configuration and usage is documented in our Cookie Consent Guide.
With this change it is necessary to adapt all uses of the
cookiesService.cookieLawSeen$ observable with the new synchronous method -
cookiesService.cookieConsentFor('tracking') - provided to check for the required cookie consent.
We reworked the configuration format for setting up multiple channels in the nginx to enable context-path support.
PWA_X_ environment properties are no longer supported, instead a structured configuration has to be supplied.
For more information see Nginx documentation.
We introduced a localization file clean up script that removes all unused localization keys from the localization files and sorts the remaining keys.
The clean up result is contained in a separate commit that should probably not be applied during a migration and instead a
npm run clean-localizations should be performed on the project sources.
We renamed the testing helper
findAllCustomElements to support project customization.
The returned lists from
findAllDataTestingIDs are no longer sorted to represent the actual template structure.
With Angular version 10.1, the testing utility async was deprecated.
We refactored out code base to use native async/await instead, which was possible in all cases.
The TSLint rule
use-new-async-in-tests takes care of automatically transforming TestBed initialization code in component tests.
Other cases have to be refactored manually.
We removed deprecated exports related to the NgRx testing refactorings introduced in version 0.21.
We switched our main development to the new headless REST application type provided by ICM 188.8.131.52.
If you are upgrading and want to continue using the Responsive Starter Store application types, do not cherry-pick the commits that switch application types.
We refactored the way ICM Http Errors are handled in the PWA.
You can read about it here.
Tests emulating HTTP errors now have to use the helper function
We removed grouping folders of shared components in extensions and sub projects for a better overview.
You can migrate using the script
node schematics/migration/0.22-to-0.23 (for running this script Git version 2.28 or above is recommended since earlier versions resulted in problems).
We deprecated and reworked the way of testing with NgRx.
The old format using
combineReducers is now deprecated and replaced by the new approach.
The old testing mechanism will be removed in version 0.23.
We introduced a way to do shallow testing with feature toggles and used it in the tests.
TSLint rules are set up to automatically fix imports, so run
npm run check after upgrading.
In this version, we decided to start using the ngrx creator introduced in ngrx v8: createAction, createReducer and createEffect.
This means that the old way of writing action classes, reducer switch statements and @effect() decorators is deprecated from 0.21 onwards.
Using these creator functions simplifies code and removes a lot of boiler plate from store files while providing type safety out-of-the-box.
You can automatically migrate your existing code by executing
Doing this will set related ts-lint rules and update each store or notify you of work previously needed.
We upgraded from Angular 8 to version 9 and activated the new rendering engine Ivy with this (following the official upgrade guide).
This was a major upgrade and comes with some changes:
The following changes are available for cherry-picking in one commit:
Angular no longer supports the previously deprecated string syntax for lazy loaded modules. Change it to the dynamic import format.
server.ts was partially rewritten to support SSR dev-server and serverless deployments. Building SSR is now supported by Angular CLI and explicit
webpack builds were removed.
core-js had a major upgrade to version 3, so
polyfill.ts imports have changed.
We temporarily replaced
ngx-utils-cookies-port due to a bug when using Angular 9.1.
angular2-cookie-law was replaced by
ngx-cookie-banner for compatibility reasons. This comes with a styling overhaul.
Further commits contain necessary refactoring:
TestBed.get in tests was deprecated in favor of the new type-safe
The empty generic type for NgRx
Store is now the default and does not have to be supplied. The TSLint rule
ngrx-use-empty-store-type was adapted to apply this refactoring.
We removed lazy loading with
@wishtack/reactive-component-loader and replaced it with the native Angular 9 approach. If you have customized or created extensions, you will have to adapt the following:
Extension export modules are no longer imported and exported in
SharedModule, instead export them in
Instead of pointing to the extension module with
ReactiveComponentLoaderModule in the extension exports module, use the new provider for
LAZY_FEATURE_MODULE pointing to the extension store module, if available. All further lazy loading is done by lazy components and lazy loaded pages. With this, the extension module should no longer import the extension store module.
Lazy components should no longer be part of the repository as they can be auto-generated on
npm install. Use the new decorator
@GenerateLazyComponent() via the
lazy-component schematic to generate lazy components. We currently do not support creating lazy components for components with
@Output() decorated fields.
Previous workarounds in
<extension>-store.module.ts for adding reducers of selecting the feature state are no longer necessary and can be refactored to standard approaches.
We performed a major upgrade to
prettier which comes with new code formatting for parts of the code.
We replaced VSCode extension
stylelint-plus with the official extension. Update the recommended extensions.
We overhauled the integration of utility libraries for our custom schematics and TSLint rules. These libraries now get built when
We migrated from using ngrx-router to the official and better supported @ngrx/router-store.
This means that throughout the code all usage of the
ofRoute operator and
RouteNavigation actions are no longer available.
As some of these implementations were very specific, we cannot provide a migration script.
In this version change, we decided to no longer recommend the container-component-pattern and therefore changed the folder structure of the project.
We did this because the previously introduced facades provide a more convenient way to interact with the state management and more and more logic was moved out of containers, hence removing all ngrx-related imports there.
You can run the migration by executing
The script will check if all your components can be moved to the new folder structure and will then perform the migration or notify you of work previously needed.
The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.