Angular 17 component library for Angular 16 apps

Question

Working on an Angular component library @carbon/charts-angular that is a thin wrapper for another component library that is vanilla JavaScript (@carbon/charts).

The code for each component has not changed significantly since Angular 8. Only the project configuration (angular.json, ng-package.json, package.json) has been updated.

This is the base component and example of a specific chart component derived from it:

// base-chart.component.ts

import { Component, Input, OnInit, AfterViewInit, ElementRef } from '@angular/core'
import type { BaseChartOptions, ChartTabularData, Charts } from '@carbon/charts'

@Component({
    selector: 'ibm-base-chart',
    template: ``
})
export class BaseChartComponent implements AfterViewInit, OnInit {
    @Input() set data(newData: ChartTabularData) {
        const dataExistsAlready = !!this._data
        this._data = newData

        if (dataExistsAlready) {
            this.chart?.model.setData(newData)
        }
    }

    get data(): ChartTabularData {
        return this._data
    }

    @Input() set options(newOptions: BaseChartOptions) {
        const optionsExistAlready = !!this._options
        this._options = newOptions

        if (optionsExistAlready) {
            this.chart?.model.setOptions(newOptions)
        }
    }

    get options() {
        return this._options
    }

    @Input() width?: string
    @Input() height?: string
    chart!: Charts
    private _data!: ChartTabularData
    private _options!: BaseChartOptions

    constructor(protected elementRef: ElementRef) {}

    ngOnInit() {
        if (this.width) {
            this.options.width = this.width
        }

        if (this.height) {
            this.options.height = this.height
        }
    }

    ngAfterViewInit() {
        console.log('Class that extended BaseChartComponent did not implement ngAfterViewInit().')
    }
}

// alluvial-chart.component.ts

import { Component, AfterViewInit } from '@angular/core'
import { BaseChartComponent } from './base-chart.component'
import {
    AlluvialChart as AlluvialChartCore,
    type AlluvialChartOptions,
    type ChartTabularData
} from '@carbon/charts'

@Component({
    selector: 'ibm-alluvial-chart',
    template: ``
})
export class AlluvialChartComponent extends BaseChartComponent implements AfterViewInit {
    override ngAfterViewInit() {
        this.chart = new AlluvialChartCore(this.elementRef.nativeElement, {
            data: this.data as ChartTabularData,
            options: this.options as AlluvialChartOptions
        })

        Object.assign(this, this.chart)
    }
}

While the best practice is to create separate versions of the component library paired to an Angular version, this is a monorepo where all packages are assigned the same version.

Given the structure of these components, if I were to bump Angular from 16.2.12 to 17.1.1 so we can take advantage of Vite, would this component library still be compatible for Angular 16 projects as long as I make the peerDependency Angular 16 or 17?

Answer 1

In short: no.

Angular apps don't support libraries based on newer Angular versions.