[英]Syncfusion TreeGrid + Angular 11 "Error: inject() must be called from an injection context"
[英]Getting "inject() must be called from an injection context" after upgrading to Angular 11
升級到 Angular 11 后,我無法再ng serve
我的 web 應用程序提供服務。
我正在使用 Spring Doc 和最新的 OpenAPI 生成器 gradle-plutin (5.0.0) 生成客戶端。
該問題似乎與我的(生成的)REST 客戶端有關。 打開 https://localhost:4200 會將以下內容寫入控制台:
main.ts:12 Error: inject() must be called from an injection context
at injectInjectorOnly (core.js:4901) [angular]
at Module.ɵɵinject (core.js:4911) [angular]
at Object.ApiModule_Factory [as factory] (meditation-rest-client.js:2885) [angular]
at R3Injector.hydrate (core.js:11158) [angular]
at R3Injector.get (core.js:10979) [angular]
at :4200/vendor.js:82591:55 [angular]
at Set.forEach (<anonymous>) [angular]
at R3Injector._resolveInjectorDefTypes (core.js:11016) [angular]
at new NgModuleRef$1 (core.js:25046) [angular]
at NgModuleFactory$1.create (core.js:25100) [angular]
at :4200/vendor.js:100468:45 [angular]
at Object.onInvoke (core.js:28301) [angular]
以下是我的tsconfig.json
文件:
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"module": "es2020",
"lib": [
"es2018",
"dom"
]
}
}
這就是我在package.json
中定義依賴項的方式
"chart.js": "^2.9.4",
"core-js": "^3.8.2",
"meditation-rest-client": "./generated/meditation-rest-client",
"http-server": "^0.12.3",
"http-status-codes": "^2.1.4",
"moment": "^2.29.1",
這是上面錯誤消息中提到的那些生成的行:
// ...
ApiModule.ɵmod = ɵngcc0.ɵɵdefineNgModule({ type: ApiModule });
ApiModule.ɵinj = ɵngcc0.ɵɵdefineInjector({ factory: function ApiModule_Factory(t) { return new (t || ApiModule)(ɵngcc0.ɵɵinject(ApiModule, 12), ɵngcc0.ɵɵinject(ɵngcc1.HttpClient, 8)); }, providers: [], imports: [[]] });
ApiModule.ctorParameters = () => [
{ type: ApiModule, decorators: [{ type: Optional }, { type: SkipSelf }] },
{ type: HttpClient, decorators: [{ type: Optional }] }
];
// ...
這曾經在 Angular 9 中有效,但在 Angular 11 中無效。
知道如何解決這個問題嗎? 我已經嘗試按照此處和 此處的建議設置"preserveSymlinks": true
。
如果您需要更多信息,請告訴我。
如果這是一個多項目設置(又名 monorepo),您必須注意以下事項:
projects
子目錄的文件夾)應該有一個package.json
和一個node_modules
目錄library
的項目有package.json
,它們應該只有對等依賴。 不要在這里運行npm install
! 這里不能有node_modules
目錄package.json
,因此也沒有node_modules
tsconfig.json
的compilerOptions
中的路徑來使用它。我在 github 找到這個示例框架項目有助於解決我的注入問題:
由於生成的 npm package 構建到某些 output 文件夾/generated/meditation-rest-client
中,可能會出現此問題。 當被前端應用程序引用時, api package 將 import @angular/core
解析為/generated/meditation-rest-client/node_modules/@angular/core
,不同於項目根目錄中的/node_modules/@angular/core
。
解決方法是刪除/generated/meditation-rest-client/node_modules
文件夾和父文件夾中的node_modules
文件夾, <project-root>/node_modules
。 或者,應將生成的代碼/generated/meditation-rest-client
復制到父文件夾不包含node_modules
文件夾的某個位置。
參見https://github.com/OpenAPITools/openapi-generator/issues/8447
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.