webpack-5 - 模块解析失败：更新到 Angular 12 后出现意外字符“�”

Question

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

home.Component.ts

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

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

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

标签： webpack-5angular12typescript4.0

Answer 1

不幸的是，我无法回答，但可能有更多信息。尽管在升级到 Angular v12 时，我似乎遇到了类似的问题。我相信在我的情况下，它与在我的 Angular.json 中执行以下内容有关。在我的情况下，这些行正在尝试复制资产以在 Angular 内使用 Leaflet，并且它不再能够复制 .png 资产。

...
            "assets": [

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

            ],
...

谢谢