出现该问题是因为在Angular 12中,对文件的处理方式进行了更改。在Angular 11及以前,我们可以直接使用相应文件的后缀名来引入文件。如:
import * as data from './data.json';
但在Angular 12中,该方式无法正常工作,会产生上述错误。解决方法是通过安装对应的loader,并在webpack.config.js文件中配置loader规则。以.json文件为例,需要安装json-loader,并在webpack.config.js中配置如下规则:
module: { rules: [ { test: /.json$/, use: 'json-loader' } ] }
配置完成后即可正常引入json文件。
需要注意的是,除json-loader外,还有一些常用的loader需要安装和配置,如css-loader、file-loader等等。具体可以根据实际需要添加。