Question

我有一个应用程序我正在尝试升级到angular 5和library-tize。我设置ng-packagr以便构建和捆绑lib，这是没有问题，直到我尝试使用ngIf或ngFor中的一个组件给我错误

HeaderComponent.html:13 ERROR Error: StaticInjectorError[ViewContainerRef]: 
  StaticInjectorError[ViewContainerRef]: 
    NullInjectorError: No provider for ViewContainerRef!
    at _NullInjector.get (core.js:993)

在运行时。我环顾四周，尝试了一些不同的东西，但似乎没有什么能解决它......

以下是该库的相关模块代码。

@NgModule({
imports: [
    CommonModule,
    FormsModule,
    RouterModule,

    /* Bootstrap Imports */
    AccordionModule, 
    AlertModule, 
    ButtonsModule, 
    CarouselModule, 
    CollapseModule, 
    BsDropdownModule, 
    ModalModule, 
    PaginationModule, 
    ProgressbarModule, 
    RatingModule, 
    TabsModule, 
    TimepickerModule, 
    TooltipModule, 
    TypeaheadModule, 
    DatepickerModule,

    ServicesModule,
],
declarations: [
    LayoutComponent,
    HeaderComponent,
    FooterComponent,
    OffsidebarComponent,
    SidebarComponent,
    UserblockComponent,
    OverlayComponent,
    BusyIndicatorComponent
],
exports: [
    LayoutComponent
],
providers: [
    UserblockService
]
})
export class ComponentsModule {}

以下是报告错误的HTML。

          <a class="hidden-xs" trigger-resize="" (click)="toggleCollapsedSideabar()" *ngIf="!isCollapsedText()">
            <i class="material-icons">menu</i>
          </a>

Answer 1

您应该将BrowserModule添加到导入数组中。

@NgModule({
imports: [
    BrowserModule, <----- add this
    CommonModule,
    FormsModule,
    RouterModule,

更多信息here。

Answer 2

在将库添加到主应用程序之前，从库的package.json中删除依赖项是我的解决方法。

Answer 3

在使用中的应用程序的angular.json中添加reserveSymlinks标志。

{"projects": {
    "MyApp": {
      "architect": {
        "build": {
          "options": {
            "preserveSymlinks": true, // <-----
[...]

并将CommonModule导入组件库中

Answer 4

我终于可以通过以下操作完成我的设置：

正确设置了npm链接（在库的dist文件夹中为'npm link'，然后在主应用程序的文件夹中为'npm link libname'）。

在使用该库的应用程序的angular.json中将keepSymlinks设置为true 正如@Michael R.提到的



{"projects": {
            "MyApp": {
              "architect": {
                "build": {
                  "options": {
                    "preserveSymlinks": true, // <-----
        [...]

3.确保在我的库的tsconfig.lib.json中也将keepSymlinks设置为true



"angularCompilerOptions": {
                    "preserveSymlinks": true,, // <-----
        [...]

在此之后可以正常工作的情况下，重新编译lib（使用ng build）并重新编译主应用程序（在ng serve上），还应该将BrowserModule用于applicatins，在库内部使用CommonModule

库中的组件不适用于ngIf / ngFor

4 个答案: