模块解析失败：意外字符“？” 更新到 Angular 12 后

Question

将 Angular 从 v.11 升级到 v.12 后，出现以下错误

\n

home.Component.ts

\n

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

\n

./src/assets/images/imgname.png:1:0- 错误：模块解析失败：意外字符 \'\xef\xbf\xbd\' (1:0)\n您可能需要适当的加载程序来处理此文件类型，当前没有配置加载程序来处理此文件。请参阅https://webpack.js.org/concepts#loaders \n（此二进制文件省略源代码）

\n

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

\n

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

\n

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