Update Angular guide with index.html modifications#5207
Update Angular guide with index.html modifications#5207deltajoe wants to merge 2 commits intowailsapp:masterfrom
Conversation
Added instructions for modifying the index.html file to include Wails options and scripts. Otherwise the reload for changed *.ts files won't work.
WalkthroughDocumentation for Angular dev mode updated with required HTML modifications, including a Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
website/docs/guides/angular.mdx (1)
17-23: Clarify the HTML snippet to avoid confusion.The code block shows
<head>and</head>tags, which might mislead users into thinking they need to add a new head section. Consider rewording to make it clearer that these entries should be added within the existing<head>section of theirindex.htmlfile.📝 Suggested improvement for clarity
-You also need to change the `index.html` file and add the following entries to your header section: +You also need to modify your `index.html` file by adding the following entries inside the existing `<head>` section: ```html -<head> <meta name="wails-options" content="noautoinject" /> <script src="/wails/ipc.js"></script> <script src="/wails/runtime.js"></script> -</head></details> <details> <summary>🤖 Prompt for AI Agents</summary>Verify each finding against the current code and only fix it if needed.
In
@website/docs/guides/angular.mdxaround lines 17 - 23, The snippet as shown
includes full and tags and may mislead readers to add a new head
section; update the guide text and the example in angular.mdx to explicitly
state that the meta and script lines must be placed inside the existing
of their index.html (or replace the fenced code block with just the three lines
to be inserted so it’s clear they are meant to be added into the existing
header).</details> </blockquote></details> </blockquote></details> <details> <summary>🤖 Prompt for all review comments with AI agents</summary>Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In@website/docs/guides/angular.mdx:
- Around line 17-23: The snippet as shown includes full and tags
and may mislead readers to add a new head section; update the guide text and the
example in angular.mdx to explicitly state that the meta and script lines must
be placed inside the existing of their index.html (or replace the fenced
code block with just the three lines to be inserted so it’s clear they are meant
to be added into the existing header).</details> --- <details> <summary>ℹ️ Review info</summary> <details> <summary>⚙️ Run configuration</summary> **Configuration used**: defaults **Review profile**: CHILL **Plan**: Pro **Run ID**: `b0491333-178f-41ab-b426-d2732c898e11` </details> <details> <summary>📥 Commits</summary> Reviewing files that changed from the base of the PR and between b618f81b8c76798cbd9d7b6df2376fb697a601a3 and 6ea3dfb20c885cdc01279280f11114edc79dd8b7. </details> <details> <summary>📒 Files selected for processing (1)</summary> * `website/docs/guides/angular.mdx` </details> </details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
|
Thanks for this documentation update! A quick question: Your PR description says this fixes an issue where
Once you've tested this, please update the PR description and we can proceed with review. |
|
I have updated the PR description and added some context to understand the problem. |
|
Thanks for reporting this issue and proposing a fix! This sounds like a legitimate problem that would affect Angular developers using Wails. Before I can accept this, I have a few requests:
Decision: COMMENT-AND-WAIT - Awaiting issue link, additional testing, and verification of approach CC @leaanthony |
|
Thanks for this PR! I understand the issue you're trying to solve — bindings are lost after Angular hot reload when *.ts files change. Before I can accept this, I need to verify that modifying index.html is the correct approach. The issue you're describing sounds like it might be related to how Angular's HMR (Hot Module Replacement) interacts with Wails' dev server, rather than a missing script in index.html. Could you clarify:
I want to make sure we're guiding users to the correct solution rather than a workaround. CC @leaanthony |
|
OK, I will check if there is a solution regarding angular settings. But this will take some time. My guess is, that it has something to do with the usage of the vite compiler toolchain, because in lower versions of angular i didn't had this problem. Responding to your questions:
as far as I can see there is no template for angular in the repo and no angular switch on the cli. There are community templates, but they all target very old angular versions.
the react template does exactly the same, maybe for a reason ;-)
|
2 participants
Added instructions for modifying the
index.htmlfile to include Wails options and scripts for an angular frontend (analog to react frontend). Without this modification the bindings into wails where missing after a hot reload of changed *.ts files.Tools:
Wails v2.10.1
Angular 21.2.0
Commands in
wails.json:The following effect takes place in the browser (chrome latest) and the application itself:
When starting the dev-cycle with
wails deveverything works fine and I could invoke the command from the angular app into the wails app. Changing UI elements with hot reload works fine as well. When I change the underlying *.ts file in the angular project, all bindings into the wails app are lost after the hot reload. In the browser and in the app.If I apply the fix in the
index.htmlas suggested in this PR, everything works fine after the hot reload of transpiled *.ts files. Maybe there is an other solution, but I have not found it.Description
Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
Fixes # (issue)
Type of change
Please select the option that is relevant.
How Has This Been Tested?
Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration using
wails doctor.If you checked Linux, please specify the distro and version.
Test Configuration
Please paste the output of
wails doctor. If you are unable to run this command, please describe your environment in as much detail as possible.Checklist:
website/src/pages/changelog.mdxwith details of this PRSummary by CodeRabbit