Namespace missing in generated .d.ts

[d-eder]

🔎 Search Terms

namespace missing, import alias namespace missing

🕗 Version & Regression Information

• This changed between versions >5.2.2 and <=5.5.4

⏯ Playground Link

https://stackblitz.com/edit/stackblitz-starters-fxkjvu

💻 Code

File translation.ts:

export interface Translation {
  translationKey: Translation.TranslationKeyEnum;
}

export namespace Translation {
  export type TranslationKeyEnum = 'translation1' | 'translation2';
  export const TranslationKeyEnum = {
    Translation1: 'translation1' as TranslationKeyEnum,
    Translation2: 'translation2' as TranslationKeyEnum,
  }
}

File my-lib.component.ts:

import { Component } from '@angular/core';
import {Translation} from "./translation";
import TranslationKeyEnum = Translation.TranslationKeyEnum;

@Component({
  selector: 'lib-my-lib',
  standalone: true,
  imports: [],
  template: `
    <p>
      {{ TranslationKeyEnum.Translation1 }}
    </p>
  `,
  styles: ``
})
export class MyLibComponent {
  TranslationKeyEnum = TranslationKeyEnum;
}

🙁 Actual behavior

For the given typescript file, a declaration file translation.d.ts is generated which looks like:

export interface Translation {
    translationKey: Translation.TranslationKeyEnum;
}
export declare namespace Translation {
    type TranslationKeyEnum = 'translation1' | 'translation2';
    const TranslationKeyEnum: {
        Translation1: TranslationKeyEnum // should be Translation.TranslationKeyEnum;
        Translation2: TranslationKeyEnum;
    };
}

And similar for the component file my-lib.component.d.ts:

import { Translation } from "./translation";
import * as i0 from "@angular/core";
export declare class MyLibComponent {
    TranslationKeyEnum: {
        Translation1: TranslationKeyEnum;
        Translation2: TranslationKeyEnum;
    };
    static ɵfac: i0.ɵɵFactoryDeclaration<MyLibComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<MyLibComponent, "lib-my-lib", never, {}, {}, never, never, true, never>;
}

This will then create an error when building the application:

X [ERROR] TS2304: Cannot find name 'TranslationKeyEnum'. [plugin angular-compiler]

    dist/my-lib/lib/my-lib.component.d.ts:5:22:
      5 │         Translation1: TranslationKeyEnum;
        ╵                       ~~~~~~~~~~~~~~~~~~


X [ERROR] TS2304: Cannot find name 'TranslationKeyEnum'. [plugin angular-compiler]

    dist/my-lib/lib/my-lib.component.d.ts:6:22:
      6 │         Translation2: TranslationKeyEnum;
        ╵                       ~~~~~~~~~~~~~~~~~~

🙂 Expected behavior

On previous versions the namespace was also included:

export interface Translation {
    translationKey: Translation.TranslationKeyEnum;
}
export declare namespace Translation {
    type TranslationKeyEnum = 'translation1' | 'translation2';
    const TranslationKeyEnum: {
        Translation1: Translation.TranslationKeyEnum;
        Translation2: Translation.TranslationKeyEnum;
    };
}

Additional information about the issue

• The translation.ts file got generated by swagger codegen
• I'm not totally sure this issue belongs to typescript or the angular compiler
• We explicitly had to set the ts-config flag "skipLibCheck": false

[MartinJohns]

No error on the TypeScript side: Playground link

[d-eder]

No error on the TypeScript side: Playground link

I tested this on bug workbench again:

There is no error. However, the file test.d.ts looks wrong:

There is no import declaration for TranslationKeyEnum

I also tried this with typescript 5.2.2: bug-workbench-5.2.2
Here it is correct (with the namespace):

[RyanCavanaugh]

Confirmed the bug workbench repro locally

[jakebailey]

Bisects to #57887

[jakebailey]

Copy-pastable compiler test:

// @strict: true
// @declaration: true

// @filename: translation.ts
export interface Translation {
  translationKey: Translation.TranslationKeyEnum;
}

export namespace Translation {
  export type TranslationKeyEnum = 'translation1' | 'translation2';
  export const TranslationKeyEnum = {
    Translation1: 'translation1' as TranslationKeyEnum,
    Translation2: 'translation2' as TranslationKeyEnum,
  }
}


// @filename: test.ts 
import { Translation } from "./translation";
import TranslationKeyEnum = Translation.TranslationKeyEnum;

export class Test {
  TranslationKeyEnum = TranslationKeyEnum;
  print(){
    console.log(TranslationKeyEnum.Translation1);
  }
}

// @filename: index.ts 
import { Test } from "./test";
new Test().print();