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", ]

Froward

Hi Vignesh, Did you find any solution? I am also facing similar issue. – Edithe

@JimitJoshi by using this code i have fixed the issue this.imgname.push({ source: 'assets/images/imgname.png', alt: ' View', title: 'View' }); – Froward

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

Wicked

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://mcmap.net/q/1304712/-angular-12-upgrade-issue-you-may-need-an-appropriate-loader-to-handle-this-file-type-currently-no-loaders-are-configured-to-process-this-file

Schwaben

after 'npm i file-loader' that worked, thank you. I had same issue after upgrading to Angular 13. In legacy code some components loaded images with 'require' – Boatwright