Shared Angular modules

Radzen Studio Angular
1

Hello Radzen team,
We are trying to utilise common client side module across multiple pages based on your instructions found here https://www.radzen.com/documentation/customizing-generated-application/#client

We added a shared code module to client\src\app\abd-utils and additional imports to [PAGE-NAME].component.ts to import module.
image
Attempting to run app gives a compile error
image
To overcome the compile error it is necessary to manually edit the generated page [PAGE-NAME]-generated.component.ts to add the import and add the page to code generation ignored list.

image
image.png550×759 23.2 KB

The page then works as expected.
image
However, adding the generated fie as ignored would make the code difficult to maintain.
We are using Radzen 2.40.0 Angular project
Any ideas on how to overcome this issue?

2

You cannot use a symbol imported in another file. How do you want to use that custom module from the generaed code? A possible solution is to invoke a method defined in the *.component.ts that uses the custom module.

3

Hi @korchev,

image
image.png896×301 16.2 KB

The clickevent handler for validate button is of type execute Code with the following code.
image
In this simplified test page the result is then passed to the show notification handler.

This is the class being called

image
image.png834×440 23.7 KB

4

I suggest you create a method in the *.component.ts file and invoke it instead. Something like:

var postcodeChecker = this['createPostcodeChecker'](${postCode});

where createPostCodeChecker is defined in *.component.ts as

createPostcodeChecker(postCode: string) {
  return new PostcodeChecker(postCode);
}
5

Thanks @korchev,
That method works great.