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

【问题标题】：Module parse failed: Unexpected character '�' After updating to angular 12模块解析失败：更新到 Angular 12 后出现意外字符“�”
【发布时间】：2021-08-14 17:35:19
【问题描述】：

将 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 “资产”：[ "src/favicon.ico", “源/资产”， ]

【问题讨论】：

嗨 Vignesh，您找到任何解决方案了吗？我也面临类似的问题。
@JimitJoshi 通过使用此代码我已经解决了这个问题 this.imgname.push({ source: 'assets/images/imgname.png', alt: 'View', title: 'View' } );

标签： webpack-5 angular12 typescript4.0

【解决方案1】：

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

...
            "assets": [

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

            ],
...

谢谢

【讨论】：