Install Angular in DDEV

1. **Navigate to Your DDEV Project**: Open your terminal and go to your DDEV project directory.

2. **Start Your DDEV Environment**: If you haven't already, start your DDEV environment with:

ddev start

3. **Enter the Web Container**: Access the web container to install Angular CLI:

ddev ssh

4. **Install Node.js and npm**: Make sure you have Node.js and npm installed. DDEV should have these installed already, but you can check their versions with:

node -v
   npm -v

If Node.js is not installed, you can install it using the package manager. For example, to install Node.js using `nvm` (Node Version Manager), you can run:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
   source ~/.nvm/nvm.sh
   nvm install node

5. **Install Angular CLI**: Once you're in the web container, install the Angular CLI globally:

npm install -g @angular/cli

6. **Create an Angular Application**: Navigate to the directory where you want to create your Angular app. You can create a new Angular project by running:

ng new my-angular-app

Follow the prompts to set up your Angular project.

7. **Serve Your Angular Application**: Change to your newly created Angular app directory:

cd my-angular-app

Then, serve your application:

ng serve --host 0.0.0.0 --port 4200

8. **Access Your Angular App**: Open your browser and navigate to `http://.ddev.site:4200` to see your Angular app running.

That's it! You should now have Angular installed and running in your DDEV environment. If you have any questions or encounter issues, feel free to ask!

### 1. Set Up Your Laravel Project

If you haven't already created a Laravel project, you can create one in your DDEV environment:

ddev ssh
composer create-project --prefer-dist laravel/laravel my-laravel-app

### 2. Navigate to Your Laravel Project

Exit the DDEV shell (if you're still in it) and then navigate to your Laravel project directory:

cd my-laravel-app

### 3. Start Your DDEV Environment

If your DDEV environment isn't already running, start it:

ddev start

### 4. Install Angular CLI

Enter the DDEV web container:

ddev ssh

Now, install Angular CLI globally:

npm install -g @angular/cli

### 5. Create an Angular Application

Create a new Angular application inside your Laravel project directory. You can place it in a subdirectory (like `frontend`) to keep things organized:

ng new frontend --routing --style=scss

Follow the prompts to set up your Angular project.

### 6. Serve Your Angular Application

Change into the Angular app directory:

cd frontend

Serve your Angular application:

ng serve --host 0.0.0.0 --port 4200

### 7. Access Your Angular App

Open your browser and go to:

http://<your-ddev-project-name>.ddev.site:4200

You should see your Angular application running.

### 8. Set Up API Routes in Laravel

To connect your Angular app with your Laravel backend, you can set up API routes in Laravel. Open `routes/api.php` and define your API routes. For example:

use IlluminateHttpRequest;
use IlluminateSupportFacadesRoute;

Route::get('/data', function () {
    return response()->json(['message' => 'Hello from Laravel!']);
});

### 9. Make HTTP Requests from Angular

In your Angular application, you can make HTTP requests to your Laravel API. For example, in one of your Angular components:

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent implements OnInit {
  data: any;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('http://<your-ddev-project-name>.ddev.site/api/data')
      .subscribe(response => {
        this.data = response;
      });
  }
}

### 10. Configure CORS (if necessary)

If you encounter CORS issues when your Angular app tries to communicate with the Laravel API, you may need to configure CORS in your Laravel application. You can use the `fruitcake/laravel-cors` package to handle CORS.

1. Install the package:

composer require fruitcake/laravel-cors

2. Configure it in `config/cors.php` to allow requests from your Angular app.

### 11. Build Your Angular App for Production (Optional)

When you're ready to deploy your Angular application, you can build it for production:

cd frontend
ng build --prod

This will create a `dist` folder containing your compiled Angular files, which you can serve from Laravel or deploy as needed.

—

That's it! You now have an Angular application integrated with a Laravel backend running in a DDEV environment. If you have any questions or need further assistance, feel free to ask!