Getting error " Error: AngularCompilerPlugin is running in a child compilation, but couldnot find a WebpackCompilerHost in the parent compilation."

[jha-pankaj]

In My project workbox-webpack-plugin is used.
It was working fine till angular 10. when i Migrated it to 11, i got error in "npm run build" command .
Error-
" Error: AngularCompilerPlugin is running in a child compilation, but couldnot find a WebpackCompilerHost in the parent compilation."
my workbook config file -

const { InjectManifest } = require('workbox-webpack-plugin');
const AotPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
const path = require('path');

module.exports = {
plugins: [
new InjectManifest({
maximumFileSizeToCacheInBytes: "26214400",
compileSrc: true,
swDest: "service-worker.js",
swSrc: "./src/app/utilities/service-worker.ts",
webpackCompilationPlugins: [
new AotPlugin({
tsConfigPath: path.join(__dirname, '../src/tsconfig.app.json'),
// mainPath: path.join(__dirname, './src/main.ts'),
// typeChecking: false,
}),
]
})
]
};

I am using -
"workbox-routing": "^5.1.3",
"workbox-precaching": "^5.1.3",
"workbox-core": "^5.1.3",
"workbox-webpack-plugin": "^5.1.3"
"workbox-cli": "^5.1.3",
"webpack-cli": "^3.3.7",

tsconfig file
{
"compileOnSave": false,
"compilerOptions": {
"downlevelIteration": true,
"importHelpers": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es2018",
"skipLibCheck": true,
"typeRoots": ["node_modules/@types"],
"lib": ["es2017", "dom", "webworker"],
"module": "ES2020",
"baseUrl": "./",
"strict": false
}

}
COuld you please help me to resolve this issue.