fix: make angular template hierarchy example work

Author: theodesp

examples/angular/template-hierarchy-data-fetching/README.md

@@ -1,23 +1,29 @@
 # Angular Template Hierarchy and Data fetching Example
 
-In this example we show how to implement the WordPress Template Hierarchy in Angular for use with a Headless WordPress backend using WPGraphQL.
+In this example we show how to implement the **WordPress Template Hierarchy in Angular** for use with a Headless WordPress backend using WPGraphQL.
 
-## Getting Started
+## Getting Started 🚀
 
 > [!IMPORTANT]
-> Docker Desktop needs to be installed to run WordPress locally.
+> **Docker Desktop** needs to be installed to run WordPress locally.
 
 1. Run `npm run example:setup` to install dependencies and configure the local WP server.
-2. Run `npm run backend:start` starts the backend server for template fetching at http://localhost:3000/api/templates
-3. Run `npm run example:start` to start the WordPress server and Angular development server.
+2. **Configure CORS:** Create a file named **`.env`** inside the **`/backend`** directory and add the following content to set the allowed frontend URL:
+    ```
+    FRONTEND_URL=http://localhost:4200
+    ```
+    *(For more details on the backend service, please refer to the **`/backend/README.md`** file.)*
+3. Run `npm run backend:start` starts the backend server for template fetching at **http://localhost:3000/api/templates**
+4. Run `npm run example:start` to start the WordPress server and Angular development server.
 
 > [!NOTE]
 > When you kill the long running process this will not shutdown the local WP instance, only Angular. You must run `npm run example:stop` to kill the local WP server.
 
-## Trouble Shooting
+## Trouble Shooting 🛠️
+
 1. I get "Page Not Found. Sorry, the page you are looking for does not exist. Please check the URL." when opening the Angular app and trying to navigate through it.
-- Run `npm run backend:start` and verify that http://localhost:3000/api/templates returns correct data.
-- Verify if you have added `/backend/.env` file with correct `FRONTEND_URL`.
-- check for any errors in the console
-2. In some cases, you might have to install @angluar/cli globally. In /example-app/ run `npm install -g @angular/cli@latest`
+- Run `npm run backend:start` and verify that **http://localhost:3000/api/templates** returns correct data.
+- **Verify that you have created the `/backend/.env` file with the correct `FRONTEND_URL`** to resolve CORS issues.
+- Check for any errors in the console.
+2. In some cases, you might have to install **`@angular/cli`** globally. In `/example-app/` run `npm install -g @angular/cli@latest`
 3. To reset the WP server and re-run setup you can run `npm run example:prune` and confirm "Yes" at any prompts.

examples/angular/template-hierarchy-data-fetching/backend/.env.example

@@ -0,0 +1 @@
+FRONTEND_URL=

examples/angular/template-hierarchy-data-fetching/example-app/src/main.server.ts

@@ -1,7 +1,5 @@
-import { bootstrapApplication } from '@angular/platform-browser';
+import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser';
 import { App } from './app/app';
 import { config } from './app/app.config.server';
-
-const bootstrap = () => bootstrapApplication(App, config);
-
-export default bootstrap;
+const bootstrap = (context: BootstrapContext) => bootstrapApplication(App, config, context);
+export default bootstrap;

examples/angular/template-hierarchy-data-fetching/package.json

@@ -20,6 +20,6 @@
     "wp:uploads:zip": "zip -r wp-env/uploads.zip wp-env/uploads"
   },
   "devDependencies": {
-    "@wordpress/env": "^10.21.0"
+    "@wordpress/env": "^10.34.0"
   }
 }