After a simple Angular Upgrade from 11 to 12, I am getting the following error for many ".HTML" files.
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
There is no other change in the project and also there is no custom webpack stuff.
Package.json
{
"name": "project1",
"version": "2.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --base-href /ui/",
"build": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --base-href /ui/ --configuration production --build-optimizer",
"buildcontainer": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --configuration production --build-optimizer --base-href=/ui/",
"test": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng test --source-map=true",
"lint": "ng lint",
"test-headless": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng test --watch=false --browsers=ChromeHeadless --code-coverage",
"e2e": "ng e2e",
"sonar": "sonar-scanner"
},
"private": true,
"browserslist": [
"last 2 Chrome versions"
],
"dependencies": {
"@ag-grid-community/angular": "~25.3.0",
"@ag-grid-enterprise/all-modules": "~25.3.0",
"@amcharts/amcharts4": "4.10.22",
"@amcharts/amcharts4-geodata": "4.1.19",
"@angular/animations": "12.2.16",
"@angular/cdk": "9.2.4",
"@angular/common": "12.2.16",
"@angular/compiler": "12.2.16",
"@angular/core": "12.2.16",
"@angular/forms": "12.2.16",
"@angular/localize": "12.2.16",
"@angular/material": "9.2.4",
"@angular/platform-browser": "12.2.16",
"@angular/platform-browser-dynamic": "12.2.16",
"@angular/router": "12.2.16",
"@aspnet/signalr": "1.1.4",
"@auth0/angular-jwt": "5.0.2",
"@googlemaps/js-api-loader": "1.12.3",
"@microsoft/applicationinsights-web": "2.5.10",
"@ngx-translate/core": "13.0.0",
"@ngx-translate/http-loader": "6.0.0",
"@progress/kendo-angular-buttons": "^7.0.0",
"@progress/kendo-angular-common": "^2.0.0",
"@progress/kendo-angular-dialog": "^6.0.0",
"@progress/kendo-angular-dropdowns": "^6.0.0",
"@progress/kendo-angular-editor": "^3.1.2",
"@progress/kendo-angular-inputs": "^8.0.0",
"@progress/kendo-angular-intl": "^3.0.0",
"@progress/kendo-angular-l10n": "^3.0.0",
"@progress/kendo-angular-layout": "^6.0.0",
"@progress/kendo-angular-popup": "^4.0.0",
"@progress/kendo-angular-progressbar": "^2.0.0",
"@progress/kendo-angular-toolbar": "^5.0.0",
"@progress/kendo-angular-treeview": "^6.0.0",
"@progress/kendo-drawing": "^1.5.12",
"@progress/kendo-licensing": "^1.0.2",
"@progress/kendo-angular-dateinputs": "4.4.1",
"@progress/kendo-angular-gauges": "3.0.3",
"@progress/kendo-angular-label": "2.3.4",
"@progress/kendo-angular-resize-sensor": "3.2.0",
"@progress/kendo-angular-scheduler": "1.2.4",
"@progress/kendo-angular-tooltip": "2.1.6",
"@progress/kendo-charts": "1.15.0",
"@progress/kendo-data-query": "1.5.4",
"@progress/kendo-date-math": "1.5.1",
"@progress/kendo-react-dropdowns": "4.12.0",
"@progress/kendo-recurrence": "1.0.1",
"@progress/kendo-schematics": "1.2.0",
"@progress/kendo-theme-default": "4.28.0",
"@progress/kendo-ui": "2021.3.1109",
"@types/file-saver": "^1.3.1",
"@types/googlemaps": "^3.40.1",
"ag-grid-angular": "25.3.0",
"ag-grid-community": "25.3.0",
"ag-grid-enterprise": "25.3.0",
"angular-2-dropdown-multiselect": "1.9.0",
"angular-gridster2": "~9.3.4",
"angular-oauth2-oidc": "^10.0.3",
"angular2-query-builder": "0.6.2",
"bootstrap": "3.4.1",
"core-js": "^3.22.3",
"crypto-js": "^4.1.1",
"file-saver": "^2.0.5",
"http-status-codes": "2.1.4",
"jquery": "3.5.1",
"json-stringify-safe": "5.0.1",
"jszip": "3.7.1",
"jw-paginate": "1.0.4",
"microsoft-adal-angular6": "1.3.0",
"moment": "^2.29.2",
"ng2-bootstrap-modal": "^1.0.1",
"ng2-signalr": "10.1.0",
"ngx-bootstrap": "^6.0.0",
"ngx-cacheable": "1.2.5",
"ngx-clipboard": "13.0.1",
"ngx-infinite-scroll": "0.8.4",
"ngx-quill": "^10.0.5",
"ngx-slick": "0.2.1",
"ngx-slick-fix": "0.1.3",
"ngx-window-token": "^5.0.0",
"ngx-xml2json": "1.0.2",
"nprogress": "0.2.0",
"numeral": "2.0.6",
"quill": "1.3.7",
"quill-to-pdf": "1.0.5",
"rxjs": "^6.6.2",
"rxjs-compat": "6.5.3",
"signalr": "2.4.1",
"slick-carousel": "1.8.1",
"sweetalert2": "^7.33.1",
"toastr": "2.1.4",
"trackable-entities": "1.0.0-alpha.2",
"tslib": "^2.0.0",
"typescript-string-operations": "1.4.1",
"util": "^0.12.4",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.2.17",
"@angular/cli": "12.2.17",
"@angular/compiler-cli": "12.2.16",
"@angular/language-service": "12.2.16",
"@types/angular": "1.7.2",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "^2.0.10",
"@types/jquery": "^3.5.14",
"@types/node": "14.14.19",
"codelyzer": "^6.0.2",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~6.0.0",
"karma": "6.3.17",
"karma-chrome-launcher": "^3.1.1",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "^4.0.2",
"karma-jasmine-html-reporter": "^1.7.0",
"karma-spec-reporter": "0.0.32",
"karma-trx-reporter": "0.4.3",
"protractor": "~7.0.0",
"ts-node": "~9.1.1",
"tslint": "~6.1.0",
"typescript": "4.3.5"
}
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": false,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"skipLibCheck": true,
"resolveJsonModule": true,
"typeRoots": [
"node_modules/@types"
],
"target": "es2015",
"module": "es2020",
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"cli": {
"analytics": "f4ad836f-05c5-4d33-865f-7fd9adca4abd"
},
"version": 1,
"newProjectRoot": "projects",
"projects": {
"project1": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/project1",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/web.config",
"src/favicon.ico",
"src/assets",
"src/silent-refresh.html"
],
"styles": [
{
"input": "node_modules/@progress/kendo-theme-default/dist/all.css"
},
"./src/styles.less",
"./node_modules/ag-grid-community/dist/styles/ag-grid.css",
"./node_modules/ag-grid-community/dist/styles/ag-theme-balham.css",
"./node_modules/nprogress/nprogress.css"
],
"scripts": [
"./node_modules/nprogress/nprogress.js",
"node_modules/toastr/toastr.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/signalr/jquery.signalr.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "1500kb",
"maximumError": "10mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "200kb",
"maximumError": "400kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "project1:build"
},
"configurations": {
"production": {
"browserTarget": "project1:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "project1:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"codeCoverage": true,
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
{
"input": "node_modules/@progress/kendo-theme-default/dist/all.css"
},
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./src/styles.less"
],
"scripts": [
"./src/assets/js/jquery-3.5.1.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "project1"
}
if downgraded to 11 it works fine. What could be the possible mistake ?
The issue is due to the following code. which works in Angular 11
import('src/app/modules' + this.path).then(file => {
this.component = file[this.inputProperty.componentName]
}).catch((err: any) => {
console.log('File not found:', err);
});
