Module parse failed: Unexpected character '�' After updating to angular 12

Question

After upgrading Angular from v.11 to v.12 I am getting the following Error

home.Component.ts

imgname= require("../assets/images/imgname.png");

./src/assets/images/imgname.png:1:0 - Error: Module parse failed: Unexpected character '�' (1:0) 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 (Source code omitted for this binary file)

"devDependencies": {
    "@angular-devkit/build-angular": "^12.0.1",
    "@angular/cli": "~12.0.1",
    "@angular/compiler-cli": "~12.0.1",
    "@angular/language-service": "~12.0.1",
    "@types/jasmine": "~3.7.4",
    "@types/jasminewd2": "~2.0.9",
    "@types/node": "^15.6.1",
    "css-loader": "5.2.6",
    "html-webpack-plugin": "^5.3.1",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.6.0",
    "mini-css-extract-plugin": "~1.6.0",
    "protractor": "~7.0.0",
    "ts-loader": "9.2.2",
    "ts-node": "~10.0.0",
    "tslint": "~6.1.0",
    "typescript": "~4.2.4"
    "webpack": "~5.37.1",
    "webpack-bundle-analyzer": "^4.4.2",
    "webpack-cli": "^4.7.0"
  }

angular.json "assets": [ "src/favicon.ico", "src/assets", ]

Answer 1

Unfortunately I cannot answer but may have some more information. I seem to be having a similar issue though on upgrading to Angular v12. I believe in my case it relates to executing the following in my Angular.json. In my case the lines are trying to copy assets for the use of Leaflet within angular and its is no longer able to copy the .png assets.

...
            "assets": [

              {
                "glob": "**/*",
                "input": "./node_modules/leaflet/dist/images",
                "output": "/assets/leaflet/"
              }

            ],
...

Thanks

Answer 2

I was able to solve this issue by adding file-loader! prefix before the path:

imgname = require("file-loader!../assets/images/imgname.png");

Also, you can try another approach described in this answer https://stackoverflow.com/a/67932447/8171860