我遇到一个问题，当我使用Webpack构建项目时，Angular依赖注入无法正常工作。
我使用的是Angular 13和Webpack 5。我使用@Injectable装饰器标记服务类，并将其传递给组件构造函数：
@Injectable({ providedIn: 'root'})
export class DITestService {
constructor() { }
getTitle(){
return "DI testing";
}
}
@Component({
selector: 'app-root',
template: '<div>Title: {{ title }}</div>'
})
export class AppComponent {
public title: string = this.diTestService.getTitle();
constructor(private diTestService: DITestService)
{ }
}
当我运行这个项目时，出现了以下错误：
错误：此构造函数与Angular依赖注入不兼容，因为其参数列表中索引为0的依赖项无效。 如果依赖项的类型是原始类型（如字符串），或者该类的祖先缺少Angular修饰符，则可能发生这种情况。
请检查以下两点：1）索引为0的参数类型是否正确；2）该类及其祖先是否定义了正确的Angular修饰符。
当我通过Angular CLI而不使用Webpack运行同一项目时，它可以正常工作。
当我在组件构造函数中使用@Inject修饰符并使用Webpack构建项目时，它也可以正常工作。
constructor(@Inject(DITestService) private diTestService: DITestService)
是否有可能在不使用 @Inject 装饰器的情况下配置 Webpack 来使用依赖注入？
我的测试项目细节如下：
app.component.ts
import { Component } from '@angular/core';
import { DITestService } from './ditest-service.service';
@Component({
selector: 'app-root',
template: '<div>Title: {{ title }}</div>'
})
export class AppComponent {
public title: string = this.diTestService.getTitle();
constructor(private diTestService: DITestService)
{ }
}
ditest-service.service.ts
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root'})
export class DITestService {
constructor() { }
getTitle(){
return "DI testing";
}
}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DITestService } from './ditest-service.service';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [DITestService],
bootstrap: [AppComponent]
})
export class AppModule { }
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularTest1</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app-root></app-root>
</body>
</html>
main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
polyfills.ts
import 'zone.js';
package.json
{
"name": "angular-test1",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"webpack_serve": "webpack serve --mode development",
"webpack_build": "webpack --mode production"
},
"private": true,
"dependencies": {
"@angular/animations": "~13.0.0",
"@angular/common": "~13.0.0",
"@angular/compiler": "~13.0.0",
"@angular/core": "~13.0.0",
"@angular/forms": "~13.0.0",
"@angular/platform-browser": "~13.0.0",
"@angular/platform-browser-dynamic": "~13.0.0",
"@angular/router": "~13.0.0",
"rxjs": "~7.4.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.0.4",
"@angular/cli": "~13.0.4",
"@angular/compiler-cli": "~13.0.0",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
"angular2-template-loader": "^0.6.2",
"html-webpack-plugin": "^5.5.0",
"jasmine-core": "~3.10.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"ts-loader": "^9.2.6",
"typescript": "~4.4.3",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.7.1"
}
}
tsconfig.json
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist",
"forceConsistentCasingInFileNames": true,
"strict": false,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2020",
"module": "es2020",
"lib": [
"es2020",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": false,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
'polyfills': './src/polyfills.ts',
'app': './src/main.ts'
},
output:{
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: '[name].[fullhash].js'
},
devServer: {
historyApiFallback: true,
port: 40042,
open: false
},
resolve: {
extensions: ['.ts', '.js']
},
module:{
rules:[
{
test: /\.ts$/,
use: [
'ts-loader',
'angular2-template-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
}