Query on upgrade and packages of clarity 5 from clarity 4

[kumar-tadepalli]

As part of assessment for my project upgrade from clarity 4 to clarity 5. I created dummy angular 11 project and added clarity 4 as base one.

After that I followed the command ng update @clr/angular as mentioned in https://clarity.design/get-started/updating/angular/
Im seeing following warning:

But I could not see cds packages being installed. So I had installed them explicitly using:
npm install @cds/core@latest @cds/angular@latest

This is the final package.json looks
"dependencies": {
"@angular/animations": "~11.1.2",
"@angular/common": "~11.1.2",
"@angular/compiler": "~11.1.2",
"@angular/core": "~11.1.2",
"@angular/forms": "~11.1.2",
"@angular/platform-browser": "~11.1.2",
"@angular/platform-browser-dynamic": "~11.1.2",
"@angular/router": "~11.1.2",
"@cds/angular": "5.0.1",
"@cds/core": "5.0.1",
"@clr/angular": "5.0.1",
"@clr/icons": "5.0.1",
"@clr/ui": "5.0.1",
"@ngneat/transloco": "2.20.0",
"@webcomponents/webcomponentsjs": "^2.0.0",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.3"
},

Queries:

1. What is the use of @cds/angular?
2. Is @cds/angular replacement for @clr/angular?
3. If I want to use core components and angular components combined, should I have both packages (@cds/angular, @clr/angular) ? which command to use?

[Jinnie]

1. Angular wrappers and utilities for @cds/core.
2. No, it does not replace @clr/angular
3. We have two different namespaces with exactly this reason - to be able to use both in one project

[kumar-tadepalli]

Thanks for the clarification.

I'm seeing import statement like 
import '@cds/core/button/register.js';
to use a component in angular.

1. Is there a way to import all the core components at application level in angular?

In our current application(clr/angular) we support dynamic switching of themes(dark/light)
Here is the angular.json config we use:
"styles": [              
              {
                "inject": false,
                "input": "node_modules/@clr/icons/clr-icons.min.css",
                "bundleName": "styles"
              },
              {
                "inject": false,
                "input": "src/styles.css",
                "bundleName": "styles"
              },
              {
                "inject": false,
                "input": **"node_modules/@clr/ui/clr-ui.min.css",**
                "bundleName": "theme-light"
              },
              {
                "inject": false,
                "input": "src/styles-light.css",
                "bundleName": "theme-light"
              },
              {
                "inject": false,
                "input": **"node_modules/@clr/ui/clr-ui-dark.min.css"**,
                "bundleName": "theme-dark"
              },
              {
                "inject": false,
                "input": "src/styles-dark.css",
                "bundleName": "theme-dark"
              }
            ]

2. How could I enforce the same for cds components? I don't see any style sheet for light in the directory node_modules@cds\core\styles? It would be helpful if you edit the above snippet and show the file paths.

[gnomeontherun]

See https://clarity.design/get-started/developing/#angular for if you want to setup the Core components to work smoothly with Core. The theming docs for Core are not released yet, but are quite different to implement. See https://clarity.design/storybook/core/?path=/story/themes-getting-started--page for theming documentation, which we need to get integrated into our main site.

We are working on creating more directive adoption guides and tools in the near future, so many of these items will become better defined soon.