Question

我制作了一个与ng-packagr捆绑在一起的angular（7.2）库，该库发布在npm上。现在，我想在另一个项目中使用它。我可以导入模块，但不能导入包含的组件：

我捆绑的图书馆项目中的模块看起来像

import { ConfirmDialogComponent } from './dialogs/confirm/confirm-dialog.component';

@NgModule({
  imports: [...],
  entryComponents: [
    ConfirmDialogComponent
  ],
  declarations: [
    ConfirmDialogComponent
  ],
  exports: [
    ConfirmDialogComponent
  ]
})
export class MyComponents { }

在目标项目中，我使用npm安装发布的捆绑软件，并将模块导入`app.modules.ts

从'@ angular / platform-browser'导入{BrowserModule}; 从'@ angular / core'导入{NgModule};

import { AppComponent } from './app.component';
import { MyComponents } from 'my-components';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MyComponents
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

到目前为止没有错误，但是当我在app.component.ts中使用它

import { Component } from '@angular/core';
import { ConfirmDialogComponent } from 'my-components';

该语句导致

的编译错误

ERROR in src/app/app.component.ts(2,10): error TS2305: Module '"../../node_modules/my-components/my-components"' has no exported member 'MessageDialogComponent'.

如果我看着node_modules/my-components/my-components.d.ts

/**
 * Generated bundle index. Do not edit.
 */
export * from './my-components.module';
export { ConfirmDialogComponent as ɵa } from './dialogs/confirm/confirm-dialog.component';

和此app.component.ts

import { Component } from '@angular/core';
import { ɵa } from 'my-components';

有效！

那为什么缩小的（？）别名有效，而组件的真实名称却无效？

-

edit：如果我从声明文件中删除为“ a”，则可以按预期使用该部分的真实姓名。怎么了？

Answer 1

解决方案是使用桶文件作为ng-packagr public_api.ts的条目文件，而不是（角度）模块文件。

export * from './my-components.module'; // don't forget to export the module itself
export * from './dialogs/confirm/confirm-dialog.component';

ng-packagr打包的lib：仅缩小的组件名称有效

1 个答案: