inject()는 주입 컨텍스트에서 호출되어야 합니다.
저는 Angular 앱을 다른 앱에서 사용할 npm 모듈로 내보내려고 하지만 어려움을 겪고 있습니다.이 오류는 인터넷 어디에서도 찾을 수 없어서 어찌할 바를 모르겠습니다.
저는 이 튜토리얼을 따랐습니다: https://medium.com/ @nikolasleblanc/building-an-building-an-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 { }
어떤 도움이나 조언이라도 주시면 감사하겠습니다.
사용 시 문제가 있는 것 같습니다.npm link도서관을 사용할 때.
하기: 사용하기projects.$name.architect.build.options.preserveSymlinks: true라이브러리가 아닌 클라이언트 프로젝트의 angular.json 파일에 있습니다.
추가 정보: https://github.com/angular/angular/issues/25813
제가 해결한 것은 다음과 같습니다.
추니다합가에 다음 합니다.tsconfig.app.jsoncompilerOptions:
"paths": { "@angular/*": [ "../node_modules/@angular/*" ] }
출처: https://github.com/angular/angular/issues/25813#issuecomment-500091900
같은 문제지만 내 사건은 더 멍청했어요...
나는 가지고 있었습니다npm install something잘못된 폴더에 있습니다.
따라서 잘못된 "node_modules"를 rm하고 npm을 양호한 폴더에 설치하기만 하면 됩니다 x).
저도 같은 오류가 있었습니다.
는 제가 가중다입니다는음오를 것을 했습니다.Inject@angular/core에 @angular/core/testing.
도움이 되길 바랍니다!
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누락되었습니다.
위에서 도움이 되었지만, 저는 이 코드를 다시 제거했습니다.
실제로 도움이 된 것은 https://stackoverflow.com/a/68718393/217408 입니다.
게시 가능 패키지
- 어서는 되는을 하면 안 .
dependencies, 친구들.peerDependencies npm install실행하면 안 됩니다.라이브러리에 다음이 포함되어서는 안 됩니다.node_modules디렉토리입니다.
가 있다는 것이 혼란스러웠습니다.dependencies그리고.node_modules몇 달 전부터 잘 작동했지만, 갑자기 실패하기 시작했고 이제는 위의 사항을 수정하지 않고는 더 이상 작동하지 않습니다.
저도 비슷한 문제에 부딪혔습니다.npm 링크와 함께 각진 앱 내에서 각진 lib 사용.
언급한 바와 같이: "솔루션: 프로젝트를 사용합니다.$name.건축가.build.options.preserveSymlinks: 라이브러리가 아닌 클라이언트 프로젝트의 angular.json 파일에서 true."는 "ng serve"로 응용 프로그램을 제공할 때 작동합니다.
그러나 유닛이 "ng test"로 애플리케이션을 테스트할 때 오류가 발생했습니다.여기서 angular.json 파일에 preserveSymLinks를 추가합니다.
프로젝트$name.architect.test.options.preserveSymlinks: true
그것도 고쳤습니다.
2022년 업데이트
Angular Library 작업 공간에서 이 문제에 직면했습니다.내 디렉토리 구조는 다음과 같습니다.
project
│ package.json
│
└───projects
│ │
│ └─── myLibApp
│ │ file111.txt
│ │ file112.txt
│ │ ...
│
└─────── myLibExampleApp
저는 제 메인 라이브러리에 종속성을 추가하고 싶었습니다.npm i에의 에.myLibApp폴더가 이 문제를 일으켰습니다.나는 그것을 제거해야 했습니다.node_modules 및 레벨 lib 합니다.package.json 뿐만 아니라.lib하지만 합니다.npm i근본적으로만
동일한 문제입니다.
내 케이스:매트 대화 상자를 사용할 때
import { Component, OnInit, Inject } from '@angular/core';
constructor(
@Inject(MAT_DIALOG_DATA) public data: any,
public matDialogRef: MatDialogRef<MatConfirmDialogComponent>) { }
Inject & Inject는 다릅니다.
주입은 함수이고 주입은 인터페이스입니다.
저는 이것이 같은 시나리오를 찾아 오는 누군가에게 도움이 되기를 바랍니다.
는 " 오류다 시메지습받니았를다▁error"라는 를 받았습니다.inject() must be called from an injection context내가 다른 것을 사용하는 나무 흔들기를 만들 때.InjectionToken예를 들어, 공장에서.
import { InjectionToken } from '@angular/core';
import { dependeeToken } from './dependee.token';
export const dependingToken = new InjectionToken<string>('depending', {
factory: () => inject(dependeeToken) + ' depending';
providedIn: 'root',
});
저는 인 대신다위제추가다니습에 했습니다.InjectionToken완전히NgModule.
import { NgModule } from '@angular/core';
import { dependeeToken } from './dependee.token';
import { dependingToken } from './depending.token';
@NgModule({
providers: [
{
deps: [dependeeToken],
provide: dependingToken,
useFactory: dependee => dependee + ' depending',
}
],
})
export class DependingModule {}
package.json한 것
{
"dependencies": {
"@angular/compiler": "6.1.9",
"@angular/core": "6.1.9"
},
"devDependencies": {
"@angular-devkit/build-angular": "0.8.4",
"@angular/cli": "6.2.4",
"@angular/compiler-cli": "6.1.9",
"typescript": "2.9.2"
}
}
제가 해결한 것은 제공된 것을 사용하는 것이었습니다.이 오류 메시지를 발생시킨 서비스의 공급자에 있는 앱 모듈에 서비스를 등록하는 대신 Injectable decorator에 속성이 있습니다.
@Injectable({
providedIn: 'root'
})
export class HeroService {}
이 문제가 발생하고 Angular Universal 및 npm 링크와 연결된 사용자 지정 Angular Library를 사용하는 모든 사용자에게 다음과 같은 문제가 발생합니다.
의 angular에 preserveSymlinks를 추가하기 은 preserveSymlinks입니다.projects.$name.architect.build.options.preserveSymlinks: true두 부분이 누락되었습니다.
위해서dev:ssr또는serve:ssr일을 하기 는 여기에: 려면추여합가니야다해기에작하업합▁to.projects.$name.architect.server.options.preserveSymlinks: true
이 시험을 여기서 : 그고다른의견언서이듯급했에, 마테를사경잊여십오시지기서.projects.$name.architect.test.options.preserveSymlinks: true
여기에 나열되지 않은 다른 사용 사례/장소가 있는 경우 아래에 설명합니다.
각진 건물을 지을 때 이 오류가 있었습니다.9.0.0-next.0와 함께ng build --prod지휘권버전으로 다운그레이드 중~8.2.8제 각진 앱을 다시 작동시켰습니다.
개발 과정에서 잘 작동했습니다.ng serve아이비와 연관이 있는 것 같습니다.
Karma에 테스트와 함께 오류가 나타나면 de node_modules 폴더를 삭제하고 다시 설치합니다.
Angular 애플리케이션을 테스트하는 과정에서 유사한 문제를 발견했습니다.애플리케이션이 npm과 함께 @bit에서 설치된 서비스를 가져왔습니다.서비스는 MatSnackBar에 의존했는데, 이는 OP와 동일한 오류를 일으키는 것으로 보입니다.
테스트를 실행하기 위해 테스트 모듈을 구성할 때 서비스를 인스턴스화했습니다.
아래의 예에서,AsyncUIFeedbackServiceBit에서 npm을 통해 설치되었습니다.설정useValue서비스의 새로운 인스턴스로, 그리고 스텁.MatSnackBar잘 작동했습니다.
await TestBed.configureTestingModule({
declarations: [GeneralInfoComponent],
providers: [
FormBuilder,
{ provide : AsyncUIFeedbackService,
useValue: new AsyncUIFeedbackService({} as MatSnackBar)}, // <----Create the service
],
imports: [AsyncUIFeedbackModule]
}).compileComponents();
@angular/core/testing이 아닌 @angular/core에서 Inject를 가져오는 중이었습니다.
배경: 이것은 내가 나만의 Angular 9 라이브러리를 로컬로 가져오려고 할 때 나만의 Angular 9 앱입니다.
나의 문제는 이 깃발이었습니다.tsconfig.json내가 지역적으로 지은 나의 도서관:
"angularCompilerOptions": {
"strictInjectionParameters": true
}
각도 설명서에 따르면 다음과 같습니다.
true이면 주입 유형을 확인할 수 없는 제공된 매개 변수에 대한 오류를 보고합니다.false인 경우 유형을 확인할 수 없는 @Injectable로 표시된 클래스의 생성자 매개 변수가 경고를 생성합니다.권장 값은 true이지만 기본값은 false입니다.
https://angular.io/guide/angular-compiler-options#strictinjectionparameters
솔직히, 저는 그 깃발에 대해 설명할 수 없을 정도로 잘 알지 못하고, 그것 없이도 갈 수 있습니다. 어쨌든 그것은 새로운 프로젝트에서 생성되었습니다.
제 경우에는 Angular2와 Firebase Realtime Database(rtdb)로 작업하고 있는데 채팅 GPT의 도움을 받아 코드 스크립트를 복사하여 프로젝트에 붙여넣은 후에도 동일한 오류가 발생합니다.
이런 고물선이 보입니다.private database: Database = inject(Database);프로젝트에 절대 사용하지 않습니다.
이 대사를 댓글 달면 효과가 있습니다.Angular2에서 ()를 주입하면 사용해야 합니다.바로 그겁니다.
언급URL : https://stackoverflow.com/questions/51485868/inject-must-be-called-from-an-injection-context
'itsource' 카테고리의 다른 글
| 자바스크립트에서 다른 문자열에 있는 모든 문자열의 인덱스를 찾는 방법은 무엇입니까? (0) | 2023.08.10 |
|---|---|
| iPhone HTML5 비디오 재생 버튼 숨기기 (0) | 2023.08.10 |
| 도커 리포지토리 이름을 변경하거나 이미지 이름을 변경하는 방법은 무엇입니까? (0) | 2023.08.10 |
| 오라클 패키지에서 기본값을 정의할 위치 (0) | 2023.08.10 |
| Android: ScrollView 내부의 View가 보이는지 확인하는 방법은 무엇입니까? (0) | 2023.08.10 |