angular/aio/src/index.html
George Kalpakas 8c939dcb40 fix(docs-infra): fix angular.io on browsers that support Custom Elements but not ES2015 (#41183)
Before #41162, angular.io was broken on IE 11 due to missing a polyfill
for an API (`Reflect.construct()`) needed by the Custom Elements ES5
shim. #41162 tried to fix this by loading the necessary polyfill
(`es.reflect.construct.js`) on browsers that do not support ES2015
modules (including IE 11).

It turns out that the fix in #41162 was itself broken, because the
`es.reflect.consruct.js` script (included directly in the page via a
`<script>` tag) was in CommonJS format (which cannot run in the browser
as is). By chance, this still allowed browsers that supported neither
Custom Elements nor ES2015 modules (such as IE 11) to work correctly as
a side-effect of loading the `@webcomponents/custom-elements` polyfill
after the Custom Elements ES5 shim (`native-shim.js`). However, on the
few browsers that natively support Custom Elements but not ES2015
modules, angular.io would still be broken.

This commit correctly fixes angular.io on all browsers by properly
bundling the polyfills and transpiling to ES5.

Implementation-wise, we use [esbuild][1] for bundling the polyfills (and
converting from CommonJS to a browser-compatible, IIFE-based format) and
[swc][2] for downleveling the code to ES5 (since `esbuild` only supports
ES2015+).

[1]: https://esbuild.github.io/
[2]: https://swc.rs/

PR Close #41183
2021-03-12 13:22:57 -08:00

126 lines
5.4 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular</title>
<meta name="Description" content="Angular is a platform for building mobile and desktop web applications.
Join the community of millions of developers who build compelling user interfaces with Angular.">
<base href="/">
<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="dns-prefetch" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://stats.g.doubleclick.net">
<link rel="dns-prefetch" href="https://stats.g.doubleclick.net">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="search" type="application/opensearchdescription+xml" href="assets/opensearch.xml">
<link rel="icon" type="image/x-icon" href="assets/images/favicons/favicon.ico">
<link rel="icon" type="image/png" href="assets/images/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="assets/images/favicons/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="assets/images/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="assets/images/favicons/favicon-16x16.png" sizes="16x16">
<link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/favicon-144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/favicons/favicon-144x144.png">
<!-- NOTE: These need to be kept in sync with `ngsw-config.json`. -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block">
<!-- -->
<link rel="manifest" href="pwa-manifest.json">
<meta name="theme-color" content="#1976d2">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="translucent">
<script>
// Dynamically, pre-emptively, add `noindex`, which will be removed when the doc is ready and valid
tag = document.createElement('meta'); tag.name = 'robots'; tag.content = 'noindex';
document.head.appendChild(tag);
</script>
<!-- Google Analytics -->
<script>
// Note this is a customised version of the GA tracking snippet
// See the comments below for more info
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g;
~i.name.indexOf('NG_DEFER_BOOTSTRAP') || // only load library if not running e2e tests
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
</script>
<!-- End Google Analytics -->
<script>
// Report fatal errors to Google Analytics
window.onerror = function () {
ga('send', 'exception', { exDescription: formatError.apply(null, arguments), exFatal: true });
function formatError(msg, url, line, col, e) {
var stack;
msg = msg.replace(/^Error: /, '');
if (e) {
stack = e.stack
// strip the leading "Error: " from the stack trace
.replace(/^Error: /, '')
// strip the message from the stack trace, if present
.replace(msg + '\n', '')
// strip leading spaces
.replace(/^ +/gm, '')
// strip all leading "at " for each frame
.replace(/^at /gm, '')
// replace long urls with just the last segment: `filename:line:column`
.replace(/(?: \(|@)http.+\/([^/)]+)\)?(?:\n|$)/gm, '@$1\n')
// replace "eval code" in Edge
.replace(/ *\(eval code(:\d+:\d+)\)(?:\n|$)/gm, '@???$1\n')
} else {
line = line || '?';
col = col || '?';
stack = url + ':' + line + ':' + col;
}
return (msg + '\n' + stack).substr(0, 150);
}
};
</script>
</head>
<body>
<aio-shell></aio-shell>
<noscript>
<div class="background-sky hero"></div>
<section id="intro" style="text-shadow: 1px 1px #1976d2;">
<div class="hero-logo">
<img src="assets/images/logos/angular/angular.svg" width="250" height="250" alt="Angular">
</div>
<div class="homepage-container">
<div class="hero-headline">The modern web<br>developer's platform</div>
</div>
</section>
<h2 style="color: red; margin-top: 40px; position: relative; text-align: center; text-shadow: 1px 1px #fafafa;">
<b><i>This website requires JavaScript.</i></b>
</h2>
</noscript>
<!--
Custom Elements polyfills required for browsers that natively support Custom Elements but not
ES2015 modules. (See `custom-elements-es5-polyfills.js` for more info.)
NOTE:
The polyfills here will be loaded before the ones in `polyfills.ts` (including
`@webcomponents/custom-elements`). This is fine, because the polyfills here are only needed on
browsers that natively support Custom Elements, on which `@webcomponents/custom-elements` will
be a no-op (so the order of loading does not matter).
-->
<script src="generated/js/custom-elements-es5-polyfills.js" nomodule></script>
</body>
</html>