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.