Create shared library and consume it locally (angular + typescript + webpack)

Question

I am trying to create a shared library that will hoist all common components we can later use in other apps without having to duplicate them. We already have a working webpack ecosystem to build up our apps, so we need to stick to that in order to create that shared library.

According to guides and posts I have gathered around (such as 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) this is the configuration I have established for the library to be recognised as such.

shared library app.module.ts file

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 {
}

shared library webpack.config.js file:

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

This gives me the following js file after I compile the library (dev mode for the moment):

So far, we have our library compiled on js and bundled as "SharedModule"

Now, when it comes to consume it is where I need to summon wizards around here. In my consuming angular app I require that shared library by just accessing to the bundle file:

consuming angular app app.module.ts file (note I didn't even use the alias defined in the path of the tsconfig.json file to check if was failing because of that)

 //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";

consuming angular app tsconfig.json file:

{
  "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"
  ]
}

To this point I was convinced everything was set for my app to "see" the shared code. However, when I launch the app the shared code seems not to be present:

I have had to dismiss several solutions where they talk about publishing the library as a npm package and install it on the consuming app. To me this is something beyond our scope, we want all code to be tight and produced together. I just need a way to compile my shared components under a library umbrella (thing I consider accomplished) and be able to consume it in my app (thing I consider I failed miserably).

Create shared library and consume it locally (angular + typescript + webpack)

0 Answers