7d954dffd0
By its nature, Ivy alters the import graph of a TS program, adding imports where template dependencies exist. For example, if ComponentA uses PipeB in its template, Ivy will insert an import of PipeB into the file in which ComponentA is declared. Any insertion of an import into a program has the potential to introduce a cycle into the import graph. If for some reason the file in which PipeB is declared imports the file in which ComponentA is declared (maybe it makes use of a service or utility function that happens to be in the same file as ComponentA) then this could create an import cycle. This turns out to happen quite regularly in larger Angular codebases. TypeScript and the Ivy runtime have no issues with such cycles. However, other tools are not so accepting. In particular the Closure Compiler is very anti-cycle. To mitigate this problem, it's necessary to detect when the insertion of an import would create a cycle. ngtsc can then use a different strategy, known as "remote scoping", instead of directly writing a reference from one component to another. Under remote scoping, a function 'setComponentScope' is called after the declaration of the component's module, which does not require the addition of new imports. FW-647 #resolve PR Close #28169
31 lines
1.2 KiB
HTML
31 lines
1.2 KiB
HTML
<!doctype html>
|
|
|
|
<html>
|
|
<head>
|
|
<title>Angular Cyclic Import Example</title>
|
|
</head>
|
|
<body>
|
|
<!-- The Angular application will be bootstrapped into this element. -->
|
|
<trigger></trigger>
|
|
|
|
<!--
|
|
Script tag which bootstraps the application. Use `?debug` in URL to select
|
|
the debug version of the script.
|
|
|
|
There are two scripts sources: `bundle.min.js` and `bundle.min_debug.js` You can
|
|
switch between which bundle the browser loads to experiment with the application.
|
|
|
|
- `bundle.min.js`: Is what the site would serve to their users. It has gone
|
|
through rollup, build-optimizer, and uglify with tree shaking.
|
|
- `bundle.min_debug.js`: Is what the developer would like to see when debugging
|
|
the application. It has also done through full pipeline of rollup, build-optimizer,
|
|
and uglify, however special flags were passed to uglify to prevent inlining and
|
|
property renaming.
|
|
-->
|
|
<script>
|
|
document.write('<script src="' +
|
|
(document.location.search.endsWith('debug') ? '/bundle.min_debug.js' : '/bundle.min.js') +
|
|
'"></' + 'script>');
|
|
</script>
|
|
</body>
|
|
</html> |