Skapa ett delat bibliotek och använd det lokalt (angular + typescript + webpack)

Jag försöker skapa ett delat bibliotek som kommer att höja alla vanliga komponenter som vi senare kan använda i andra appar utan att behöva duplicera dem. Vi har redan ett fungerande webpack-ekosystem för att bygga upp våra appar, så vi måste hålla oss till det för att kunna skapa det delade biblioteket.

Enligt guider och inlägg jag har samlat runt omkring (såsom https://webpack.js.org/guides/author-libraries/#root, https://krasimirtsonev.com/blog/article/javascript-library-starter-using-webpack-es6, https://github.com/FabianGosebrink/angular-libraries) är detta den konfiguration jag har upprättat för att biblioteket ska erkännas som ett sådant.

delad biblioteksapp.module.ts-fil

import {NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";

//modules
import {AppRoutingModule} from "./routes/app-routing.module";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {ScrollingModule} from "@angular/cdk/scrolling";
import {AgGridModule} from "ag-grid-angular";

//components
import {AppComponent} from "./app.component";
import {LayoutComponent} from "@/components/layout/layout.component";


//modules with my own exportable components
import {ComponentsModule} from "@/modules/components.module";


@NgModule({
  declarations: [
    AppComponent,   
    LayoutComponent
  ],
  imports: [
    AppRoutingModule,
    BrowserAnimationsModule,
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    ScrollingModule,   
    ComponentsModule
  ],
  exports: [ComponentsModule],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [
 
  ]
})

export class SharedModule {
}

delad biblioteks webpack.config.js-fil:

 ... 
 output:
              {
                path: path.resolve(__dirname, "../../build/apps/shared"),
                publicPath: "/shared/",
                filename: "shared.js",               
                library: "SharedModule",
                libraryTarget: 'umd',
                umdNamedDefine: true
              }
          };
...

Detta ger mig följande js-fil efter att jag har kompilerat biblioteket (utvecklingsläge för tillfället):

Hittills har vi vår bibliotek kompilerat på js och paketerat som "SharedModule"

Nu, när det gäller att konsumera är det här jag behöver kalla på trollkarlar här omkring. I min konsumtionsorienterade Angular-app kräver jag det delade biblioteket genom att bara gå åt bundle-filen:

konsumerar Angular-app app.module.ts-fil (notera att jag inte ens använde aliaset som definierats i sökvägen i tsconfig.json-filen för att kontrollera om det var det som orsakade felet)

 //modules
    import {AgGridModule} from "ag-grid-angular";
    import {AppRoutingModule} from "./routes/app-routing.module";
    import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
    import {FormsModule, ReactiveFormsModule} from "@angular/forms";
    import {ScrollingModule} from "@angular/cdk/scrolling";
    import {SharedModule} from "../../../../build/apps/shared/shared";

använder Angular-appens tsconfig.json-fil:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "lib": ["es2018", "dom"],
    "target": "ES5",
    "baseUrl": "src",
    "paths": {
      "@/*": [
        "app/*",
        "../../../node_modules"
      ],
      "@shared/*": [
        "../../../build/apps/shared/*"
      ]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "src/test.spec.ts",
    "src/**/*.spec.ts"
  ]
}

Hittills var jag övertygad om att allt var inställt för att min app skulle "se" den delade koden. Men när jag startar appen verkar den delade koden inte finnas:

Jag har varit tvungen att förkasta flera lösningar där de pratar om att publicera biblioteket som ett npm-paket och installera det i den app som använder det. För mig är detta något som ligger utanför vår räckvidd, vi vill att all kod ska vara kompakt och producerad tillsammans. Jag behöver bara ett sätt att kompilera mina delade komponenter under ett biblioteksparaply (en sak jag anser vara uppnådd) och kunna använda dem i min app (en sak jag anser att jag har misslyckats med katastrofalt).