如何将模块/组件捆绑到js并在另一个Angular项目中使用？

Question

我只是想构建一个模块/组件并将其作为 JS 包提供。它构建：

@Component({
  selector: 'app-component-overview',
  template: '<button><ng-content></ng-content></button>',
})
export class ButtonComponent {}

@NgModule({
  declarations: [ButtonComponent],
})
export class AppModule {}

问题是在将其构建为 javascript 包之后。当我尝试将其导入另一个角度项目时。我得到：

//ERROR in ... error TS2306 '...' is not a module.
   loadChildren: () => import('...').then(m=>m.ButtonModule)

也许我错过了这里的重点，事情在角度上有所不同，拥有 webpack 控制使它变得更容易，但我想避免引入自定义构建器并尽可能少地摆弄设置。

问题是，是否有一个有据可查的方法来捆绑模块甚至独立组件以作为 JS 捆绑在我的项目之外使用？除了同一项目中已经存在的重用和延迟加载的高级解释之外，我找不到任何有用的东西。

Answer 1

您似乎正在将此模块构建为应用程序的一部分，该应用程序应该在浏览器中运行。但您正在寻找的是将此模块构建为库的一部分，可以在其他项目中重复使用。

请参阅此官方 Angular 指南，了解如何创建库。

Answer 2

经过几个小时的浏览。我明白了。

@json-derulo 给出的答案是解决方案的一部分，但还有更多步骤可以实现此目的。

1. 遵循指南：https://angular.io/guide/creating-libraries 这是棘手的部分，如果您将库导入到工作区中，它将可以工作。但这没有多大意义。您可能有另一个带有角度应用程序的存储库，您想要使用该库。
2. 现在能够将此组件作为延迟加载的路由导入，您需要将“@angular/router”添加到 lib peerDependecies 中并再次运行 npm install
3. 现在创建一个路由模块并添加空路径以指向库中的组件。

//my-lib-routing.module.ts
import { NgModule} from "@angular/core";
import { RouterModule } from "@angular/router";
import { MyLibComponent } from "./my-lib.component";

const routes= [
 { path: '', component: MyLibComponent },
];

@NgModule({
 imports: [
   RouterModule.forChild(
     routes,
   )
   // other imports here
 ],
 // providers: [RouterModule],
 exports: [RouterModule]

})
export class myLibRoutingModule { }

4. 更改libmodule以导入路由模块

//
import { NgModule } from '@angular/core';
import { myLibRoutingModule } from './my-lib-routing.module';
import { MyLibComponent } from './my-lib.component';



@NgModule({
  declarations: [MyLibComponent],
  imports: [
    myLibRoutingModule
  ],
})
export class MyLibModule { }

5. 在 lib 项目根目录上运行“npm run build”。
6. 创建一个单独的存储库和“ng new app”
7. 将 lib 添加到主应用程序的 package.json 中，例如 "my-lib": "../my-lib-ws/dist/my-lib"。
8. 打开 angular.json 并将 "preserveSymlinks": true 添加到构建选项中。
9. 运行 npm i 将库链接为依赖项。
10. 将 libmoudle 添加为延迟加载路由

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [
 {path: 'test', loadChildren: () => import('my-lib').then(m=>m.MyLibModule)}
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

11. 运行 npm run start。并尝试访问“测试”路线。您应该看到主应用程序路由器中加载的组件已输出

现在，这更多的是学习练习，捆绑包几乎翻了一番。使用模块联合你会获益更多。但这是我们的一个用例。无论如何，步骤在这里，如果有人无法重现，请告诉我。

Answer 3

您想要做的是创建一个 Angular 自定义 Web 组件。 我在这里找到了一个关于如何执行此操作的很棒的教程：

https://blog.kalvad.com/export-your-angular-component-as-a-web-component/

将其升级到最近的 Angular 对我来说非常顺利。 如果您遇到任何挑战，我将发布一个更新的示例。