Tree component doesn't work with angular 12?

[1shkelzeni]

While updating my app from 10 to 12, my tree component isn't working anymore. The new library @circlon/angular-tree-component seems isn't working with angular 12. I do not get any error but my tree component isn't displayed.

I have followed the doc:

npm install @circlon/angular-tree-component

Import TreeModule:

import { TreeModule } from '@circlon/angular-tree-component';

@NgModule({
  declarations: [AppComponent],
  imports: [TreeModule],
  bootstrap: [AppComponent]
})
export class AppModule {}
Add css to styles.scss or include in angular.json:

@import '~@circlon/angular-tree-component/css/angular-tree-component.css';
I have followed every step as the doc said but still, I can't make it work. My app looks something like this: app-example. By this, I refer to the code as I am using this library "@circlon/angular-tree-component": "^11.0.4", with angular 12. But the code is before updating to angular 12. Basically, only the package has changed. It seems that whatever is inside tag is hidden. And also I tried to remove this: @import '~@circlon/angular-tree-component/css/angular-tree-component.css'; and there is no error. Does anybody have any idea, or can someone help me replace this component? I am asking for help cause I am new at angular and I do not understand many things. But I am happy to learn new things every day. Thank you all for every idea or help.
stackblitz example: appp

[1shkelzeni]

[@tobiasengelhardt]

[gantispam]

Same issue.

Do you found any solution?

[1shkelzeni]

Yes, i change the way we upload the libraries:
angular.json
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8

diff --git angular.json
--- a/angular.json
+++ b/angular.json
@@ -15,6 +15,7 @@
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.json",

•        "polyfills": "src/polyfills.ts",
         "assets": [
           "src/assets"
         ],
  

@@ -390,4 +391,4 @@
"prefix": "app"
}
}
-}
\ No newline at end of file
+}
Index: /polyfills.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8

diff --/src/polyfills.ts
--- a/src/polyfills.ts
+++ b/polyfills.ts
@@ -17,5 +17,6 @@

import 'core-js/es7/reflect';
import 'zone.js';
+import 'reflect-metadata';

-import 'core-js/client/shim.min';
\ No newline at end of file
+import 'core-js/client/shim.min';
Index: index.html
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8

diff --git /index.html
--- a/index.html
+++ b/index.html
@@ -24,8 +24,6 @@

• <script src="https://unpkg.com/zone.js@0.8.5?main=browser"></script>
• <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>

[pninarubin]

Hi,
I also encountered this problem and did not understand the way to solve it,
If you could explain what exactly you did that would work for you.
I would be very happy.

[1shkelzeni]

Yes, i change the way we upload the libraries. basically i moved the polyfills to angular angular.json:
"polyfills": "src/polyfills.ts",
At polyfills.ts file i added:
+import 'reflect-metadata';
index.html file
I removed:

• <script src="https://unpkg.com/zone.js@0.8.5?main=browser"></script>
• <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>