7

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

Improve this question
2
  • Hi Vignesh, Did you find any solution? I am also facing similar issue. Commented Jun 20, 2021 at 5:25
  • @JimitJoshi by using this code i have fixed the issue this.imgname.push({ source: 'assets/images/imgname.png', alt: ' View', title: 'View' }); Commented Jun 21, 2021 at 4:45

2 Answers 2

Reset to default
2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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

Improve this answer

1 Comment

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'

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.