typescript - Npm-arbetsytor och Angular


Jag försöker skapa en "monorepo"-app med npm-arbetsytor (första gången jag provar det) och jag har följande (förenklade) struktur

- package.json
- tsconfig.json
- tsconfig.base.json
-- packages/
--- frontend/ # Angular app
--- backend/
---- package.json
---- tsconfig.json
--- shared/
---- package.json
---- tsconfig.json

Mitt problem är i Angular, när jag försöker importera en enkel klass (app-settings.model.ts) från det delade paketet :

import { AppSettings } from "@my-app/shared/src/models/app-settings.model";

...

public ngOnInit(): void {
    const settings: AppSettings = new AppSettings("en");
}

The shared/src/models/app-settings.model.ts

export class AppSettings {
    public static readonly FILENAME: string = "app_settings.json";
    constructor(public lang: string = "") {}
}

I webbläsarkonsolen har jag fått felet:

ERROR TypeError: _my_app_shared__WEBPACK_IMPORTED_MODULE_0__.AppSettings is not a constructor

Jag vet inte varför det finns ett fel eftersom det verkar fungera på "backend"-sidan (som är en nodeJs + express API), jag har inga problem att instansiera klasser från den delade mappen. Kanske saknar jag en konfiguration på Angular-sidan.

Tack på förhand. :) Förlåt om min engelska är dålig, det är inte mitt första språk.

Här är tsconfig.base.json

{
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "nodenext",
    "target": "ES6",
    "sourceMap": true,
    "outDir": "dist",
    "composite": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "declaration": true,
    "allowSyntheticDefaultImports": true
  }
}

Och paketen/shared tsconfig.json

{
    "extends": "../../tsconfig.base.json",
    "compilerOptions": {
        "rootDir": "src",
        "outDir": "dist"
    }
}

Och här är den angular tsconfig.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
    "compileOnSave": false,
    "compilerOptions": {
        "baseUrl": "./src",
        "outDir": "./dist/out-tsc",
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "noImplicitOverride": true,
        "noPropertyAccessFromIndexSignature": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "sourceMap": true,
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "importHelpers": true,
        "target": "ES2022",
        "module": "ES2022",
        "useDefineForClassFields": false,
        "lib": ["ES2022", "dom"],
        "paths": {
            "@modules/*": ["app/modules/*"],
            "@shared/*": ["app/shared/*"],
            "@environment": ["environments/environment.ts"]
        }
    },
    "angularCompilerOptions": {
        "enableI18nLegacyMessageIdFormat": false,
        "strictInjectionParameters": true,
        "strictInputAccessModifiers": true,
        "strictTemplates": true
    },
    "references": [{ "path": "../shared" }]
}

Låt mig veta om andra filer kan vara till hjälp.