必须从注入上下文中调用inject()

Question

我试图将我的Angular应用程序导出为npm模块以供其他应用程序使用,但遇到了一些困难.我无法在互联网上的任何其他地方找到此错误,而且我的智慧结束了.

我按照本教程:https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e

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

错误:

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

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

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 { }

任何帮助或指示都将不胜感激,谢谢.

Answer 1

同样的问题，但我的情况更愚蠢......

我跑npm install something错文件夹了。

因此，只需删除错误的“node_modules”并npm install放入正确的文件夹 x)

Answer 2

我的情况是因为“test-setup.ts”中缺少此代码。我只有前两行。

import 'jest-extended';
import 'jest-preset-angular/setup-jest';

import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';

getTestBed().resetTestEnvironment();
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
  teardown: { destroyAfterEach: false },
});

让事情变得有点困难的是，即使添加此代码后，我也遇到了不同的无益错误，因为它是一个 Angular 库包，有自己的package.json依赖项@angular/platform-browser-dynamic缺失。

上面有帮助，但我再次删除了这段代码。
真正有帮助的是/sf/answers/4810287541/

可发布的包

• 一定不能有dependencies，只有peerDependencies
• npm install不应该运行。该库不得包含node_modules目录。

令人困惑的是，几个月来一直dependencies工作node_modules得很好，但突然开始失败，现在如果不修复上述问题，甚至较旧的提交也不再工作。

Answer 3

我有同样的错误.

我发现我是Inject从而@angular/core不是导入@angular/core/testing.

希望有所帮助!

Answer 4

在使用库时使用npm链接似乎是一个问题。

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

剧透：在angular.json中使用“ projects。$ name.architect.build.options.preserveSymlinks：true”

Answer 5

这是为我解决的问题：

添加以下行tsconfig.app.json下compilerOptions：

"paths": { "@angular/*": [ "../node_modules/@angular/*" ] }

来源：https : //github.com/angular/angular/issues/25813#issuecomment-500091900

Answer 6

我遇到了类似的问题。通过 npm 链接在 Angular 应用程序中使用 Angular lib。

如前所述：“解决方案：在客户端项目的 angular.json 文件中使用projects.$name.architect.build.options.preserveSymlinks: true，而不是库。” 当使用“ngserve”为应用程序提供服务时有效。

然而，当使用“ng test”对应用程序进行单元测试时，错误仍然存​​在。在此处的 angular.json 文件中添加preserveSymLinks：

项目.$name.architect.test.options.preserveSymlinks: true

也解决了这个问题。

Answer 7

2022 年更新

\n

我在 Angular 库工作区中遇到了这个问题。我的目录结构如下

\n

project\n\xe2\x94\x82   package.json\n\xe2\x94\x82\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80projects\n\xe2\x94\x82   \xe2\x94\x82\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80 myLibApp\n\xe2\x94\x82       \xe2\x94\x82   file111.txt\n\xe2\x94\x82       \xe2\x94\x82   file112.txt\n\xe2\x94\x82       \xe2\x94\x82   ...\n\xe2\x94\x82   \n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80 myLibExampleApp\n

\n

我想向我的主库添加一些依赖项，而我在文件夹npm i内所做的myLibApp操作导致了此问题。我必须删除node_moduleslib 内部并在根级别package.json以及内部提供依赖项lib，但是npm i提供依赖项，但仅在根级别中

\n

也到了这里结束

\n