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

Angular 8应用程序正在加载type=“模块”脚本,而不是IE11上的es5

Angular 8应用程序正在加载type="模块"脚本,而不是IE11上的es5。这意味着该应用程序使用了ES6模块语法,而IE11不支持ES6模块。为了在IE11上正确加载Angular 8应用程序,需要进行一些配置和修改。

首先,需要在Angular项目的tsconfig.json文件中进行配置。找到"compilerOptions"部分,并确保以下选项被设置为true:

代码语言:txt
复制
"compilerOptions": {
  "target": "es5",
  "module": "es2015",
  "moduleResolution": "node",
  "esModuleInterop": true,
  "allowSyntheticDefaultImports": true,
  "lib": ["es2018", "dom"]
}

这些选项将确保Angular应用程序以ES5的目标版本进行编译,并使用ES2015模块语法。

接下来,需要安装并配置polyfills。在Angular项目的src/polyfills.ts文件中,取消注释以下代码行:

代码语言:txt
复制
// import 'core-js/es6/reflect';
// import 'core-js/es7/reflect';

这将导入所需的polyfills,以确保在IE11上正确加载应用程序。

此外,还需要在Angular项目的src/main.ts文件中进行一些修改。找到以下代码行:

代码语言:txt
复制
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

将其替换为:

代码语言:txt
复制
platformBrowserDynamic().bootstrapModule(AppModule)
  .then(() => {
    if ((window as any).appBootstrap) {
      (window as any).appBootstrap();
    }
  })
  .catch(err => console.error(err));

这将确保在应用程序启动完成后,调用一个名为appBootstrap的全局函数。这是为了解决IE11中的一些兼容性问题。

最后,如果你使用了一些第三方库或插件,需要确保它们也支持IE11。可以查阅它们的文档或官方网站,了解它们的兼容性情况。

总结起来,要在IE11上正确加载Angular 8应用程序,需要进行以下步骤:

  1. 在tsconfig.json中配置compilerOptions,将target设置为"es5",module设置为"es2015"。
  2. 在polyfills.ts中取消注释所需的polyfills。
  3. 在main.ts中修改启动代码,调用appBootstrap函数。
  4. 确保第三方库或插件也支持IE11。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云官网:https://cloud.tencent.com/
  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 云原生应用引擎(TKE):https://cloud.tencent.com/product/tke
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 人工智能平台(AI Lab):https://cloud.tencent.com/product/ailab
  • 物联网开发平台(IoT Explorer):https://cloud.tencent.com/product/iothub
  • 移动推送服务(信鸽):https://cloud.tencent.com/product/tpns
  • 区块链服务(TBC):https://cloud.tencent.com/product/tbc
  • 腾讯云元宇宙:https://cloud.tencent.com/solution/virtual-universe
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

从 JavaScript、ES6、ES7 到 ES10,你学到哪儿了?

本质,这些功能经历了从 0 到 4 阶段,0 是最早阶段, 4 是“准备发布”。 ?...如果 ES6 是 ES2015, ES7 是 ES2016,你能猜出 ES5 属于哪一年吗? …你输了!(除非你真的知道,但因为我听不到你声音,所以我假设你错了)。ES5 是 ES2009!...可取消 Promise 不言喻,我敢肯定,这并不是唯一缺少功能。这个想法允许开发人员随时取消任何 Promise 执行。...await 脚本标签,这不一定有意义,并且限制了 ES6 模块在浏览器中无缝运行。...为什么要添加诸如 let 之类新关键字不是进行更新? 你可能想知道为什么 JS 引入 let 不是改进现有的 var关键字。答案很简单:这样做是为了保持向后兼容性。你不想破坏 web,对吧?

1.5K20

Angular 13 发布:全面弃用 View Engine

结束对 IE11 支持 结束 IE11 支持后: Angular 可以通过原生 Web API 使用更现代浏览器功能; 可以删除 IE 特定 polyfills 和代码路径使得应用程序更小,...加载速度更快; 移除差异加载需要; 运行 ng update 将自动删除这些特定于 IE polyfills 并在项目迁移期间减少包大小。...需要注意是,现有项目仍需支持 IE11 用户开发者可继续使用 Angular 12,Angular 12 版本将一直维护到 2022 年 11 月 。...AngularJS 是用 JavaScript 编写, Angular 采用 TypeScript 语言编写,是 ECMAScript 6 超集。...但是从学习角度说,Angular 学习曲线最为陡峭,开发者需熟悉 TypeScript 才能开展工作,对于新手而言并不是最佳选择,更适合在团队中发挥作用。

2.7K20

2020前端性能优化清单(三)

定义针对旧版浏览器基本核心体验(即完全可访问核心内容),针对功能强大浏览器增强体验(即丰富完整体验)和额外体验(不是绝对必需并且可以延迟加载资源,例如网络字体、不必要样式、轮播脚本、视频播放器...正如 Philip Walton 所写那样,“该技术使用打包和编译工具来生成两个版本代码,一个版本使用现代语法(通过 加载),另一个使用 ES5 语法...现代浏览器会将脚本解释为 JavaScript 模块并按预期运行,旧版浏览器则无法识别该属性并忽略该属性,因为该属性是未知 HTML 语法。.../web/fundamentals/primers/modules "script type="module"") 加载文件,较老浏览器可以使用 script nomodu 加载旧版本文件。...pic Jake Archibald 发布了一篇详细文章,介绍关于 ES 模块注意实现和陷阱[57],例如,内联模块脚本推迟到阻塞外部脚本和内联脚本执行之后执行。

2.1K20

2020前端性能优化清单(三)

定义针对旧版浏览器基本核心体验(即完全可访问核心内容),针对功能强大浏览器增强体验(即丰富完整体验)和额外体验(不是绝对必需并且可以延迟加载资源,例如网络字体、不必要样式、轮播脚本、视频播放器...正如 Philip Walton 所写那样,“该技术使用打包和编译工具来生成两个版本代码,一个版本使用现代语法(通过 加载),另一个使用 ES5 语法...现代浏览器会将脚本解释为 JavaScript 模块并按预期运行,旧版浏览器则无法识别该属性并忽略该属性,因为该属性是未知 HTML 语法。.../web/fundamentals/primers/modules "script type="module"") 加载文件,较老浏览器可以使用 script nomodu 加载旧版本文件。...pic Jake Archibald 发布了一篇详细文章,介绍关于 ES 模块注意实现和陷阱[57],例如,内联模块脚本推迟到阻塞外部脚本和内联脚本执行之后执行。

2K10

前沿 | 2017年前端开发工具趋势

然而,只有 29% 开发人员使用它感到舒适,18% 受访者认为它是必要。只有0.1%网站被发现正在使用React,但请记住,调查结果是从前端开发人员收集不是所有的Web开发人员。...● 有 25% 项目使用 Angular 1,虽然只有8%的人认为它是不可替代。Angular 2则相对受冷落,只比8%多一点。只有3%的人在多数项目中使用它。...任务执行器和模块打包工具 Gulp是最大赢家,接近 44% 开发人员在使用。然而,更简单 npm scripts 脚本在2016年增加了 23% ,达到 26% 。...也许因为每个开发人员都在使用JavaScript 转译器… ES6到ES5转译器 (transpilers) 62% 开发人员正在使用诸如 Babel 之类工具,将简洁 ES6 代码转换为旧版浏览器支持...如果你确实需要支持 IE11 及以下版本,编写 ES5 代码不是更容易吗?

51510

2017年前端开发工具趋势

然而,只有 29% 开发人员使用它感到舒适,18% 受访者认为它是必要。只有0.1%网站被发现正在使用React,但请记住,调查结果是从前端开发人员收集不是所有的Web开发人员。...有 25% 项目使用 Angular 1,虽然只有8%的人认为它是不可替代。Angular 2则相对受冷落,只比8%多一点。只有3%的人在多数项目中使用它。...任务执行器和模块打包工具 Gulp是最大赢家,接近 44% 开发人员在使用。然而,更简单 npm scripts 脚本在2016年增加了 23% ,达到 26% 。...也许因为每个开发人员都在使用JavaScript 转译器… ES6到ES5转译器 (transpilers) 62% 开发人员正在使用诸如 Babel 之类工具,将简洁 ES6 代码转换为旧版浏览器支持...如果你确实需要支持 IE11 及以下版本,编写 ES5 代码不是更容易吗?

78670

Angular Package Format (APF) v12.0 介绍

辅助入口点导入模块 ID 将模块加载器定向到辅助入口点名称目录。 例如,“@angular/core/testing”解析为一个同名目录,“@angular/core/testing”。...该目录包含一个 package.json 文件,该文件将加载器定向到它正在寻找正确位置。 这允许我们在单个包中创建多个入口点。...模块格式仅表示单个模块封装,不表示用于构成模块内容 JavaScript 语言特性。...因此,Angular 团队经常使用语言级别说明符作为模块格式后缀,例如 ESM+ES5 指定模块采用 ESM 格式并包含下级到 ES5 代码。...@angular/core 包中存在两个入口点,但它们导出不同符号。 一个包可以有许多入口点。 deep import: 从不是入口点模块中检索符号过程。

3.1K10

2017年前端开发工具趋势

然而,只有 29% 开发人员使用它感到舒适,18% 受访者认为它是必要。只有0.1%网站被发现正在使用React,但请记住,调查结果是从前端开发人员收集不是所有的Web开发人员。...有 25% 项目使用 Angular 1,虽然只有8%的人认为它是不可替代。Angular 2则相对受冷落,只比8%多一点。只有3%的人在多数项目中使用它。...任务执行器和模块打包工具 Gulp是最大赢家,接近 44% 开发人员在使用。然而,更简单 npm scripts 脚本在2016年增加了 23% ,达到 26% 。...也许因为每个开发人员都在使用JavaScript 转译器… ES6到ES5转译器 (transpilers) 62% 开发人员正在使用诸如 Babel 之类工具,将简洁 ES6 代码转换为旧版浏览器支持...如果你确实需要支持 IE11 及以下版本,编写 ES5 代码不是更容易吗?

1.1K60

Angular8稳定版修改概述

“src =”main.js“> nomodule属性是一个布尔属性,用于阻止脚本在支持模块脚本用户代理中执行。...Bazel将提供以下优势: 更快构建时间(对于第一次构建需要时间,但并发构建将更快),Angular已经在使用它,现在CI在7.5分钟内完成,不是在Bazel之前60分钟。...增量构建:您将能够仅构建和部署已更改内容不是整个应用程序。 您可以弹出Bazel文件,默认情况下它们是隐藏。...懒加载变动 新版本不推荐使用loadChildren:string 懒惰加载模块语法。 在8.0.0之前,懒加载使用方法如下: loadChildren: '....包还是跟以前保持一样。 结论 以上就是angular 8版本一些改动。总体来说变化不是很大,延续了angular每年一个稳定版习惯。 原文链接

4.5K20

Angular2 VS Angular4 深度对比:特性、性能

GoogleAngular团队已于3月23日发布了Angular4,期待已久Angular2版本则是之前版本完全重构。...这个Angular版本更加注重于开发移动应用程序,开发人员可以使用它创建跨平台应用程序,在解决了移动应用程序(功能,加载时间等)挑战后,Angular2可以更容易处理桌面组件。...在这些浏览器构建应用,意味着可以更容易使用Angular进行开发和优化,从而允许开发人员更专注于公司业务实现代码。...但是,AtScript不是强制性,开发人员仍然可以选择只使用纯JavaScript / ES5代码来构建Angular应用程序。...由于代码依赖于ES6模块,因此模块加载程序将通过在部分组件引用它们,来加载依赖关系。

8.7K20

一个Angular 5教程:一步一步指导实现你第一个Angular 5应用程序

两者都是不可变,但第二个是基于第一个,所以State我们创建一个新State对象,不是在我们变异值。...现在它正在工作。有点。请记住,我们正好将Firebase集成到我们应用程序中。现在它由于高度可维护Ngrx商店丢失了。也就是说,它存储在任何地方。...随着我们应用程序增长,我们可能会开始考虑优化。例如,如果我们想要将关于组件加载为默认组件,并且只在用户通过单击卡片链接隐式请求后才加载附加组件,该怎么办。为此,我们可以使用延迟加载模块。...这就是我们如何告诉我们组件,我们正在扩展我们配置,不是从头开始创建它。...模块将声明范围分开。这使我们可以为我们应用程序构建多个独立模块,并为模块使用延迟加载模块目的是声明本模块中使用所有内容,并允许Angular对其进行提前编译。 是基于角度MVC

42.3K10

AngularJS基础入门初探

,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。...首先,最大好处是用户体验,对于内容改动不需要加载整个页面。这样做好处颇多,因为数据层和UI分离,可以重新编写一个原生移动设备应用程序不用(对原有数据服务部分)大动干戈。...:使用CDNangular.js(http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js)   这里我们使用方式三,CDN方式。...(2)网页加载完成后,angular.js这个脚本就会自动执行,执行过程主要是去界面上找到ng-app指令。   ...(function (window) { // 01.注册一个应用程序模块(module方法如果之传入一个参数就不是创建一个新模块) window.angular.module("

1.8K30

那些与 IE 相伴日子

ECMAScript 新语法我一个用不了 大家用最多就是ES5语法了吧,或者说在大多数人概念里,ES5应该是很低级语法了,然而不争气 IE 连对ES5兼容性也不是那么完美 那么能怎么办呢...所以我们也不得不为了兼容大部分浏览器做各种"退化"操作,比如出了ES6语法,而我们却用ES5语法去实现一遍ES6语法(偷偷问一句,很多面试题是不是就这么来?)...现在最最最常用Flex布局,IE9及以下都不支持,及时IE10、IE11兼容程度也不是很理想。 那么怎么办? 当然是回归原始了,定位、浮动梭哈!...--[if lte IE 8 ]> <link rel="stylesheet" type="text/css" media="all" href="....希望市场上浏览器能尽可能得统一,能按照同一套规范来实现功能,这样能促使浏览器语言快速发展与展现,所有的注意力能放在业务、功能上,不是兼容这个兼容那个!

41520

前端面试题库系列(4)

async 脚本不能保证加载顺序 加载 es6模块时候设置 type=module,异步加载不会造成阻塞浏览器,页面渲染完再执行,可以同时加上async属性,异步执行脚本(利用顶层this等于undefined...ES6模块与CommonJS模块差异 CommonJs 模块输出是一个值拷贝,ES6模块输出是一个值引用 CommonJS 模块是运行时加载,ES6模块是编译时输出接口 ES6输入模块变量...标签会停下来,等到执行完脚本,继续向下渲染 defer 是“渲染完再执行”,async 是“下载完就执行”,defer 如果有多个脚本,会按照在页面中出现顺序加载,多个async 脚本不能保证加载顺序...加载 es6模块时候设置 type=module,异步加载不会造成阻塞浏览器,页面渲染完再执行,可以同时加上async属性,异步执行脚本(利用顶层this等于undefined这个语法点,可以侦测当前代码是否在...9、vue双向绑定原理及响应式原理 10、vue有几个生命周期,分别是什么,每个生命周期能干什么 11、vue中data为什么要return一个对象,不是直接一个对象 12、computed和function

1.3K10

12条专业JavaScript规则

具体方法如下:把JSON注入到你应用程序头部,并根据业务逻辑需要利用这些数据。你可能会想:“嘿,这违背了规则 #1”。...我把 JSON 看作是数据,不是代码,所以我破例,为了支持静态、单独JavaScript文件。 StackOverflow 使用这种模式,Google 也是。你可以看下他们代码: ?...位于 中脚本必须在页面显示前加载,因此把 放在底部 前面可以先显示页面,不用等 JS 文件下载完毕。这有助于提升感知性能。...如果你JavaSctipe必须位于 中,可以考虑使用 jQuery $(document).ready 这样你脚本可以等到 DOM 加载完毕后再执行。...想要更多更全功能?试试 Angular, Ember,,或者 React with Flux。 关键是: 不要试图从头开始。站在巨人肩膀

98290

现代脚本加载

-- 支持模块script浏览器会加载这个文件 --> <!...(s) 现在把它们封装成函数,并确保两种方式都统一使用异步方式加载(上文提到模块script是异步传统script不是): $loadjs("/modern.js","...-- etc --> 其实预加载这种技术是否有效,取决于嵌入你脚本HTML文档大小。.../nomodule模式需要发送多个软件包问题,尽管这种方法仍然会降低页面(这时候指HTML,不是Javascript包)可缓存性,但是它可以有效地触发预加载,因为生成HTML服务器根据用户代理知道应该使用...对于某些应用程序来说,接受这一点妥协是完全合理:你可以给90%浏览器中提供现代代码,让他们获得更好体验,极少数旧浏览器不得不抛弃它们,它们只是付出额外带宽(即双重加载),并不影响功能。

82920

如何在生产环境中部署ES2015+

大部分开发者认为 是用来加载 ES 模块(事实的确如此),但是 也拥有更直接且实用功能——加载浏览器可以处理...因此,唯一需要做就是为不支持  浏览器提供一个降级方案。幸运是,如果你正在开发一个 ES5 版本代码,你其实已经完成了该工作。...换言之,这样操作之后就会输出 ES2015+ 语法代码,不是 ES5 代码。 例如,假设你使用了 webpack 并且 JS 入口文件是 ....(main-legacy.js) 389ms, 351ms, 360ms 367ms 虽然这些文件大小和解析、执行代码时间不是特别长,但要意识到这仅仅是一篇博客,我没有加载很多 script 脚本。...但对于大多数网站来说,情况就不是如此乐观了。加载 script 脚本越多,你使用 ES2015+ 进行转换所获得优化就愈加明显。

61930
领券