Skip to main content

Angular Expanders 6.0.0

· 5 min read
Jan Hardy
Jan Hardy
R&D Engineer

Changes and improvements​

Upgrade to Angular 19 and Angular Material 19​

For this release we updated all the code to Angular 19, in order to stay up to date with the releases and best practices.

Separation of QuerySearch​

QuerySearch is now an addon, instead of the default filtering implementation. Everything related to filtering in the code has been moved to separate expansionResources, namely angular-querysearch-expanders, angular-svcapi-querysearch-expanders and angular-stdapi-querysearch-expanders. When these expansionResources are not added the application will still function, however the filtering capabilities will not be present. From now on you can also add filtering implementations, e.g. finders, or provide a custom one.

Yarn support​

We provide a solution to substitute npm with yarn if wanted. This drastically improves dependencies install times. Substitute the Std API profile with Std API yarn (or Svc) in your expansionSettings.xml.

Harvest expanders​

The angular-expanders now depend on the harvest-expanders:1.0.0, this is an example of one of the first expansionResources that contains reusable expanders. These expanders and expansion steps define the gen/ext less harvesting.

New design implementation​

This version contains the new designs made for the list and details page.

Migration guide​

Upgrade to Angular 19​

Normally you shouldn't have any issues, you can look at the migration guide to see what changes in custom code need to be done. The directive option standalone = true has become default, so you can remove this in your custom code if you prefer.

To stay up to date with Angular best practices, we removed the modules and made all the components standalone. This potentially requires some harvest code relocation:

  • Declared providers in app.module.ts should be moved to app.config.ts.
  • Declared routes in app-routing.module.ts should be moved to app.routes.ts. Instead of loading the module file, you should now lazy load the routes file.
  • FeatureModule modules are removed.
  • Declared routes in ${FeatureModule}-routing.module.ts should be moved to ${FeatureModule}.routes.ts.
  • DataView modules are removed. However, the routing module has stayed. This is needed for DataChildren. If you declared providers in ${DataView}.module.ts, you should move these to ${DataView}-routing.module.ts.
  • The core module has been removed, because all components are standalone. This can be re-added custom if needed.
  • The shared module has been removed, because all components are moved to ngx-ns-runtime and otherwise they would be standalone. This can be re-added custom if needed.

Separation of QuerySearch​

To have the application function as before you will need to add following expansionResources:

  • angular-querysearch-expanders:6.0.0
  • angular-svcapi-querysearch-expanders:2.0.0 or angular-stdapi-querysearch-expanders:2.0.0

Yarn support​

You will probably need to install yarn on your machine first to make this work. You should do this via corepack: npm install -g corepack. After first expansion, you will potentially need to create an empty yarn.lock file, in your expansion folder. Then you can yarn and yarn start to install and start the application.

Global config
.yarnrc.yml
npmScopes:
  nsx:
    npmAlwaysAuth: true
    npmAuthToken: <yourTokenHere (same as in .npmrc)>
    npmRegistryServer: <registryServerHere (same as in .npmrc)>

Harvest expanders​

  • You should move ext code of the AngularApp to a folder src, except the package-lock.json file and other root level files. Otherwise it will expand to the wrong place.
  • If you have other root level files in your project, e.g. .npmrc, you should at this to the custom anchors of the .harvestInclude file, otherwise it will be ignored for harvesting.

New design implementation​

  • Details page has been renamed to details-page from details and has been completely changed to fit the static formless design. You need to rename your harvest files and folders to include the -page part.
  • A details component has been added that is used for the details-page as for the new inspect functionality on the list-page. The old implementation can be kept as ext to gradually change if wanted. However, we removed the nsx-datepicker and nsx-yes-no-toggle components form the shared module. These need to be re-added custom as well then.
  • List page has been renamed to list-page from list. You need to rename your harvest files and folders to include the -page part.
  • The list page has been changed to use the new button implementation and also includes an inspect feature to get an overview of the details. There are only visual breaking changes here, custom code should still function.
  • Removed changes and destroy anchors, this needs to be moved to the methods anchor.
  • Refactor of all the buttons in the application to nsc-button, also removed the theme include of the material.button. This should be re-added as harvest code if needed.
  • Titles of details and list page are now translated completely.
  • Moved dialog.service to ngx-ns-core as well as the ConfirmationDialog component. Custom code should switch to this implementation.

Data-access.service​

In the data-access.service files, the name of the old "generic" segmentParameterMapper is changed to a element specific one, usage of this mapper in custom code needs to be updated.

Removed legacy forms​

The legacy forms are no longer supported and you should update to the new form structure.

@nsx/ngx-ns-core​

  • CSS variables name-change in sidebar:
before
--nsc-sidebar-menu-custom-return-header-background-color
--nsc-sidebar-menu-custom-return-header-background-color-hover
--nsc-sidebar-menu-custom-return-header-color
after
--nsc-sidebar-menu-custom-single-level-return-icon-background-color
--nsc-sidebar-menu-custom-single-level-return-icon-hover-background-color
--nsc-sidebar-menu-custom-single-level-return-icon-fill-color
  • searchKey attribute has been removed from <nsc-select> components, this needs to be removed in custom html. Filtering has been moved to the dataSource implementation for the select components.