创建共享库并在本地使用（angular+；typescript+；网页包）

我正在尝试创建一个共享库，它将提升我们以后可以在其他应用程序中使用的所有通用组件，而无需复制它们。我们已经有了一个工作的网页生态系统来构建我们的应用程序，所以我们需要坚持这个生态系统来创建共享库

根据我收集的指南和帖子（例如，），这是我为图书馆建立的配置，以使其得到认可

共享库app.module.ts文件

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

共享库webpack.config.js文件：

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

在编译库之后，这为我提供了以下js文件（目前为开发模式）：

到目前为止，我们已经在js上编译了我们的库，并打包为“SharedModule”

现在，当谈到消费时，我需要在这里召唤巫师。在我的应用程序中，我只需访问捆绑文件即可获得共享库：

使用app.module.ts文件 （注意，我甚至没有使用tsconfig.json文件路径中定义的别名来检查是否因此而失败）

正在使用angular app tsconfig.json文件：

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

到目前为止，我确信我的应用程序“看到”共享代码的一切都已准备就绪。但是，当我启动应用程序时，共享代码似乎不存在：

我不得不放弃一些解决方案，他们说要将库作为npm包发布并安装到消费应用程序上。对我来说，这超出了我们的范围，我们希望所有的代码都是紧密的，并一起生成。我只需要一个在库伞下编译我的共享组件的方法（我认为已经完成的事情），并且能够在我的应用程序中消耗它（我认为我失败了）。

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