1
0
mirror of https://github.com/flutter/samples.git synced 2026-03-21 20:08:16 +00:00
Files
samples/web_embedding
dependabot[bot] e8557507ff Bump @angular/compiler-cli from 20.3.17 to 21.2.0 in /web_embedding/ng-flutter (#2813)
Bumps [@angular/compiler-cli](https://github.com/angular/angular/tree/HEAD/packages/compiler-cli) from 20.3.17 to 21.2.0.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a href="https://github.com/angular/angular/releases"><code>@​angular/compiler-cli</code>'s releases</a>.</em></p>
<blockquote>
<h2>VSCode Extension: 21.2.0</h2>
<ul>
<li>fix(vscode-extension): Highlight function calls with optional chaining (<a href="4f8d3995f0">4f8d3995f0</a>)</li>
<li>feat(language-service): add linked editing ranges for HTML tag synchronization (<a href="8c21866f49">8c21866f49</a>)</li>
<li>fix(vscode-extension): support highlighting for class bindings with brackets (<a href="01ed57f297">01ed57f297</a>)</li>
<li>feat(language-service): add JSON schema for angularCompilerOptions (<a href="496967e7b1">496967e7b1</a>)</li>
<li>fix(language-service): Detect local project version on creation (<a href="8a7cbd4668">8a7cbd4668</a>)</li>
<li>feat(language-server): Support client-side file watching via <code>onDidChangeWatchedFiles</code> (<a href="6fb39d9b62">6fb39d9b62</a>)</li>
<li>feat(language-server): Add completions and hover info for inline styles (<a href="ebc90c26f5">ebc90c26f5</a>)</li>
<li>feat(language-server): Add quick info for inline styles (<a href="573aadef7e">573aadef7e</a>)</li>
<li>feat(language-server): Add folding range support for inline styles (<a href="26fd0839c3">26fd0839c3</a>)</li>
</ul>
<h2>21.2.0</h2>
<h3>common</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="18003a33bb"><img src="https://img.shields.io/badge/18003a33bb-feat-blue" alt="feat - 18003a33bb" /></a></td>
<td>add an 'outlet' injector option for ngTemplateOutlet</td>
</tr>
<tr>
<td><a href="8bbe6dc46c"><img src="https://img.shields.io/badge/8bbe6dc46c-feat-blue" alt="feat - 8bbe6dc46c" /></a></td>
<td>Add Location strategies to manage trailing slash on write</td>
</tr>
<tr>
<td><a href="51cc914807"><img src="https://img.shields.io/badge/51cc914807-feat-blue" alt="feat - 51cc914807" /></a></td>
<td>support height in ImageLoaderConfig and built-in loaders</td>
</tr>
</tbody>
</table>
<h3>compiler</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="72534e2a34"><img src="https://img.shields.io/badge/72534e2a34-feat-blue" alt="feat - 72534e2a34" /></a></td>
<td>Add support for the <code>instanceof</code> binary operator</td>
</tr>
<tr>
<td><a href="95b3f37d4a"><img src="https://img.shields.io/badge/95b3f37d4a-feat-blue" alt="feat - 95b3f37d4a" /></a></td>
<td>Exhaustive checks for switch blocks</td>
</tr>
<tr>
<td><a href="04ba09a8d9"><img src="https://img.shields.io/badge/04ba09a8d9-feat-blue" alt="feat - 04ba09a8d9" /></a></td>
<td>support <code>AstVisitor.visitEmptyExpr()</code></td>
</tr>
<tr>
<td><a href="ce80136e7b"><img src="https://img.shields.io/badge/ce80136e7b-fix-green" alt="fix - ce80136e7b" /></a></td>
<td>optimize away unnecessary restore/reset view calls</td>
</tr>
<tr>
<td><a href="3242a61bae"><img src="https://img.shields.io/badge/3242a61bae-fix-green" alt="fix - 3242a61bae" /></a></td>
<td>variable counter visiting some expressions twice</td>
</tr>
</tbody>
</table>
<h3>compiler-cli</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="473dd3e1cb"><img src="https://img.shields.io/badge/473dd3e1cb-fix-green" alt="fix - 473dd3e1cb" /></a></td>
<td>attach source spans to object literal keys in TCB</td>
</tr>
<tr>
<td><a href="a904d9f77b"><img src="https://img.shields.io/badge/a904d9f77b-fix-green" alt="fix - a904d9f77b" /></a></td>
<td>support nested component declaration</td>
</tr>
<tr>
<td><a href="2ea6dfc6c9"><img src="https://img.shields.io/badge/2ea6dfc6c9-fix-green" alt="fix - 2ea6dfc6c9" /></a></td>
<td>update diagnostic to flag no-op arrow functions in listeners</td>
</tr>
</tbody>
</table>
<h3>core</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="8d5210c9fe"><img src="https://img.shields.io/badge/8d5210c9fe-feat-blue" alt="feat - 8d5210c9fe" /></a></td>
<td>add ChangeDetectionStrategy.Eager alias for Default</td>
</tr>
<tr>
<td><a href="92d2498910"><img src="https://img.shields.io/badge/92d2498910-feat-blue" alt="feat - 92d2498910" /></a></td>
<td>add host node to DeferBlockData (<a href="https://github.com/angular/angular/tree/HEAD/packages/compiler-cli/issues/66546">#66546</a>)</td>
</tr>
<tr>
<td><a href="ea2016a6dc"><img src="https://img.shields.io/badge/ea2016a6dc-feat-blue" alt="feat - ea2016a6dc" /></a></td>
<td>add support for nested animations</td>
</tr>
<tr>
<td><a href="81cabc1477"><img src="https://img.shields.io/badge/81cabc1477-feat-blue" alt="feat - 81cabc1477" /></a></td>
<td>add support for TypeScript 6</td>
</tr>
<tr>
<td><a href="1ba9b7ac50"><img src="https://img.shields.io/badge/1ba9b7ac50-feat-blue" alt="feat - 1ba9b7ac50" /></a></td>
<td>resource composition via snapshots</td>
</tr>
<tr>
<td><a href="d9923b72a2"><img src="https://img.shields.io/badge/d9923b72a2-feat-blue" alt="feat - d9923b72a2" /></a></td>
<td>support arrow functions in expressions</td>
</tr>
<tr>
<td><a href="a7e8abbb7e"><img src="https://img.shields.io/badge/a7e8abbb7e-fix-green" alt="fix - a7e8abbb7e" /></a></td>
<td>correctly handle SkipSelf when resolving from embedded view injector</td>
</tr>
<tr>
<td><a href="0806ee3826"><img src="https://img.shields.io/badge/0806ee3826-fix-green" alt="fix - 0806ee3826" /></a></td>
<td>prevent animated element duplication with dynamic components in zoneless mode</td>
</tr>
<tr>
<td><a href="ed78fa05c7"><img src="https://img.shields.io/badge/ed78fa05c7-fix-green" alt="fix - ed78fa05c7" /></a></td>
<td>Remove note to skip arrow functions in best practices</td>
</tr>
</tbody>
</table>
<h3>forms</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="f56bb07d83"><img src="https://img.shields.io/badge/f56bb07d83-feat-blue" alt="feat - f56bb07d83" /></a></td>
<td>add field param to submit action and onInvalid</td>
</tr>
<tr>
<td><a href="ba009b6031"><img src="https://img.shields.io/badge/ba009b6031-feat-blue" alt="feat - ba009b6031" /></a></td>
<td>add form directive</td>
</tr>
<tr>
<td><a href="22afbb2f36"><img src="https://img.shields.io/badge/22afbb2f36-feat-blue" alt="feat - 22afbb2f36" /></a></td>
<td>add parsing support to native inputs (<a href="https://github.com/angular/angular/tree/HEAD/packages/compiler-cli/issues/66917">#66917</a>)</td>
</tr>
</tbody>
</table>
</blockquote>
<p>... (truncated)</p>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a href="https://github.com/angular/angular/blob/main/CHANGELOG.md"><code>@​angular/compiler-cli</code>'s changelog</a>.</em></p>
<blockquote>
<h1>20.3.17 (2026-02-25)</h1>
<h2>Breaking Changes</h2>
<h3>core</h3>
<ul>
<li>
<p>Angular now only applies known attributes from HTML in translated ICU content. Unknown attributes are dropped and not rendered.</p>
<p>(cherry picked from commit 03da204b6daa5e4583e0d0968c2107390bbd8235)</p>
</li>
</ul>
<h3>core</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="7f9de3c118">7f9de3c118</a></td>
<td>fix</td>
<td>block creation of sensitive URI attributes from ICU messages</td>
</tr>
</tbody>
</table>
<h1>21.2.0 (2026-02-25)</h1>
<h3>common</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="18003a33bb">18003a33bb</a></td>
<td>feat</td>
<td>add an 'outlet' injector option for ngTemplateOutlet</td>
</tr>
<tr>
<td><a href="8bbe6dc46c">8bbe6dc46c</a></td>
<td>feat</td>
<td>Add Location strategies to manage trailing slash on write</td>
</tr>
<tr>
<td><a href="51cc914807">51cc914807</a></td>
<td>feat</td>
<td>support height in ImageLoaderConfig and built-in loaders</td>
</tr>
</tbody>
</table>
<h3>compiler</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="72534e2a34">72534e2a34</a></td>
<td>feat</td>
<td>Add support for the <code>instanceof</code> binary operator</td>
</tr>
<tr>
<td><a href="95b3f37d4a">95b3f37d4a</a></td>
<td>feat</td>
<td>Exhaustive checks for switch blocks</td>
</tr>
<tr>
<td><a href="04ba09a8d9">04ba09a8d9</a></td>
<td>feat</td>
<td>support <code>AstVisitor.visitEmptyExpr()</code></td>
</tr>
<tr>
<td><a href="ce80136e7b">ce80136e7b</a></td>
<td>fix</td>
<td>optimize away unnecessary restore/reset view calls</td>
</tr>
<tr>
<td><a href="3242a61bae">3242a61bae</a></td>
<td>fix</td>
<td>variable counter visiting some expressions twice</td>
</tr>
</tbody>
</table>
<h3>compiler-cli</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="473dd3e1cb">473dd3e1cb</a></td>
<td>fix</td>
<td>attach source spans to object literal keys in TCB</td>
</tr>
<tr>
<td><a href="a904d9f77b">a904d9f77b</a></td>
<td>fix</td>
<td>support nested component declaration</td>
</tr>
<tr>
<td><a href="2ea6dfc6c9">2ea6dfc6c9</a></td>
<td>fix</td>
<td>update diagnostic to flag no-op arrow functions in listeners</td>
</tr>
</tbody>
</table>
<h3>core</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="8d5210c9fe">8d5210c9fe</a></td>
<td>feat</td>
<td>add ChangeDetectionStrategy.Eager alias for Default</td>
</tr>
<tr>
<td><a href="92d2498910">92d2498910</a></td>
<td>feat</td>
<td>add host node to DeferBlockData (<a href="https://redirect.github.com/angular/angular/pull/66546">#66546</a>)</td>
</tr>
<tr>
<td><a href="ea2016a6dc">ea2016a6dc</a></td>
<td>feat</td>
<td>add support for nested animations</td>
</tr>
<tr>
<td><a href="81cabc1477">81cabc1477</a></td>
<td>feat</td>
<td>add support for TypeScript 6</td>
</tr>
<tr>
<td><a href="1ba9b7ac50">1ba9b7ac50</a></td>
<td>feat</td>
<td>resource composition via snapshots</td>
</tr>
<tr>
<td><a href="d9923b72a2">d9923b72a2</a></td>
<td>feat</td>
<td>support arrow functions in expressions</td>
</tr>
<tr>
<td><a href="a7e8abbb7e">a7e8abbb7e</a></td>
<td>fix</td>
<td>correctly handle SkipSelf when resolving from embedded view injector</td>
</tr>
<tr>
<td><a href="0806ee3826">0806ee3826</a></td>
<td>fix</td>
<td>prevent animated element duplication with dynamic components in zoneless mode</td>
</tr>
<tr>
<td><a href="ed78fa05c7">ed78fa05c7</a></td>
<td>fix</td>
<td>Remove note to skip arrow functions in best practices</td>
</tr>
</tbody>
</table>
<h3>forms</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
</table>
</blockquote>
<p>... (truncated)</p>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a href="c2cedd1954"><code>c2cedd1</code></a> refactor(compiler-cli): improve diagnostic with help link</li>
<li><a href="c0cb6040f8"><code>c0cb604</code></a> fix(compiler-cli): detect uninvoked functions in defer trigger expressions</li>
<li><a href="e45a7fe734"><code>e45a7fe</code></a> refactor(compiler-cli): update updateImportClause away from deprecated signature</li>
<li><a href="95b3f37d4a"><code>95b3f37</code></a> feat(compiler): Exhaustive checks for switch blocks</li>
<li><a href="81cabc1477"><code>81cabc1</code></a> feat(core): add support for TypeScript 6</li>
<li><a href="815e1a03a9"><code>815e1a0</code></a> refactor(compiler-cli): Add skeleton tests around source-&gt;source compiler tra...</li>
<li><a href="30f0914754"><code>30f0914</code></a> feat(forms): support binding null to number input (<a href="https://github.com/angular/angular/tree/HEAD/packages/compiler-cli/issues/66917">#66917</a>)</li>
<li><a href="e10a63453d"><code>e10a634</code></a> refactor(compiler-cli): use phaseModifier for type-only import detection</li>
<li><a href="3606902b33"><code>3606902</code></a> refactor(forms): relax <code>[formField]</code> input type from <code>FieldTree</code> to <code>Field</code></li>
<li><a href="e7fa177923"><code>e7fa177</code></a> refactor(compiler-cli): removes <code>reflector</code> parameter from wrapTypeReference</li>
<li>Additional commits viewable in <a href="https://github.com/angular/angular/commits/v21.2.0/packages/compiler-cli">compare view</a></li>
</ul>
</details>
<br />

[![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=@angular/compiler-cli&package-manager=npm_and_yarn&previous-version=20.3.17&new-version=21.2.0)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`.

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it
- `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

</details>
2026-03-02 06:49:55 +00:00
..

web_embedding

This directory contains examples of how to embed Flutter in web apps (without iframes):

  • element_embedding_demo: Modifies the index.html of a flutter app so it is launched in a custom hostElement. This is the most basic embedding example.
  • ng-flutter: A simple Angular app (and component) that replicates the above example, but in an Angular style.

Check the README.md of each example for more details on how to run it, and the "Points of Interest" it may contain.

Community Contributions

Members of the community have graciously ported and contributed the following examples of Flutter Web embedding into other web frameworks:

Author Host Framework Code
@p-mazhnik React JS p-mazhnik/flutter-embedding cra-flutter
@p-mazhnik React Native p-mazhnik/flutter-embedding expo-flutter

(All contributions are welcome! Please, create an issue or open a PR to let us know how you've embedded a Flutter Web app with your favorite web framework (Vue? Svelte? Ember? Aurelia? jQuery? MooTools? Prototype?), so it can be added to the table above!)