Обновление до последней версии angular 18 с ошибками ng2-charts на nsg-serve

Обновление angular 18 с помощью ng2-charts 6.0.1 при запуске n-serve выдает ошибку, как показано ниже. импортирует ng2-charts,chart.js,chartjs-plugin-annotation. Ничего не помогает и выдает ошибку.

Я пытаюсь использовать компонент npn-standard, который является дочерним компонентом для других модулей.

    X [ERROR] NG8002: Can't bind to 'type' since it isn't a known property of 'canvas'. [plugin angular-compiler]

    src/app/shared/tt-chart/tt-chart.component.html:64:32:
      64 │ ...   <canvas baseChart [type] = "pieChartType" class = "chart" [datas...
         ╵                         ~~~~~~~~~~~~~~~~~~~~~

  Error occurs in the template of component TTChartComponent.

    src/app/shared/tt-chart/tt-chart.component.ts:11:15:
      11 │   templateUrl: './tt-chart.component.html',
         ╵                ~~~~~~~~~~~~~~~~~~~~~~~~~~~


X [ERROR] NG8002: Can't bind to 'datasets' since it isn't a known property of 'canvas'. [plugin angular-compiler]

    src/app/shared/tt-chart/tt-chart.component.html:64:68:
      64 │ ...pe" class = "chart" [datasets] = "pieChartData[i]" [labels] = "chartL...
         ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  Error occurs in the template of component EfChartComponent.

    src/app/shared/tt-chart/tt-chart.component.ts:11:15:
      11 │   templateUrl: './tt-chart.component.html',
         ╵                ~~~~~~~~~~~~~~~~~~~~~~~~~~~

angular chart.js pie-chart ng2-charts angular18

01.07.2024 10:49

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

195

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Просмотрите каждый компонент ошибки и примените описанный ниже подход (Эти ошибки возникают, когда BaseChartDirective не импортируется).

Если компонент задачи является автономным, добавьте BaseChartDirective в массив импорта.

import { BaseChartDirective } from 'ng2-charts';
...

...
@Component({
    standalone: true,
    imports: [
      ...
      BaseChartDirective,
      ...
    ],
    ...
})
export class TaskComponent {
    ...

Если задача не является автономной, перейдите в то место, где вы объявили массив компонентов declarations. Затем импортируйте FormModule.

import { BaseChartDirective } from 'ng2-charts';
...

...
@NgModule({
    ...
    imports: [
      ...
      BaseChartDirective,
      ...
    ]
    ...
})
export class SomeModule {}

Также убедитесь, что в main.ts есть приведенный ниже код.

import { provideCharts, withDefaultRegisterables } from 'ng2-charts';

bootstrapApplication(AppComponent, {
  providers: [provideCharts(withDefaultRegisterables())],
}).catch((err) => console.error(err));

Официальная документация npm содержит пошаговые инструкции по настройке.

не нашел ничего такого для импорта в ng2-charts 6.0.1 «ChartsModule» объявлен, но его значение никогда не читается.ts(6133) Невозможно найти модуль «ng2-charts/ng2-charts» или соответствующие ему объявления типа.ts(2307) )

— 01.07.2024 11:34

@RajarR обновил мой ответ

— 01.07.2024 11:37

это помогает . Спасибо

— 01.07.2024 11:42

01.07.2024 11:05