必须从注入上下文中调用inject() [英] inject() must be called from an injection context

问题描述

我试图将Angular应用程序导出为npm模块以供其他应用程序使用，但是遇到了一些困难.我无法在Internet上的其他任何地方找到此错误，这是我的机智.

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.

我遵循了本教程:我使用ng-packagr将我的应用程序导出为npm模块.我可以从准系统测试应用程序的本地文件夹中成功安装它，但无法显示我的应用程序.

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.

错误:

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(正在导出模块)

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(使用我的模块的裸骨头测试应用程序)

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.

推荐答案

好像在使用库时使用npm链接时出现问题.

seems like an issue when using npm link when consuming the library.

查看以下问题: https://github.com/angular/angular/issues/25813

扰流板: 在angular.json中使用"projects.$ name.architect.build.options.preserveSymlinks:true"

Spoiler: use "projects.$name.architect.build.options.preserveSymlinks: true" in angular.json

这篇关于必须从注入上下文中调用inject()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！