mirror of https://github.com/flutter/samples.git synced 2025-11-08 13:58:47 +00:00

Files

dependabot[bot] 18a8e51109 Bump @angular/animations from 19.2.14 to 20.0.3 in /web_embedding/ng-flutter (#2647 )

Bumps [@angular/animations](https://github.com/angular/angular/tree/HEAD/packages/animations) from 19.2.14 to 20.0.3.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a href="https://github.com/angular/angular/releases"><code>@angular/animations</code>'s releases</a>.</em></p>
<blockquote>
<h2>20.0.3</h2>
<p>No release notes provided.</p>
<h2>20.0.2</h2>
<h3>core</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="1e8158baee"><img src="https://img.shields.io/badge/1e8158baee-fix-green" alt="fix - 1e8158baee" /></a></td>
<td>components marked for traversal resets reactive context (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/61663">#61663</a>)</td>
</tr>
<tr>
<td><a href="1cd23be57e"><img src="https://img.shields.io/badge/1cd23be57e-fix-green" alt="fix - 1cd23be57e" /></a></td>
<td>unregister <code>onDestroy</code> in <code>outputToObservable</code> (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/61882">#61882</a>)</td>
</tr>
</tbody>
</table>
<h2>20.0.1</h2>
<h3>compiler</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="66a0ec6510"><img src="https://img.shields.io/badge/66a0ec6510-fix-green" alt="fix - 66a0ec6510" /></a></td>
<td>move defer trigger assertions out of parser (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/61747">#61747</a>)</td>
</tr>
<tr>
<td><a href="8ecb1ba027"><img src="https://img.shields.io/badge/8ecb1ba027-fix-green" alt="fix - 8ecb1ba027" /></a></td>
<td>recover invalid parenthesized expressions (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/61815">#61815</a>)</td>
</tr>
</tbody>
</table>
<h3>core</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="8c60cbfd1c"><img src="https://img.shields.io/badge/8c60cbfd1c-fix-green" alt="fix - 8c60cbfd1c" /></a></td>
<td><code>takeUntilDestroyed</code> completes immediately if DestroyRef already destroyed (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/61847">#61847</a>)</td>
</tr>
<tr>
<td><a href="b1d960d082"><img src="https://img.shields.io/badge/b1d960d082-fix-green" alt="fix - b1d960d082" /></a></td>
<td>produce an error when incremental hydration is expected, but not configured (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/61741">#61741</a>)</td>
</tr>
<tr>
<td><a href="b4ed62ddf6"><img src="https://img.shields.io/badge/b4ed62ddf6-fix-green" alt="fix - b4ed62ddf6" /></a></td>
<td>properly handle the case where getSignalGraph is called on a componentless NodeInjector (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/60772">#60772</a>)</td>
</tr>
<tr>
<td><a href="ddd22bea48"><img src="https://img.shields.io/badge/ddd22bea48-fix-green" alt="fix - ddd22bea48" /></a></td>
<td>unregister <code>onDestroy</code> in <code>ResourceImpl</code> when <code>destroy()</code> is called (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/61870">#61870</a>)</td>
</tr>
<tr>
<td><a href="5c31e7e28d"><img src="https://img.shields.io/badge/5c31e7e28d-fix-green" alt="fix - 5c31e7e28d" /></a></td>
<td>unregister <code>onDestroy</code> when observable errors in <code>toSignal</code> (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/61596">#61596</a>)</td>
</tr>
</tbody>
</table>
<h3>migrations</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="e9820a6d48"><img src="https://img.shields.io/badge/e9820a6d48-fix-green" alt="fix - e9820a6d48" /></a></td>
<td>avoid trailing whitespaces in unused imports migration (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/61698">#61698</a>)</td>
</tr>
</tbody>
</table>
<h3>service-worker</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="b93fa22f25"><img src="https://img.shields.io/badge/b93fa22f25-fix-green" alt="fix - b93fa22f25" /></a></td>
<td>prevent duplicate fetches during concurrent update checks (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/61443">#61443</a>)</td>
</tr>
<tr>
<td><a href="9743bd1317"><img src="https://img.shields.io/badge/9743bd1317-fix-green" alt="fix - 9743bd1317" /></a></td>
<td>update service worker to handle seeking better for videos (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/60029">#60029</a>)</td>
</tr>
</tbody>
</table>
<h2>20.0.0</h2>
<p>Blog post: <a href="https://blog.angular.dev/announcing-angular-v20-b5c9c06cf301">https://blog.angular.dev/announcing-angular-v20-b5c9c06cf301</a></p>
<h3>common</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="2e5362a469"><img src="https://img.shields.io/badge/2e5362a469-feat-blue" alt="feat - 2e5362a469" /></a></td>
<td>accept undefined inputs in NgTemplateOutlet (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/61404">#61404</a>)</td>
</tr>
<tr>
<td><a href="b7d3f3dbfc"><img src="https://img.shields.io/badge/b7d3f3dbfc-feat-blue" alt="feat - b7d3f3dbfc" /></a></td>
<td>Allow passing ScrollOptions to ViewportScroller (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/61002">#61002</a>)</td>
</tr>
<tr>
<td><a href="74cceba587"><img src="https://img.shields.io/badge/74cceba587-feat-blue" alt="feat - 74cceba587" /></a></td>
<td>throw error for suspicious date patterns (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/59798">#59798</a>)</td>
</tr>
<tr>
<td><a href="255c79e048"><img src="https://img.shields.io/badge/255c79e048-fix-green" alt="fix - 255c79e048" /></a></td>
<td>cleanup <code>updateLatestValue</code> if view is destroyed before promise resolves (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/58041">#58041</a>)</td>
</tr>
<tr>
<td><a href="739cadae62"><img src="https://img.shields.io/badge/739cadae62-fix-green" alt="fix - 739cadae62" /></a></td>
<td>Handle errors in async pipe subscriptions (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/60057">#60057</a>)</td>
</tr>
<tr>
<td><a href="cbbea70fa3"><img src="https://img.shields.io/badge/cbbea70fa3-fix-green" alt="fix - cbbea70fa3" /></a></td>
<td>issue a warning instead of an error when <code>NgOptimizedImage</code> exceeds the preload limit (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/60879">#60879</a>)</td>
</tr>
<tr>
<td><a href="fc4a56d5c5"><img src="https://img.shields.io/badge/fc4a56d5c5-fix-green" alt="fix - fc4a56d5c5" /></a></td>
<td>rename httpResource function in factory (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/60022">#60022</a>)</td>
</tr>
<tr>
<td><a href="785a1110e6"><img src="https://img.shields.io/badge/785a1110e6-fix-green" alt="fix - 785a1110e6" /></a></td>
<td>resolve host binding type issues (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/60481">#60481</a>)</td>
</tr>
</tbody>
</table>
<h3>compiler</h3>
<p>| Commit | Description |</p>
</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/animations</code>'s changelog</a>.</em></p>
<blockquote>
<h1>20.0.3 (2025-06-11)</h1>
<h1>20.0.2 (2025-06-06)</h1>
<h3>core</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="1e8158baee">1e8158baee</a></td>
<td>fix</td>
<td>components marked for traversal resets reactive context (<a href="https://redirect.github.com/angular/angular/pull/61663">#61663</a>)</td>
</tr>
<tr>
<td><a href="1cd23be57e">1cd23be57e</a></td>
<td>fix</td>
<td>unregister <code>onDestroy</code> in <code>outputToObservable</code> (<a href="https://redirect.github.com/angular/angular/pull/61882">#61882</a>)</td>
</tr>
</tbody>
</table>
<h1>20.1.0-next.0 (2025-06-04)</h1>
<h3>compiler</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="5a76826d26">5a76826d26</a></td>
<td>fix</td>
<td>only report parser errors on invalid expression (<a href="https://redirect.github.com/angular/angular/pull/61793">#61793</a>)</td>
</tr>
<tr>
<td><a href="e9fcbb8af1">e9fcbb8af1</a></td>
<td>fix</td>
<td>remove TypeScript from linker (<a href="https://redirect.github.com/angular/angular/pull/61618">#61618</a>)</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="e62fb359d6">e62fb359d6</a></td>
<td>feat</td>
<td>add experimental support for fast type declaration emission (<a href="https://redirect.github.com/angular/angular/pull/61334">#61334</a>)</td>
</tr>
<tr>
<td><a href="0cf1001715">0cf1001715</a></td>
<td>feat</td>
<td>support host directives with direct external references in fast type declaration emission (<a href="https://redirect.github.com/angular/angular/pull/61469">#61469</a>)</td>
</tr>
<tr>
<td><a href="77fa204ad1">77fa204ad1</a></td>
<td>fix</td>
<td>rename flag for enabling fast type declaration emission (<a href="https://redirect.github.com/angular/angular/pull/61353">#61353</a>)</td>
</tr>
<tr>
<td><a href="c439d6938d">c439d6938d</a></td>
<td>fix</td>
<td>symbol builder duplicating host directives (<a href="https://redirect.github.com/angular/angular/pull/61240">#61240</a>)</td>
</tr>
<tr>
<td><a href="3e1baa5a95">3e1baa5a95</a></td>
<td>fix</td>
<td>typo in NG2026 message (<a href="https://redirect.github.com/angular/angular/pull/61325">#61325</a>)</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="8163a8995e">8163a8995e</a></td>
<td>feat</td>
<td>Add <code>destroyed</code> property on <code>DestroyRef</code> (<a href="https://redirect.github.com/angular/angular/pull/61849">#61849</a>)</td>
</tr>
<tr>
<td><a href="4356e85456">4356e85456</a></td>
<td>fix</td>
<td>fakeAsync should not depend on module import order (<a href="https://redirect.github.com/angular/angular/pull/61375">#61375</a>)</td>
</tr>
<tr>
<td><a href="583b9a7be5">583b9a7be5</a></td>
<td>fix</td>
<td>missing useExisting providers throwing for optional calls (<a href="https://redirect.github.com/angular/angular/pull/61137">#61137</a>)</td>
</tr>
<tr>
<td><a href="8f65223bd8">8f65223bd8</a></td>
<td>fix</td>
<td>update min Node.js support to 20.19, 22.12, and 24.0 (<a href="https://redirect.github.com/angular/angular/pull/61499">#61499</a>)</td>
</tr>
<tr>
<td><a href="b785256b9e">b785256b9e</a></td>
<td>perf</td>
<td>avoid intermediate arrays in definition (<a href="https://redirect.github.com/angular/angular/pull/61445">#61445</a>)</td>
</tr>
</tbody>
</table>
<h3>forms</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="610bebfce9">610bebfce9</a></td>
<td>fix</td>
<td>Allow ControlState as reset arguments for <code>FormGroup</code>/<code>FormRecord</code> (<a href="https://redirect.github.com/angular/angular/pull/55860">#55860</a>)</td>
</tr>
</tbody>
</table>
<h3>language-service</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="cf55d1bdd4">cf55d1bdd4</a></td>
<td>feat</td>
<td>Support importing the external module's export about the angular metadata. (<a href="https://redirect.github.com/angular/angular/pull/61122">#61122</a>)</td>
</tr>
</tbody>
</table>
<h3>service-worker</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="c67dbda8ff">c67dbda8ff</a></td>
<td>feat</td>
<td>support notification closes (<a href="https://redirect.github.com/angular/angular/pull/61442">#61442</a>)</td>
</tr>
<tr>
<td><a href="6e1df54799">6e1df54799</a></td>
<td>feat</td>
<td>support push subscription changes (<a href="https://redirect.github.com/angular/angular/pull/61856">#61856</a>)</td>
</tr>
</tbody>
</table>
</blockquote>
<p>... (truncated)</p>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a href="8564cf48d8"><code>8564cf4</code></a> build: replace all <code>ng_package</code> with new rule from <code>rules_angular</code> (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/61862">#61862</a>)</li>
<li><a href="e910893fa6"><code>e910893</code></a> build: adjust bundling tests to use Angular CLI</li>
<li><a href="9df5f508ca"><code>9df5f50</code></a> docs: update API examples to modern angular (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/61688">#61688</a>)</li>
<li><a href="30e081287d"><code>30e0812</code></a> fix(core): update min Node.js support to 20.19, 22.12, and 24.0 (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/61500">#61500</a>)</li>
<li><a href="3433021475"><code>3433021</code></a> build: move private testing helpers outside <code>platform-browser/testing</code> (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/61476">#61476</a>)</li>
<li><a href="6f74458e53"><code>6f74458</code></a> build: migrate animations to use rules_js based toolchain (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/61479">#61479</a>)</li>
<li><a href="bc830cec64"><code>bc830ce</code></a> refactor(animations): mark non-default <code>new</code> expressions as pure (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/61452">#61452</a>)</li>
<li><a href="051d90a4cc"><code>051d90a</code></a> build: remove irrelevant madge circular deps tests (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/61197">#61197</a>)</li>
<li><a href="4b365c7908"><code>4b365c7</code></a> docs: fix non-working link  (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/61131">#61131</a>)</li>
<li><a href="9793693f5b"><code>9793693</code></a> refactor: add Node.js 24 as supported version (<a href="https://github.com/angular/angular/tree/HEAD/packages/animations/issues/61142">#61142</a>)</li>
<li>Additional commits viewable in <a href="https://github.com/angular/angular/commits/20.0.3/packages/animations">compare view</a></li>
</ul>
</details>
<br />

[![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=@angular/animations&package-manager=npm_and_yarn&previous-version=19.2.14&new-version=20.0.3)](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 merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- `@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>

2025-06-16 06:56:33 +00:00

flutter

Flutter 3.29 beta (#2571 )

2025-02-12 18:08:01 -05:00

src

Update ng-flutter embedding example to Angular v17 (#2081 )

2023-11-08 10:44:27 -08:00

.gitignore

Update Angular embedding sample (#2147 )

2024-01-24 15:53:52 -06:00

angular.json

Update ng-flutter embedding example to Angular v17 (#2081 )

2023-11-08 10:44:27 -08:00

package.json

Bump @angular/animations from 19.2.14 to 20.0.3 in /web_embedding/ng-flutter (#2647 )

2025-06-16 06:56:33 +00:00

README.md

Update ng-flutter embedding example to Angular v17 (#2081 )

2023-11-08 10:44:27 -08:00

tsconfig.app.json

Publish web_embedding (#1777 )

2023-05-06 10:53:17 +10:00

tsconfig.json

Publish web_embedding (#1777 )

2023-05-06 10:53:17 +10:00

tsconfig.spec.json

Publish web_embedding (#1777 )

2023-05-06 10:53:17 +10:00

README.md

ng-flutter

This Angular project is a simple example of how Angular and Flutter web apps could be integrated, and have them interop.

Points of Interest

Angular

This repository is a quite standard Angular app. The following changes were made to be able to use (and interop) with a Flutter web application:

package.json has a custom prebuild script that builds the Flutter web app, so Angular can find it later.
flutter.js is added as a "scripts" entry in angular.json. Angular takes care of minimizing and injecting it as any other script.
The rest of the flutter app flutter/build/web/ is registered as an "assets" entry in angular.json, and moved to /flutter.
The ng-flutter component takes care of embedding Flutter web, and yielding control to Angular through an appLoaded EventEmitter. The object yielded by this emitter is a state controller exposed by flutter via a JS custom event!

Flutter

The embedded Flutter application lives in the flutter directory of this repo. That application is a standard web app, that doesn't need to be aware that it's going to be embedded in another framework.

Flutter uses new @staticInterop methods to allow certain Dart functions to be called from JavaScript.
Look at how createDartExport and broadcastAppEvent work together to make the _state controller of the Flutter app available to Angular!

How to build the app

Requirements

If you want to build and run this demo on your machine, you'll need a moderately recent version of Angular:

$ ng version

Angular CLI: 17.0.0
Node: 20.9.0
Package Manager: npm 10.1.0
OS: linux x64

And Flutter:

$ flutter --version

Flutter 3.13.9 • channel stable
Framework • revision d211f42860 (2 weeks ago) • 2023-10-25 13:42:25 -0700
Engine • revision 0545f8705d
Tools • Dart 3.1.5 • DevTools 2.25.0

Ensure npm, ng and flutter are present in your $PATH.

Building the app

This repository is a moderately standard Angular app. It integrates Flutter web by making it part of the Angular assets.

In order to build this app, first fetch its npm dependencies:

$ npm install

added 963 packages, and audited 964 packages in 17s

93 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Then run the build script. It'll take care of building Flutter automatically:

$ npm run build

> ng-flutter@0.0.0 prebuild

... Flutter web build output ...

Compiling lib/main.dart for the Web...

> ng-flutter@0.0.0 build
> ng build

... Angular build output ...

✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Local Angular development

Once you've reached this point, you should be able to work with your Angular application normally, for example to run a local web server:

$ npm run start

> ng-flutter@0.0.0 start
> ng serve

✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   4.38 MB | 

... Angular build output...

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.

Navigate to http://localhost:4200/. The application will automatically reload if you change any of its Angular source files.

Local Flutter web development

The Flutter app lives inside the flutter directory, and can be developed independently. Just do any changes on Flutter web as you'd normally do. It even includes a small web/index.html so you can see changes to your app without running the whole Angular setup.

Note

For now, Angular does not auto-detect changes to your Flutter web app, so once you're happy with your Flutter web app, make sure to call npm run build so everything rebuilds and gets placed into its correct location.

Deploying the app

After npm run build, you should have a deployable Angular + Flutter web app in the dist directory of this Angular project.

Your built app can can be deployed anywhere, but do check Firebase hosting for a super-easy deployment experience!

Troubleshooting

Flutter

Ensure your flutter app is properly rebuilt after any changes.

Run npm run build to re-build the Flutter app.

If you encounter error messages like:

Error: Can't resolve 'flutter/build/web/flutter.js' in '/my/checkout/of/ng-flutter'

You definitely need to run npm run build!

Reach out to the team(s)!

Have you had any problem not covered in this README? Do you want to see other embedding examples?

Let us know by creating an issue or opening a new pull request.

Thanks!