Problems with the Installation of telekom-scale with angular

[Johannes219]

Scale Version

• last stable version

Framework and version

• Angular CLI: 17.0.8

Current Behavior
I'm trying to import telekom scale via a new angular project and am using the installation instructions from https://github.com/telekom/scale or https://telekom.github.io/scale/?path=/docs/setup-info-scale-and-angular--page

Unfortunately, nothing is displayed in my browser. The browser developer tools give the following error message:

"
main.ts:9 Error: Unknown variable dynamic import: ./scale-button.entry.js
at dynamic-import-helper:7:96
at new ZoneAwarePromise (zone.js:1411:21)
at default (dynamic-import-helper:6:12)
at loadModule (index-f2e5998d.js:1990:12)
at index-f2e5998d.js:1634:20
at Generator.next ()
at chunk-FWOMF3V2.js?v=f858b437:60:61
at new ZoneAwarePromise (zone.js:1411:21)
at __async (chunk-FWOMF3V2.js?v=f858b437:44:10)
at initializeComponent (index-f2e5998d.js:1625:82) undefined

main.ts:9 TypeError: Cannot read properties of undefined (reading 'isProxied')
at index-f2e5998d.js:1641:23
at Generator.next ()
at fulfilled (chunk-FWOMF3V2.js?v=f858b437:47:24)
at _ZoneDelegate.invoke (zone.js:368:26)
at _Zone.run (zone.js:129:43)
at zone.js:1257:36
at _ZoneDelegate.invokeTask (zone.js:402:31)
at _Zone.runTask (zone.js:173:47)
at drainMicroTaskQueue (zone.js:581:35)
"

Also, i have got following warning in the console, while i start the project with ng serve: "Cannot optimize dependency: @telekom/scale-components/dist/scale-components/scale-components.css, present in 'optimizeDeps.include'
➜ Local: http://localhost:4200/"

For creating the new angular project, i have used following commands:

• ng new test5-scale --strict false --standalone false
• npm install @telekom/scale-components

Expected Behavior
Telekom Scale Components can used property in angular.

Desktop (please complete the following information):

• OS: RedHat 9.3
• Browser: Chrome Version 120.0.6099.130

angular.json
app.component.html.txt
app.module.ts.txt
app-routing.module.ts.txt
main.ts.txt

[felix-ico]

hi @Johannes219, I just set up an angular 17 project and had no issues. Two things I noticed from your post:

• "node_modules/@telekom/scale-components/dist/scale-components/scale-components.css" is missing from the styles array for the build config in angular.json (it's set in the test section instead)

• you mentioned that you install the library via npm install @telekom/scale-components, but to install the latest beta you should use npm install @telekom/scale-components@next

Could you check if scale works for you if the above points are resolved?

[Johannes219]

Hi @felix-ico, many thanks for your response!

First of all, i'm still relatively inexperienced in Angular, so I hope you are patient :)

I preferred to use the dark mode. So i have followed this guide (https://github.com/telekom/scale) to install it.

While installing @telekom/scale-components@next, I got a warning like this:
npm WARN deprecated @telekom/scale-design-tokens@3.0.0-beta.146: Deprecated in favor of @telekom/design-tokens. Should i ignore it?

@telekom/scale-components@next seems functioning at first glance.

The button style is working. But when i import more complex components like scale-telekom-header, i shows like following:

I seems that some styles are missing. I missed some Icons, like navigations, login or menu. on the right site.

I have tested it with two blank projects, (standalone and no standalone). The result is the same.

I also followed the following instructions to use reactive forms:
https://telekom.github.io/scale/?path=/docs/setup-info-scale-and-angular--page
I don't know how i can implement the provided directives in standalone projects. Following directives can't be imported:

• base-value-accessor.ts
• checked-value-accessor.ts
• number-value-accessor.ts
• radio-value-accessor.ts
• text-value-accessor.ts
  (see https://github.com/telekom/scale/tree/main/examples/angular-reactive-forms/src/directives)

Declarations can only used via NgModules. But standalone components don't this feature anymore. Could you support me here to implement it?

I also have tested the Directives in the no standalone project, but i got following error:

✘ [ERROR] TS-992004: Directive BaseValueAccessorDirective has no selector, please add it! [plugin angular-compiler]

    src/directives/base-value-accessor.ts:15:0:
      15 │ @Directive()
         ╵ ~~~~~~~~~~~~

Because in Angular 17 it is strongly recommended using standalone components, i would prefer this structure for future applications.

Attachements:
no-standalone - app.module.ts.txt
no-standalone - app-routing.module.ts.txt
no-standalone - main.ts.txt
standalone - app.component.ts.txt
standalone and no-standalone - angular.json.txt
standalone and no-standalone - app.component.html.txt

Best regards
Johannes

[felix-ico]

I preferred to use the dark mode. So i have followed this guide (https://github.com/telekom/scale) to install it.

dark and light mode are all part of the same library, no special installation is required - the mode is detected from a data-mode attribute that you have to set in your app

npm WARN deprecated

yes the warning can be ignored and should have no effect in your consumer app

But when i import more complex components like scale-telekom-header, i shows like following

The header looks fine to me (styling is there as well, as seen by the typeface). The header contents are constructed by the end user so only what you provide will be shown.- please have a look at the docs for the header here https://telekom.github.io/scale/?path=/docs/components-telekom-brand-header-navigation--standard-header and the samples here https://github.com/telekom/scale/tree/main/examples/telekom-header-samples.

If you mean the white border around the header, that is due to some custom styling in your app (you probably have padding around your body tag or something similar)

Regarding the reactive forms issues, I am also not an angular expert so I need some time to read up on the latest angular version and these standalone components, at the moment I am not sure what could be wrong there...

[Johannes219]

@felix-ico, thank you for your quick response, but I'm afraid I won't get it.

I have used different scale components in my app.component.html but it looks weird:

In the guideline, there are depending style sheets, which i have implemented in my app.component.scss. But it didn't changed anything.

I have tested the mega menu example in your provided link. But it seems that this isn't an angular project. The component files are written with .tsx extension and the datastructure looks completely different to angular components.

I also tried out the styles.scss there. But that didn't work either.

Is it a big effort if I ask you if you could provide me an empty standalone project where Telekom style works? Maybe with a Mega Menu example?

Attachements:
app..component.scss.txt

Best regards
Johannes

[Johannes219]

PS: if you have time in the next few days, we also could make a webex session. I work at Deutsche Telekom Technik GmbH.

Best regards
Johannes

[felix-ico]

hi @Johannes219, you can reach me at fw@iconstorm.com

[felix-ico]

@Johannes219 i just opened a draft PR with a sample angular 17 standalone component with a reactive form -> #2261 It seems to work for me, i just tweaked the code of the existing example .

It seems that importing the directives for the custom elements to the component does the trick, I am still not sure if standalone: true needs to be set in the directive as well or can be removed - i'll test this too.

would also be great if someone who knows more about angular could chime in on this (mostly if my implementation is ok or could be improved), as this reactive forms thing seems pretty specific to angular..

[Johannes219]

Hi @felix-ico - thank you for your example! I actually have tried out the simple binding example there within a new angular standalone project. This works for me. I just have changed the html content like following:

<p>
  <scale-slider label="Slider" [value]="val" (scaleInput)="setValue($event)" unit=""></scale-slider>
</p>
<p>
  <input type="number" min="0" max="100" (input)="setValue($event)" [value]="val">
</p>

So, there's no need to use the "[(ngModel)]"

Thanks again to test it for Angular 17.

Should i close the issue or wait for some others which could test and comment your example (maybe some improvement advices)?

Regards Johannes

[felix-ico]

@Johannes219 thanks for testing, I'll close the issue once #2261 and the updated docs are merged