How to migrate from v1 to v2?

[notCoderJ]

hi, I use OverlayScrollbars from angular app.
I tried to migrate from v1 to v2 and after upgrading to v2, scrollbars do not appear.

Previous app environment

• @angular/core v14.2.9
• @angular/common v14.2.9
• overlayscrollbars v1.13.3
• overlayscrollbars-ngx v0.2.3

After upgrading, app environment

• @angular/core same to previous
• @angular/common same to previous
• overlayscrollbars v2.0.2
• overlayscrollbars-ngx v0.4.0

The only things I changed after the upgrade is:

1. switched to the new OverlayScrollbars import statement.
   -> from @import 'overlayscrollbars/css/OverlayScrollbars.css' in global styles.scss file to @import 'overlayscrollbars/styles/OverlayScrollbars.css' in component styles.scss file

2. switched to the changed type, option's name

Could you please help me?

[KingSora]

@notCoderJ Good day!

I believe your changes should cover all the changes.. Just in case I wanna highlight small things you might missed:

• The import path for the css should start with a ~ (this is how angular is configured for importing styles from node_modules)
• The css file name is all lowercase: @import '~overlayscrollbars/styles/overlayscrollbars.css';

I've a angular example here: https://github.com/KingSora/OverlayScrollbars/tree/master/examples/angular which you can use as reference.

If you don't have a compile error and your styles are correctly loaded it might be a incorrect usage case.. you can try to replace the overlay-scrollbars component with a div with a overflow: scroll style and check whether native scrollbars appear. If they don't it might be a false expectation from your side.. If thats the case I would need to see an example of how you use the component.

[notCoderJ]

@KingSora Thank you for replying

As you told me, I switched @import 'overlayscrollbars/styles/overlayscrollbars.css' without ~(tild is deprecated so, same) and I set the styles(width, height) directly on the <overlay-scrollbars>. After, scrolling works but the scrollbar is still invisible.

also, I tried to run angular example but in the build process, some error occurred about typescript.
I'm on hold for updates due to other tasks. I'll retry as soon as possible and let you know.

[KingSora]

@notCoderJ anything new here? :)

[notCoderJ]

@KingSora Sorry, for the late reply, I looked at the angular example, referring to your answer, and tried again, but the scroll still didn't appear. As a result of identifying the cause of the problem, the custom style format of the official homepage used in version 1 was different from version 2.

So, referring to the version 2 style format of Git, I modified it to fit the changed style format, and after solving the problem, the update was completed safely! Thank you for your help KingSora :)

[KingSora]

Glad I could help :)