2

I'm trying to create a "monorepo" app with npm workspaces (first time I try that) and I have the following (simplified) structure

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

My problem is in angular, when I try to import a simple class (app-settings.model.ts) from the shared package :

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 = "") {}
}

In the browser console I've got the error:

ERROR TypeError: _my_app_shared__WEBPACK_IMPORTED_MODULE_0__.AppSettings is not a constructor

I don't know why there is an error because it seems to work on the "backend" side (which is a nodeJs + express API), I have no problem to instanciate classes from the shared folder. Maybe I'm missing a configuration on the angular side.

Thanks in advance. :) Sorry if my english is bad, it's not my primary language.

Here is the tsconfig.base.json

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

And the packages/shared tsconfig.json

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

An here is the 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" }]
}

Let me know if other files can help.

Alexandre Sanigou
  • 21
  • 2
  • have you checked this ? https://stackoverflow.com/questions/50435253/webpack-imported-module-is-not-a-constructor – inkredusk Mar 31 '23 at 08:41
  • Hey, thanks for the answer. I already found this, but I don't use webpacks so I don't have config files like this thread. I'm sure I can make it work without it – Alexandre Sanigou Mar 31 '23 at 08:45
  • I also tried to add "export default" on my AppSettings class and change the import from "import {AppSettings} from '...'" to "import AppSettings from '...'" but the error is the same. – Alexandre Sanigou Mar 31 '23 at 08:51

0 Answers0