@clr/angular@12.0.3 getting an error on installation into Angular

[williamfarrell]

Describe the bug

i Using package manager: npm √ Found compatible package version: @clr/angular@12.0.3. √ Package information loaded.

The package @clr/angular@12.0.3 will be installed and executed. Would you like to proceed? Yes √ Package successfully installed. "SchematicsClarityAdd" schema is using the keyword "id" which its support is deprecated. Use "$id" for schema ID. UPDATE package.json (1156 bytes) UPDATE angular.json (3205 bytes) UPDATE src/app/app.module.ts (488 bytes) √ Packages installed successfully.

A clear and concise description of what the bug is, and the conditions when it occurs. My system is Windows10 and I'm using C:\Windows\system32\cmd.exe and an administrator. I enter "ng add @clr/angular" and get the error above: (again) "SchematicsClarityAdd" schema is using the keyword "id" which its support is deprecated. Use "$id" for schema ID. The rest of the package seems to install successfully but when I try to use

or in Visual Studio Code (August 2021 version 1.6.0) tells me that the datagrid and column are not known elements. I tried to add CUSTOM_ELEMENTS_SCHEMA to my schema in @ngModule [schemas: [CUSTOM_ELEMENTS_SCHEMA],] but that didn't change anything ## How to reproduce Very Simple:: log into a Windows10 machine that has Visual Studio Code installed, open a terminal in Administrator Mode, Start a simple Angular project then at the command line type:: ng add @clr/angular and hit [Enter] You will see this:: i Using package manager: npm √ Found compatible package version: @clr/angular@12.0.3. √ Package information loaded. The package @clr/angular@12.0.3 will be installed and executed. Would you like to proceed? Yes √ Package successfully installed. "SchematicsClarityAdd" schema is using the keyword "id" which its support is deprecated. Use "$id" for schema ID. UPDATE package.json (1156 bytes) UPDATE angular.json (3205 bytes) UPDATE src/app/app.module.ts (488 bytes) √ Packages installed successfully. Then, in Visual Studio Code, try to add a with a to your xxx.component.html template and your clr-components will be lit up in RED _Please provide a link to a reproduction scenario using one of the [Clarity Stackblitz templates](https://stackblitz.com/@clr-team). Reports without a clear reproduction may not be prioritized until one is provided._ I don't know what you mean by a 'reproduction' but I looked at your Stackblitz templates and all I saw were light and dark themes and I check them against my code in VS Code and it seems to use "Clarity Datk Theme V5". If you need something other than that, please let me know.... Steps to reproduce the behavior: See above under ## How to reproduce 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' 4. See error ## Expected behavior I'm led to expect that the clr-datagrid and all it's parts will be understood by Angular12.0.3 ## Versions **Clarity project:** - [ ] Clarity Angular/UI **Clarity version:** - [ ] v3.x - [ ] v4.x - [ ] v5.x **Framework:** - [ ] Angular **Framework version:** _ie: Angular 12.0.3_ **Device:** -Windows 10 computer -Browser is not used in this exercise -@clr/angular@12.0.3 -VS Code = August 2021 (Version 1.6.0) -Clarity Dark Theme V5 ## Additional notes The problem seems to involve a schema using "id" instead of "$id". I'm assuming this is a quick fix. I don't know how you package your code bundles so I couldn't find the problem myself. Below is what my src/app/app.module.ts looks like:: import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { ClarityModule } from '@clr/angular'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { IssueListComponent } from './issue-list/issue-list.component'; @NgModule({ declarations: [AppComponent, IssueListComponent], imports: [BrowserModule, ClarityModule, BrowserAnimationsModule], providers: [], bootstrap: [AppComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class AppModule {}

[bbogdanov]

Hi @williamfarrell,

The steps I did on a Windows 10 computer:

• Install a LTS version of NodeJS
• Install globally @angular/cli
• Execute ng new test
• cd test
• ng add @clr/angular
• replacing the app.component.html content with

<clr-datagrid>
    <clr-dg-column>User ID</clr-dg-column>
    <clr-dg-column>Name</clr-dg-column>
    <clr-dg-column>Creation date</clr-dg-column>
    <clr-dg-column>Favorite color</clr-dg-column>

    <clr-dg-row *ngFor="let user of [1,2,3,4]">
        <clr-dg-cell>{{user}}</clr-dg-cell>
    </clr-dg-row>

    <clr-dg-footer>4 users</clr-dg-footer>
</clr-datagrid>

• ng serve

Works as expected.

What I am missing?

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.