Angular 13 Update "Duplicate identifier" Error

Issue

I am maintaining a private npm-package that provides angular-components. I am trying to update the package to angular 13 (from angular 12) and got everything to work, so I released a new version to npm. When I tried to use the package I get several errors like the following:

TS2300: Duplicate identifier 'ɵdir'.

TS2300: Duplicate identifier 'ɵfac'.

I changed the angularCompilerOptions to use "compilatonMode": "partial" and removed the option "enableIvy": false, released a new version but I still get the same errors.

Does anybody have any ideas what I'm doing wrong or any pointers what might cause this issue? Thank you a lot stackoverflow community. :)

EDIT: One interesting observation is that after an npm install in the consuming package, the files in node_modules/my-package (here the accordion.d.ts as an example) look something like this:

import { AfterContentInit } from '@angular/core';
import { CdkAccordion } from '@angular/cdk/accordion';
import * as i0 from "@angular/core";
export declare class Accordion extends CdkAccordion implements AfterContentInit {
    private _keyManager;
    private _headers;
    ngAfterContentInit(): void;
    private radio;
    private _handleHeaderKeydown;
    private _handleHeaderFocus;
    static ɵfac: i0.ɵɵFactoryDeclaration<Accordion, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<Accordion, "accordion", ["Accordion"], { "multi": "multi"; "radio": "radio"; }, {}, ["_headers"]>;
}

as soon as I start the app (with npm start which calls ng serve), the file changes to:

import { AfterContentInit } from '@angular/core';
import { CdkAccordion } from '@angular/cdk/accordion';
import * as i0 from "@angular/core";
import * as ɵngcc0 from '@angular/core';
export declare class Accordion extends CdkAccordion implements AfterContentInit {
    private _keyManager;
    private _headers;
    ngAfterContentInit(): void;
    private radio;
    private _handleHeaderKeydown;
    private _handleHeaderFocus;
    static ɵfac: i0.ɵɵFactoryDeclaration<Accordion, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<Accordion, "accordion", ["Accordion"], { "multi": "multi"; "radio": "radio"; }, {}, ["_headers"]>;
    static ɵfac: ɵngcc0.ɵɵFactoryDeclaration<Accordion, never>;
    static ɵdir: ɵngcc0.ɵɵDirectiveDeclaration<Accordion, never, never, {}, {}, never>;
}

//# sourceMappingURL=accordion.d.ts.map

So the error message kind of makes sense about the duplicated identifiers efac and edir, but why would it do that? Also note the import of ɵngcc0 which was added after ng serve.

Solution

I found a similar issue on github and managed to get it working by deleting the metadata.json file which was in node_modules/my-package/my-package.metadata.json. After checking the /dist folder of my component-library I found the metadata.json file there as well, so I deleted it and rebuild it. Now the file was not generated again. Problem solved I guess 🤷‍♂️

Hope that helps other people. And as a side note: I guess it would make sense to change the build process so that /dist gets cleared before building.

Answered By - G. Egli