首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

读取本地.json文件的Angular 5服务错误:未知编译器选项'resolveJsonModule‘和'esModuleInterop’

这个错误是由于在Angular 5中使用了未知的编译器选项'resolveJsonModule'和'esModuleInterop'导致的。这两个选项是用于处理导入和解析JSON文件的。

解决这个错误的方法是更新你的Angular版本到6或更高版本。在Angular 6中,这些编译器选项已经被添加并默认启用。

如果你仍然想在Angular 5中解决这个问题,你可以按照以下步骤进行操作:

  1. 确保你的Angular CLI版本是1.7.4或更高版本。你可以通过运行以下命令来检查版本:
  2. 确保你的Angular CLI版本是1.7.4或更高版本。你可以通过运行以下命令来检查版本:
  3. 在你的项目根目录下的tsconfig.json文件中,添加以下两个编译器选项:
  4. 在你的项目根目录下的tsconfig.json文件中,添加以下两个编译器选项:
  5. 在你的项目根目录下的tsconfig.app.json文件中,添加以下两个编译器选项:
  6. 在你的项目根目录下的tsconfig.app.json文件中,添加以下两个编译器选项:
  7. 重新启动你的Angular开发服务器,错误应该就会消失了。

这样,你就可以成功读取本地.json文件了。

在腾讯云的相关产品中,推荐使用云函数(SCF)来处理读取本地.json文件的需求。云函数是一种无服务器计算服务,可以帮助你在云端运行代码,而无需关心服务器的运维和扩展。你可以使用云函数来编写一个简单的服务,读取本地.json文件并返回数据给前端。

腾讯云函数(SCF)产品介绍链接地址:https://cloud.tencent.com/product/scf

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • create-react-app + ts 项目工程规范

    在后台请求回数据之前前台就进行数据更新,保证用户体验 使用 create-react-app 创建 TS 项目,并进行工程规范 npx create-react-app demo --template typescript npx命令功能是可以不用本地安装包而直接使用.../src", // 添加这一行,指如果不是npm包,那么绝对路径将会从项目src目录下面找 "target": "es5", "lib": [ "dom", "..._ 文件夹,并创建一个名为 db json文件。...然后执行 json-server --watch __json_server_mock__/db.json 如果你是在根目录下面新建 db.json ,那么就不要文件夹路径即可。...但是为了项目管理,创建一个文件夹,同时前面后面使用 __ 开头结束表示这是项目的辅助目录,而不是主要

    1.7K50

    TypeScript 渐进迁移指南

    export 语句 d.ts 文件视作环境(ambient)模块声明,包含 import export 语句则视为普通模块文件,而不是全局声明,所以无法用于三斜杠指令。...类型检查 如果项目中 70% 以上代码都经过以上步骤迁移后,你可以考虑开启类型检查,进一步帮助检测代码中错误问题。...渐进类型检查 // @ts-nocheck 如果你希望以后再修复一些文件类型问题,可以在文件头部加上 // @ts-nocheck,TypeScript 编译器会忽略这些文件。...由于几乎所有的类型检查错误都已修正,类型检查已经覆盖所有模块,基本上只需要把 require 改成 import 然后把代码类型定义都放到 ts 文件中。完成之前工作后,这一步相当简单。...tsconfig.json 例子: 前端项目 { "compilerOptions": { "target": "es2015", "allowJs": false, "esModuleInterop

    1.9K20

    会写 TypeScript 但你真的会 TS 编译配置吗?

    如果 tsconfig.json 文件中 files include 字段都不存在,则默认包含 tsconfig.json 文件所在目录及子目录所有文件,且排除在 exclude 字段中声明文件文件夹...TypeScript 是 JavaScript 超集,是对 JavaScript 语法类型上扩展,因此我们可以使用 ES5、ES6,甚至是最新 ESNext[4] 语法来编写 TS。...语法 TS 文件编译为符合 ES5 语法规范 *.js 文件。...4.1 Rollup + TypeScript 在 Rollup 打包中,我们一般只需要添加 @rollup/plugin-typescript[12] 插件即可,该插件会默认读取项目根目录下 tsconfig.json...同时还需要启用 esModuleInterop 功能,用于支持 ESM 模块合成默认导入,以兼容 CJS ESM 规范。

    3.6K41

    从 0 到 1 搭建一个企业级前端开发规范

    因为 tsconfig.json编译选项仅仅针对代码类型检查,而不是代码编译,因此不需要让 TypeScript 生成编译文件 以下是tsconfig.json中一些设置解释 lib: TS 需要引用库...,即声明文件,ES5 默认 dom,es5,scripthost allowJs: 允许编译 JS 文件(js,jsx) allowSyntheticDefaultImports: 允许从没有设置默认导出模块中默认导入...:使用哪种模块解析策略.参考文档 resolveJsonModule:是否可以导入 JSON 模块.参考文档 isolatedModules:每个文件必须是模块.参考文档 noEmit:不生成输出文件...jsx: 支持 JSX.参考文档 include:编译器需要编译文件或者目录 添加 ESLint 代码规范校验 ESLint 可以帮助我们找出有问题编码模式或不符合规则代码 有关 ESLint 详细讨论可以查看这篇文章...这将输出一条语义化消息未格式化文件列表。上面脚本意思是格式化src目录下所有文件 prettier:重新格式化所有已被处理过文件。类似于eslint --fix工作。

    2.9K20

    tsconfig.json 编译器配置大全

    一般来说,项目的 TS 编译器配置全部存储在项目根目录下 tsconfig.json 文件中 当编译器启动时,首先会读取 tsconfig.json,以获取有关如何编译项目的说明(例如,要编译哪些源文件...,在哪里存储输出等) 下面介绍常见 tsconfig compilerOptions 编译选项: 1、target 用于指定编译之后版本目录 "target": "es5", 2、module 用来指定要使用模板标准...用来指定是否检查报告 JS 文件错误,默认 false "checkJs": true, 6、jsx 指定 jsx 代码用于开发环境,preserve、react-native、react "...通过导入内容创建命名空间,实现 CommonJS ES 模块之间互操作性 "esModuleInterop": true, 39、preserveSymlinks 不把符号链接解析为真实路径,具体可以了解下...,这个值会被写进. map 文件里 "sourceRoot": "", 41、mapRoot 用于指定调试器找到映射文件而非生成文件位置,指定 map 文件根路径,该选项会影响. map 文件

    1.2K10

    使用TypescriptES模块发布Node模块

    类型系统编译器能够在您软件运行之前编译时捕获各种bug,并且附加代码编辑器功能使它成为一个非常适合开发人员高效环境。...tsc 是“ TypeScript编译器缩写,是TypeScript命令行工具。 为确保你运行我们刚刚在本地安装TypeScript编译器,应在命令前加上 npx。...您会看到该文件具有数百个选项,其中大多数选项已被注释掉(TypeScript支持 tsconfig.json 文件注释)。...配置tsconfig.json 选项 如果您正在寻找所有可能 tsconfig 选项完整列表,可以在TypeScript网站上找到此方便参考。...要编译TypeScript,我们将运行 tsc 并使用 -p 标志(“project”缩写)告诉它 tsconfig.json 位置: npx tsc -p tsconfig.json 如果你有任何类型错误或配置问题

    2.6K20

    移除 View Engine 转用 Ivy,盘点Angular 12重要更新

    默认情况下,CLI 将启用严格模式以捕捉开发早期各种错误。 Webpack 5 模块捆绑器现已实现生产就绪。 不再支持 IE11 浏览器。 对于编译器,新版本提供转换组件样式资源支持能力。...对于语言服务,新版本仅在模板中提供 Angular 属性补全功能。 对于 compiler-cli,新版本为请求提供 context 选项以保障属性数据类型安全。...新版本向 localize-extract 中添加一种新格式,名为 legacy-migrate。此格式可用于生成 JSON 文件,进而将旧版消息 ID 映射为规范 ID。...向 Angular 语言服务添加一项功能,允许用户直接访问使用模板文件组件实际位置。...新增诊断提示将建议您开启 strictTemplates,借此在语言服务中获得检索编译器选项诊断程序方法。

    4.4K10

    typeScript 配置文件该怎么写?

    如果命令行指定了配置选项或者指定了配置文件路径,那么直接会读取。...否则抛出错误 根据 tsconfig json schema 校验是否格式正确。 否则,会从当前目录查找 tsconfig.json 文件, 如果找不到则逐层向上搜索父目录。...否则抛出错误 如果找到了则会去根据 tsconfig json schema 校验是否格式正确。...target 即输出 JavaScript 对标的 ECMA 规范。比如 “target”: “es6” 就是将 es6 + 语法转换为 ES6 代码。其选项有 ES3,ES5,ES6 等。...tsconfig 中最重要恐怕就是编译器选项(compilerOptions)了。如果你按照功能去记忆则会比较简单, 比如文件相关有哪些, 严格检查有哪些,声明文件有哪些等等。

    2K20

    TypeScript

    tsconfig 文件配置选项介绍 compilerOptions编译选项 target用于指定编译之后版本目录 “target”: “es5”, module用来指定要使用模板标准 “module...”: true, checkJs用来指定是否检查报告JS文件错误,默认false “checkJs”: true, 指定jsx代码用于开发环境:’preserve’,’react-native’...模块之间互操作性 “esModuleInterop”: true, 不把符号链接解析为真实路径,具体可以了解下webpacknode.jssymlink相关知识 “preserveSymlinks...,指定map文件根路径,该选项会影响.map文件sources属性 “mapRoot”: “”, inlineSourceMap指定是否将map文件内容js文件编译在一个同一个js文件中,如果设为.../build/webpack.config.js" }, 写代码测试一下,启动本地服务器执行,安装完毕后 npm start 打包执行 npm run build 之后就多了个dist目录

    1.4K20

    【One by one系列】一步步学习TypeScript

    ,---这个文件就是类型定义文件 8.tsconfig.json 8.1.概述 tsconfig.json文件存在目录,即为TypeScript项目的根目录 tsconfig.json文件中指定了用来编译项目的根文件编译参数选项...8.2.编译规则 使用tsconfig.json 不带任何输入文件,tsc,编译器会从当前目录开始去查找tsconfig.json文件,逐级向上搜索父目录。.../built/local/tsc.js",//将输出文件合并为一个文件。合并顺序是根据传入编译器文件顺序 /// import文件顺序决定。...在这里查看完整编译器选项列表。 "files"指定一个包含相对或绝对文件路径列表。"include""exclude"属性指定一个文件glob匹配模式列表。...tsconfig.json文件可以是个空文件,那么所有默认文件都会以默认配置选项编译。

    61220

    搭建node服务(三):使用TypeScript

    当使用tsc命令进行编译时,如果未指定ts文件编译器会从当前目录开始去查找tsconfig.json文件,并根据tsconfig.json配置进行编译。...常用配置 compilerOptions 属性用于配置编译选项,与tsc命令选项一致,常用配置如下所示: {   "compilerOptions": {     // 指定编译为ECMAScript...由于本示例TypeScript是用于服务,不需要使用DOMScriptHost,所以lib设为["ES6"]。...但是当执行 npm run dev 时,会提示编译错误,那是因为ts-node默认不会根据配置中files、include exclude 加载所有ts文件,而是从入口文件开始根据引用依赖加载文件...最简单解决办法就是在 ts-node 命令后增加 --files 参数,表示按配置files、include exclude加载ts文件,如下: package.json {   "scripts

    2.2K30

    TS 进阶 - 实际应用 04

    baseUrl rootDir rootDirs types 与 typeRoots moduleResolution moduleSuffixes noResolve paths resolveJsonModule...UI 部分、Hooks 部分以及主应用等等 Monorepo 非常相似,但它并不需要各个子项目拥有自己独立 package.json、独立安装依赖、独立构建等 可以使用完全独立 TSConfig...# 编译器相关 incremental watch 相关 编译器检查 # 其他工程相关 extends # Prisma + NestJS 实战 # Heroku 环境配置 # NestJS 新建项目...文件来实现对业务逻辑模块拆分,如 user.module.ts、upload.module.ts 等 在这个文件中会定义属于该模块 Controller Service,其他模块可以通过导入该模块来使用其内部...NodeJs 中 ORM 目前基本都是通过 js / ts 文件进行定义,比如 Sequelize、TypeORM 等,均是通过面向对象方式进行数据库实体定义。

    79910

    「译」面向 JavaScript 开发人员 TSConfig 简介

    为了采用 TypeScript,并根据你特定项目需求进行定制工具,你将需要配置 TypeScript 编译器。这可以通过使用名为 tsconfig.json 文件来完成。...tsconfig.json 文件只是一个具有定义编译器选项项目设置属性 JSON 对象。...outDir - 指定编译后 JavaScript 文件输出目录。通常设置为 dist 为编译文件创建 dist 目录。strict - 启用严格类型检查选项以帮助捕获错误代码。...在使用 ESM CJS 模块 TypeScript 项目中工作时,将 esModuleInterop 设置为 true 确保 TypeScript 以一种方式处理导入导出。...Override Options 选项覆盖 - 你可以使用 TypeScript 源文件注释指令为单个文件文件集覆盖特定编译器选项

    10510
    领券