inject() must be called from an injection context

Question

I am trying to export my Angular app as an npm module to be consumed by other applications, but am running into some difficulties. I have not been able to find this error anywhere else on the internet, and am at my wit's end.

I followed this tutorial: https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e

I used ng-packagr to export my app as an npm module. I can successfully install it from a local folder on a barebones test app, but cannot get it to display my app.

Error:

    AppComponent.html:1 ERROR Error: inject() must be called from an injection context     at inject (core.js:1362)     at ChangeStackService_Factory (template-wiz.js:2074)     at _callFactory (core.js:8223)     at _createProviderInstance (core.js:8181)     at resolveNgModuleDep (core.js:8156)     at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:8849)     at resolveDep (core.js:9214)     at createClass (core.js:9094)     at createDirectiveInstance (core.js:8971)     at createViewNodes (core.js:10191) 

template-wiz.module.ts (Module being exported)

    import { NgModule, ChangeDetectorRef, ComponentFactoryResolver } from '@angular/core';     import { TemplateWizComponent } from './template-wiz.component';     import { BrowserModule } from '@angular/platform-browser';     import { FormsModule } from '@angular/forms';     import { HttpClientModule } from '@angular/common/http';     import { BlockListDirective } from './Directives/block-list.directive';     import { TemplateItemsDirective } from './Directives/template-items.directive';     import { ContextMenuComponent, SeperatorComponent, DragBoxComponent, SnapLineComponent, PropertiesComponent, ToolboxComponent } from './Components'     import { AddressBlockComponent, TextBlockComponent, ImageBlockComponent, DataBlockComponent } from './Data-Blocks';     import { BlockFactoryService, BlockRegistryService, DisplayInfoService, MouseClickService, SavingService, SnapService, TextHelperService, UserModeService } from './Services';     import { PageContextMenuComponent } from './Components/page-context-menu/page-context-menu.component';     import { CamelToWordsPipe } from './Pipes/camel-to-words.pipe';     import { PdfPublisherService } from './Services/pdf-publisher/pdf-publisher.service';     import { GradientBlockComponent } from './Data-Blocks/gradient-block/gradient-block.component';     import { PropToTypePipe } from './Pipes/prop-to-type.pipe';     import { ShapeBlockComponent } from './Data-Blocks/shape-block/shape-block.component';     import { CommonModule } from '@angular/common';     import { ModuleWithProviders } from '@angular/compiler/src/core';       @NgModule({       imports: [         CommonModule,         FormsModule,         HttpClientModule       ],       entryComponents: [         AddressBlockComponent,         ContextMenuComponent,         DragBoxComponent,         GradientBlockComponent,         ImageBlockComponent,         PageContextMenuComponent,         SeperatorComponent,         ShapeBlockComponent,         SnapLineComponent,         TextBlockComponent       ],       declarations: [         TemplateWizComponent,         DataBlockComponent,         AddressBlockComponent,         SeperatorComponent,         BlockListDirective,         TemplateItemsDirective,         ImageBlockComponent,         TextBlockComponent, DragBoxComponent,         SnapLineComponent,         ToolboxComponent,         PropertiesComponent,         ContextMenuComponent,         PageContextMenuComponent,         GradientBlockComponent,         CamelToWordsPipe,         PropToTypePipe,         ShapeBlockComponent       ],       providers: [         BlockFactoryService,         BlockRegistryService,         DisplayInfoService,         MouseClickService,         SavingService,         SnapService,         TextHelperService,         UserModeService,         PdfPublisherService       ],       //bootstrap: [TemplateWizComponent],       exports: [         TemplateWizComponent       ]     })     export class TemplateWizModule {       static forRoot(): ModuleWithProviders {         return {           ngModule: TemplateWizModule,           providers: [             ComponentFactoryResolver           ]         }       }     } 

app.module.ts (Bare bones test app using my module)

    import { BrowserModule } from '@angular/platform-browser';     import { NgModule } from '@angular/core';     import { FormsModule } from '@angular/forms';     import { HttpClientModule } from '@angular/common/http';     import { AppComponent } from './app.component';     import { TemplateWizModule } from 'template-wiz';      @NgModule({       declarations: [         AppComponent,       ],       imports: [         BrowserModule,         FormsModule,         TemplateWizModule.forRoot(),         HttpClientModule       ],       providers: [],       bootstrap: [AppComponent]     })     export class AppModule { } 

Any help or pointers at all would be appreciated, thank you.

Answer 1

There seems to be an issue when using npm link when consuming the library.

Solution: use projects.$name.architect.build.options.preserveSymlinks: true in the angular.json file of the client project, not the library.

Further information: https://github.com/angular/angular/issues/25813