angular引入json文件报错找不到模块“../assets/config/config.json”。请考虑使用 “--resolveJsonModule“ 导入带 “.json“ 扩展的模块。

最新推荐文章于 2024-03-07 14:22:30 发布
最新推荐文章于 2024-03-07 14:22:30 发布
阅读量4.2k 收藏 1
点赞数 1
分类专栏： angular 文章标签： angular.js json 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nansen0324/article/details/126385161
版权

angular引入json文件报错

找不到模块“…/assets/config/config.json”。请考虑使用 “–resolveJsonModule” 导入带 “.json” 扩展的模块。

在这里插入图片描述
解决办法：
在根目录下tsconfig.json加入下面这两句(compilerOptions对象里面加入)

/* 自己加入下面这两句话，不过可能因此影响jQuery的使用 */
"resolveJsonModule":true,      
"esModuleInterop": true,

在这里插入图片描述

他强任他强03
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于TypeScript中import JSON的正确姿势详解
10-19
2012年10月首度对外公布typescript（当时已经是0.7？的版本）同时开源，ts的编译器是用js编写的（后来改成ts？），可以在线编写。下面这篇文章主要给大家介绍了关于TypeScript中import JSON的正确姿势，需要的朋友可以参考下。
typescript、angular如何导入JSON文件
圆圆的 JavaScript 博客
09-03 3056
typescript中如何import json文件
angular 读取json文件
c_x_m的博客
04-05 1962
angular 为k8s中测试区、正式区请求不同后台接口而读取json文件参考博客：https://zhuanlan.zhihu.com/p/333752021.src->assets下 新建：conf.json2.src->core新建config文件夹，新建urls.ts文件3.src->app->core->startup->startup.service.ts文件中添加内容1.引入Urls文件2.constructor添加3.初始化读取conf文件4.src-&g
Cannot find module ‘./data.json‘. Consider using ‘--resolveJsonModule‘ to import module with ‘.json‘
weixin_64974855的博客
08-07 1146
就能解决 ts 文件不能导入 json 文件问题。只要在 tsconfig.json 配置。
TypeScript 导入 JSON Module --resolveJsonModule
热门推荐
alize的博客
12-17 1万+
// typings.d.ts declare module '*.json' { const value: any; export default value; } import jsonfrom 'src/assets/json/users.json'
请考虑使用 “--resolveJsonModule“ 导入带 “.json“ 扩展的模块
Nodejs
10-12 7932
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ（多数人在人潮汹涌的世间，白白挤了一生，从来不知道哪里才是他所想要到达的地方，而有目标的人却始终不忘记自我的方向，所以他能打开出路，走向成功。——罗兰）ㅤㅤㅤㅤㅤㅤ。
在没有 “node“ 模块解析策略的情况下，无法指定选项 “-resolveJsonModule“。ts
最新发布
weixin_51614564的博客
03-07 1124
遇到错误“在没有 'node' 模块解析策略的情况下，无法指定选项 '-resolveJsonModule'”时，意味着你的 TypeScript 配置中启用了resolveJsonModule选项，但没有将moduleResolution设置为node。resolveJsonModule选项允许你导入.json文件作为模块，而这通常需要moduleResolution设置为node，因为这是 Node.js 解析模块的方式。这应该会解决你遇到的问题。这是解决上述错误的直接方法。
heima-shop项目报错
qq_40215078的博客
09-02 518
在 TypeScript 中，默认情况下，编译器只支持解析 JavaScript 和 TypeScript 模块，而不支持解析 JSON 模块。默认情况下，TypeScript 使用 “node” 解析策略。“node” 解析策略是基于 Node.js 的模块解析规则，它会按照 Node.js 的模块解析算法来查找和加载模块。所以，尽管 Node.js 和 bundler 都可以在不同的环境中运行 JavaScript 代码，但它们的目标和用途有所不同，因此处理 JSON 数据的方式也会有所区别。
vue3-vite安装后main.ts文件和tsconfig.app.json文件报错解决
qq_39111074的博客
06-25 9615
vue3-vite安装后main.ts文件和tsconfig.app.json文件报错解决
模块
xiaoyao_wy的博客
11-18 316
模块一、模块介绍二、模块使用2.1 import语句2.2 from...import语句2.3 其他导入语法(as)2.4 循环导入问题2.5 搜索模块的路径与优先级2.6 区分py文件的两种用途2.7 编写一个规范的模块 一、模块介绍 在python中，一个py文件就是一个模块，文件名为xxx.py，模块名为xxx,导入模块可以引用模块中已经写好的功能。打个比方，如果汽车是一个完整的程序，那模块就像是汽车中的零部件，剩下的就是如何把模块按照逻辑组装成一部完整的汽车了。比起直接编写一个完整的程序，单独开发
Umi4各种运行报错排查
芝芝为荔枝
05-11 2630
Umi4各种运行报错排查
02 ionic目录结构分析以及创建组件 使用组件-avi.rar
04-09
5. **注册组件** - 在需要使用组件的模块（通常是`app.module.ts`）中，导入组件类，并将其添加到`declarations`数组中。 6. **在父组件中使用** - 最后，在父组件的HTML模板中，通过`<component-name>`标签引入新...
sails-angular-material-seed:遵循 JohnPapa 指南，使用 AngularJS 和 Material Angular 航行
06-15
4. **配置文件**：如`.gitignore`，`package.json`记录项目的依赖和脚本，`sails.config.js`是Sails.js的全局配置文件，`bower.json`或`package-lock.json`用于管理前端依赖。 5. **启动与构建脚本**：`Gruntfile....
meditation-app-master.zip
11-21
7. **package.json**：如果是Node.js项目，这个文件会列出项目依赖的npm模块和版本信息。 8. **.gitignore**：列出在Git版本控制中不应包含的文件和目录。 9. **LICENSE**：项目使用的开源许可协议，例如MIT、...
michelle-ha.github.io
03-30
在GitHub Pages的上下文中，这通常包括HTML、CSS、JavaScript文件，可能还有图片和其他媒体资源，以及配置文件如`_config.yml`（如果是Jekyll站点）或`package.json`（如果使用了Webpack或其他构建工具）。...
zh-ipcs-ui.rar
08-09
"zh-ipcs-ui.rar"是一个压缩包文件，很可能包含了用于构建或运行一个名为"zh-IPC-S-UI"的用户界面的相关资源和代码。虽然标签部分为空，我们可以根据文件名推测这可能是一个针对中文环境的工业过程控制系统的用户...
【鸿蒙】js文件引入json模块内容失败处理方式
m0_37873477的博客
09-09 703
如index.js引入data.json模块文件 引入代码：import data from ‘data.json’ data.json文件中需增加编译选项 “resolveJsonModule”: true 属性 data.json文件内容 { “itemCount”: 200, “resolveJsonModule”: true } }
TypeScript07：模块系统与命名空间
斜光的博客
06-09 3690
模块系统 模块化历程 CommonJS AMD UMD ESM 无论是那种模块化规范，重点关注：保证模块独立性的同时又能很好的与其它模块进行交互 如何定义一个模块与模块内部私有作用域 通过何种方式导出模块内部数据 通过何种方式导入其它外部模块数据 UMD 严格来说，UMD 并不属于一套模块规范，它主要用来处理 CommonJS、AMD、CMD 的差异兼容，是模块代码能在前面不同的模块环境下都能正常运行。随着 Node.js 的流行，前端和后端都可以基于 JavaScript 来进行开发，这个时候或多
tsconfig.json文件配置详解与常用配置
工作是水，生活是酒，水会决定酒的品质，但生活要过得像酒一样，不能像水一样没有味道
04-10 3038
在TS的项目中，TS最终都会被编译JS文件执行，TS编译器在编译TS文件的时候都会先在项目根目录的​​tsconfig.json​​​文件，根据该文件的配置进行编译，默认情况下，如果该文件没有任何配置，TS编译器会默认编译项目目录下所有的​​.ts、.tsx、.d.ts​​​文件。实际项目中，会根据自己的需求进行自定义的配置，下面就来详细了解下​​tsconfig.json​​的文件配置。
Angular中，如何获取p-fileUpload标签上传的文件， this.uploadedFile = event.files[0];获取的图片怎么存入../../../assets/photos
05-18
在Angular中，可以使用File API获取文件内容并将其存储在本地。以下是一些实现方式： 1. 通过<input type="file">元素上传文件 可以使用以下代码获取input元素中的文件： ``` onFileSelect(event) { if (event.target.files.length > 0) { const file = event.target.files[0]; this.uploadedFile = file; } } ``` 其中，this.uploadedFile是一个文件类型的实例，可以在需要时将其存储在本地。 2. 通过p-fileUpload组件上传文件 p-fileUpload组件是PrimeNG中的文件上传组件，可以使用以下代码获取上传的文件： ``` onFileSelect(event) { if (event.files.length > 0) { const file = event.files[0]; this.uploadedFile = file; } } ``` 其中，this.uploadedFile是一个文件类型的实例，可以在需要时将其存储在本地。 3. 存储文件 要将文件存储在本地，可以使用FileReader API。以下是一个示例代码，将上传的文件存储在assets/photos目录下： ``` onFileSelect(event) { if (event.target.files.length > 0) { const file = event.target.files[0]; this.uploadedFile = file; const reader = new FileReader(); reader.onload = (e) => { const base64 = reader.result as string; const byteArray = new Uint8Array(atob(base64.split(',')[1]).split('').map(char => char.charCodeAt(0))); const blob = new Blob([byteArray], { type: 'image/jpeg' }); const url = `../../../assets/photos/${file.name}`; saveAs(blob, url); }; reader.readAsDataURL(file); } } ``` 其中，使用FileReader API将文件转换为base64格式，并将其保存为Blob。然后使用FileSaver API将Blob存储在本地文件系统中。此示例中的文件名采用上传文件的原始名称。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值