如何在我的应用程序中显示我的库的组件答案

【问题标题】：How to display a component of my library in my application如何在我的应用程序中显示我的库的组件
【发布时间】：2021-10-07 20:58:46
【问题描述】：

我做不到。在名为“polaris-common”的库中，我创建了“AvSearchComponent”组件

我在库的 app.module.ts 中这样做了：

从 '@angular/common' 导入 { CommonModule }；从'@angular/core'导入{ NgModule }；

import { PolarisCommonComponent } from './polaris-common.component';
import { AvRechercheComponent } from './av-recherche/av-recherche.component';

@NgModule({
  declarations: [
    PolarisCommonComponent,
    AvRechercheComponent
  ],
  imports: [
    CommonModule,
  ]
  exports: [
    PolarisCommonComponent,
    AvRechercheComponent
  ]
})
export class PolarisCommonModule { }

在 app.module.ts 应用程序中我这样做了：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

 // module library
import { PolarisCommonModule } from 'polaris-common';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,

    // module library
    PolarisCommonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我想在应用的 app.html 中做类似的事情来显示库的组成

<app-av-recherche><app-av-recherche>

非常感谢

编辑：

【问题讨论】：

你能分享一下项目结构吗？

标签： angular components

【解决方案1】：

您不是在您的 app.html 中执行此操作，而是在您的第一个引导组件中执行此操作，即您的 AppComponent（请参阅您的 NgModule 注释中的 bootstrap 属性在您的 AppModule 中）。

【讨论】：

感谢您的回答，请问您能告诉我更多吗？
当 Angular 启动时，它将引导您在 main.ts 文件中指定的第一个模块（默认为 AppModule）。这个模块必须有第一个组件在应用程序启动时呈现（在这个模块的引导部分中提到的那个）。该组件将是定义 Angular 范围的根组件。所有其他组件都必须在此范围内（您可以将此组件视为组件树的根，外部的所有内容都将被忽略，因为它超出了范围）。
我尝试像这样修改 main.ts 文件：platformBrowserDynamic().bootstrapModule(PolarisCommonModule) .catch(err => console.error(err));但它不起作用
我发现我的错误是因为这个 import import { PolarisCommonModule } from 'polaris-common';