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

Angular 9与Typescript 3.8.3是否默认支持IE中的可选链接,而不需要polyfill (core-js)更改?

Angular 9与Typescript 3.8.3默认不支持IE中的可选链接,需要使用polyfill (core-js)进行更改。

可选链接是ES2020中的新特性,它允许我们在访问对象属性或调用函数时,对可能为undefined或null的值进行安全的访问。然而,这个特性在旧版本的浏览器中不被支持,包括IE。

为了在Angular 9中使用可选链接,我们需要使用polyfill来填充浏览器不支持的功能。polyfill是一个JavaScript库,它提供了对新特性的模拟实现,以便在旧版本的浏览器中使用。

在Angular项目中,默认情况下,polyfill (core-js)已经包含在polyfills.ts文件中。这个文件位于src文件夹下,它会在应用程序启动时自动加载。

要在Angular 9中启用可选链接的支持,我们需要确保polyfills.ts文件中包含以下代码:

代码语言:txt
复制
import 'core-js/features/optional-chaining';

这将导入core-js库中的可选链接polyfill。然后,Angular应用程序将能够在IE中使用可选链接。

需要注意的是,polyfill会增加应用程序的文件大小和加载时间。因此,如果你的应用程序不需要支持旧版本的浏览器,可以考虑移除polyfill,以减小应用程序的体积。

总结起来,Angular 9与Typescript 3.8.3默认不支持IE中的可选链接,需要使用polyfill (core-js)进行更改。在Angular项目中,可以通过在polyfills.ts文件中导入可选链接polyfill来启用支持。

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

相关·内容

Ionic4兼容IE浏览器处理

在一般场合,Ionic4运行在手机端,没必要去兼容IE,但还是可以了解一下,以免有这样的需求。 Ionic4,它更趋向于一个UI框架,然后可配套Angular、React、Vue等框架使用。...以Angular版本为例,兼容IE浏览器,主要是JS+CSS的语法和用法的调整处理。 1. JS,可以使用内置的Polyfill方案。...Angular项目默认提供了Polyfill支持,打开Ionic4项目中的src目录,里面有自动生成的polyfill.ts文件,打开可以看到这样的内容: /**********************...,默认上面的import都是注释掉的,这里要兼容IE,自然把它们打开,我觉得注释说明得很清楚,跟着做就好了。...系统内置样式基本是做了兼容处理的,而自定义样式放在全局和局部都会存在不一样的兼容效果,可以做下兼容性调整,如: --background: transparent; background-color

1.5K20

从零学脚手架(四)---babel

而开发人员基本上使用的都是新版浏览器,所以需要具有一个不支持ES6API(类型、函数)的浏览器。 一般ES6的新特性,都已经不再支持IE浏览器了。所以IE浏览器是一个天然的测试对象。...在package.json文件中添加browserslist属性,设置打包代码支持IE9浏览器。 "browserslist": [ "ie 9" ] ?...例如ie 9,便是支持IE9浏览器。 还可以设置范围版本,例如大于Chrome75版本。...此属性可以设置任何受支持的core-js 参数类型为 String 默认值为:2.0 proposals:是否加载core-js支持的 提议API 参数类型为:Boolean 默认值为:false...IE8,默认不支持 ie8: false, compress: { // 是否使用默认配置项,这个属性当只启用指定某些选项时可以设置为

1.3K30
  • 入门babel,我们需要了解些什么

    示例如下: "targets": { "browsers": ["> 1%", "last 2 versions", "not ie 9"] } loose 可以直译为“松散模式”,默认为false...modules 可选值有:"amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false,默认是auto 该配置将决定是否把ES6模块语法转换为其他模块类型...useBuiltIns 可选值有:"entry" | "usage" | false,默认是false 该配置将决定@babel/preset-env如何去处理polyfill "entry" 如果useBuiltIns...@babel/runtime处理的是语法支持,把新的语法糖转为目标环境支持的语法;而useBuiltIns: 'usage'处理的是垫片polyfill,为旧的环境提供新的全局对象,如Promise等,...自己翻来覆去也看过好几遍babel的文档了,一直觉得收获不大,也没理解到什么东西,在与webpack配合使用的过程中,还是有很多疑惑没搞懂的。其实错在自己不该在复杂的项目中直接去实践。

    72620

    语法降级与Polyfill:消灭低版本浏览器兼容问题

    不过,我们今天要讲的是官方的 Vite 插件@vitejs/plugin-legacy,以及如何将这些底层的工具链接入到 Vite 中,并实现开箱即用的解决方案。...某些低版本浏览器并没有提供 Promise 语法环境以及对象和数组的各种 API,甚至不支持箭头函数语法,代码直接报错,从而导致线上白屏事故的发生,尤其是在IE 11、iOS 9以及Android 4.4...import "core-js/modules/es6.set.js" 由于这些工具只是编译阶段用到,运行时并不需要,我们需要将其放入package.json中的devDependencies中。...而运行时基础库是根据 ESMAScript官方语言规范提供各种Polyfill实现代码,主要包括core-js和regenerator-runtime两个基础库,不过在 babel 中也会有一些上层的封装...四、小结 本节主要讲解了 Vite 中语法降级与 Polyfill 相关的内容,涉及的概念比较多,篇幅也比较长,你需要重点掌握以下内容: @babel/preset-env 的使用。

    3.8K51

    webpack 学习笔记系列03-babel

    @babel/preset-env 3.1 polyfill / runtime babel 只负责语法的转换,如 es6 转 es5,但部分对象、方法实际在浏览器中是不支持的,所以需要借助 polyfill...,让代码更有针对性地输出兼容性代码(包括 CSS前缀、JS 的 Polyfill 等),而不是无脑地全部兼容。...此外,支持设置环境变量,设置 BROWSERSLIST_ENV 或 NODE_ENV 可以配置不同的环境变量,默认会优先加载 production 配置项。...5. babel polyfill 的最佳实践 babel 在每个需要转换的代码前面都会插入一些 helpers 代码,而不是通过 import 的方式,可能会导致重复。...模块使用 es modules ,不使用 commonJS 规范 "useBuiltIns": "usage" // 默认 false, 可选 entry, usage

    1.7K210

    vue cli 3 升级到 vue cli 4 方法步骤及升级点总结「建议收藏」

    的版本升级到了 ^3.x.x 于是安装一下 npm i core-js 然后重启项目还是不行,看了下官方文档和 babel 有关 main.js 代码中 import '@babel/polyfill'...隐藏这个代码 重启好了 然后把 @babel/polyfill 换成 babel-polyfill 即可 npm i babel-polyfill main.js 代码中 改为 import 'babel-polyfill...13.默认目录结构已更改 src/store.js 改为 src/store/index.js src/router.js 改为 src/router/index.js 14.由于兼容性原因,仍支持...15.api.hasPlugin('vue-router')不再受支持,现在 api.hasPlugin('router') 16.lintOnSave 选项的默认值(未指定时)从 true 更改为...@vue/cli-plugin-typescript 更好的ts(x)支持 ,胜过js(x) 参考链接 vue cli 4 官方英文升级文档 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人

    3.8K30

    Polyfill 和 Shim

    (4 / 3); // falseCopy to clipboardErrorCopied 你在 Chrome 开发者工具的 console 中运行,没问题,但在 IE 上却报错了:对象不支持 “isInteger...isInteger的 Chrome 浏览器上,还是用的原生接口,而在不支持的 IE 浏览器上就会调用我们写的函数。...没啥区别,都能解决兼容性问题,但在架构思想上差别很大:Polyfill 并没有封装自己的 API,只是实现了标准的 API,开发人员不需要知道新的东西,正常用标准的 Number.isInteger...有人也从两个单词的"软/硬"含义理解:Polyfill 填充你感受不到它的存在,而 Shim 填充则能明显地感知到。 使用场景 前面的例子是偏向解决 IE 兼容问题。...常用的 Polyfill 库: core-js: 最新 JavaScript 标准库的 Polyfill import "core-js/features/promise"; // 按需引入 core-js

    1K30

    Polyfill 和 Shim

    (4 / 3); // false 你在 Chrome 开发者工具的 console 中运行,没问题,但在 IE 上却报错了:对象不支持“isInteger”属性或方法,这是因为 IE 并不支持这一特性...isInteger的 Chrome 浏览器上,还是用的原生接口,而在不支持的 IE 浏览器上就会调用我们写的函数。...没啥区别,都能解决兼容性问题,但在架构思想上差别很大:Polyfill 并没有封装自己的 API,只是实现了标准的 API,开发人员不需要知道新的东西,正常用标准的 Number.isInteger...有人也从两个单词的"软/硬"含义理解:Polyfill 填充你感受不到它的存在,而 Shim 填充则能明显地感知到。 使用场景​ 前面的例子是偏向解决 IE 兼容问题。...常用的 Polyfill 库: core-js: 最新 JavaScript 标准库的 Polyfill import "core-js/features/promise"; // 按需引入 core-js

    15730

    ES5 在 Web 上的现状

    如果查看下面的数据,了解今天流行的网站实际上是如何转译和部署他们的代码到生产环境,你会发现大多数网站在互联网上发布的代码是转译为 ES5 的,但仍然无法在 IE 11 中工作——这意味着转译器和 polyfill...然而,在实际操作中,大多数开发者只是使用默认配置,因此默认配置非常重要。 那么这些默认配置是什么?具体来说,这些默认配置是否会将代码转译为 ES5?...TypeScript (tsc) 是 TypeScript 的默认target选项是 ES5。...而 TypeScript(tsc),作为仅次于 Babel 的第二大转译工具,只会转译项目自己的代码文件。它不会转译node_modules中的项目依赖项。...而如果浏览器确实支持 ES6+语法,那么它不需要任何 ES5 助手代码或任何旧版 polyfills。绝对没有理由同时包含两者。

    13210

    Vue项目兼容IE11

    Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但对于 IE9+,Vue 底层是支持。...由于开发过程中,我们经常会使用一些第三方插件或组件,对于这些组件,有时我们需要做一些处理。下述主要阐述如何使用 vue-cli3 脚手架搭建的工程支持 IE11。....browserslistrc > 1% last 2 versions not ie < 11 Polyfill 默认的 Vue CLI 项目会使用 @vue/babel-preset-app,它通过...Vue CLI 文档 中,提供了三种方式: 如果该依赖基于一个目标环境不支持的 ES 版本撰写: 将其添加到 vue.config.js 中的 transpileDependencies 选项。...而不是在源代码中直接导入它们,因为如果这里列出的 polyfill 在 browserslist 的目标中不需要,则它会被自动排除。

    7.1K41

    ES6 + Babel + React低版本浏览器采坑记录

    对象不支持 xxx 属性或方法 这种情况一般是使用了es6,es7的高级语法,解决方案有很多种: 局部引入额外的库import assign from 'object-assign' 全局引入polyfill...)继承会存在问题 对一些不支持__proto__(IE 的浏览器,不会被正确继承 第一个问题简单,可以使用babel-plugin-transform-builtin-extend解决。...来解决(请查看下面参考链接中的从babel编译es6类继承的一个坑说起) 或者使用babel提供的loose模式,编译结果如下: // ... // 省略 // ... var App = function...而es6的模块体系中,大家都喜欢使用export default xxx来输出模块的默认值,这就尴尬了...babel编译后的代码在IE8上会直接报错,运行不了: // import util from...而IMUI作为一个UI组件库供别人使用,正需要使用这个插件,避免污染全局的polyfill。

    1.3K20

    最详细、最全面的 Babel 小抄

    但是作为一名戴着红领巾,头上印着小红花的男人,绝不气馁!看到错误的代码位置,能识别到 IE 连解构赋值都不支持。...回答上面的问题之前,突然想到一件事,之前在公司 review 代码时,看到很多童鞋为了使用 TypeScript 而被 TypeScript 支配(比如 AnyScript 的叫法由来)。...Babel 也一样,Babel6 到 Babel7 的升级[9]: 废弃了 stage-x 和 es20xx 的 preset,改成 preset-env 和 plugin-proposal-xx;这样能更好地控制需要支持的特性...继续实操,我们把开头那个 改成不需要支持 ie11 试试看: { "presets": [ [ "@babel/preset-env", { "targets...对于不支持的特性都引入了特定的 core-js 垫片。这怎么做到的呢?这还是归功于 AST,它可以结合代码的实际情况,进行超级细的按需引用。

    78010

    ES6 + Babel + React低版本浏览器采坑记录

    对象不支持 xxx 属性或方法 这种情况一般是使用了es6,es7的高级语法,解决方案有很多种: 局部引入额外的库import assign from 'object-assign' 全局引入polyfill...)继承会存在问题 对一些不支持__proto__(IE 的浏览器,不会被正确继承 第一个问题简单,可以使用babel-plugin-transform-builtin-extend解决。...来解决(请查看下面参考链接中的从babel编译es6类继承的一个坑说起) 或者使用babel提供的loose模式,编译结果如下: // ... // 省略 // ... var App = function...而es6的模块体系中,大家都喜欢使用export default xxx来输出模块的默认值,这就尴尬了...babel编译后的代码在IE8上会直接报错,运行不了: // import util from...而IMUI作为一个UI组件库供别人使用,正需要使用这个插件,避免污染全局的polyfill。

    1.8K90

    一个新的JS语法是如何诞生的?

    各种框架(比如Nest.js、Angular)早就用的飞起,ts不也早就支持了么?...而ts本次更新支持的是2022年3月新的Decorator规范。 这背后更本质的原因,涉及到新的JS语法诞生的过程。今天,我们就以Decorators为例聊聊一个新的JS语法是如何诞生的。...到了该阶段,提案基本已经定型,仅根据外部反馈针对关键问题进行更改。 ts在最新的v5.0 beta版本中默认支持的Decorator就是阶段3。...还是以Decorator举例,这个特性在oop框架(比如Angular、Mobx)中是很重要的特性。Angular团队在实现Angular2时,最初考虑用AtScript实现。...而最终Angular用ts实现,其中很重要的一个原因是 —— ts团队承诺实现一些AtScript特性,尤其是Decorator。

    67120
    领券