|
| 1 | +# CLAUDE.md |
| 2 | + |
| 3 | +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. |
| 4 | + |
| 5 | +## Repository Overview |
| 6 | + |
| 7 | +This is a **tutorial repository** demonstrating the **CAT (Client, API Resource, Token Service)** pattern using Git submodules. Each component is a separate repository that can be developed independently. |
| 8 | + |
| 9 | +**Tutorial Repository**: https://github.com/workcontrolgit/AngularNetTutotial.git |
| 10 | + |
| 11 | +## Architecture: CAT Pattern with Git Submodules |
| 12 | + |
| 13 | +### Three-Tier Architecture |
| 14 | + |
| 15 | +``` |
| 16 | +AngularNetTutorial/ |
| 17 | +├── Clients/TalentManagement-Angular-Material/ # Git submodule |
| 18 | +├── ApiResources/TalentManagement-API/ # Git submodule |
| 19 | +└── TokenService/Duende-IdentityServer/ # Git submodule |
| 20 | +``` |
| 21 | + |
| 22 | +Each folder is a **git submodule** pointing to its own repository: |
| 23 | +- `Clients/`: Angular 20 + Material Design client (ng-matero template) |
| 24 | +- `ApiResources/`: .NET 10 Web API with Clean Architecture |
| 25 | +- `TokenService/`: Duende IdentityServer 7.0 for OAuth 2.0/OIDC |
| 26 | + |
| 27 | +### Authentication Flow |
| 28 | + |
| 29 | +1. User visits Angular app (`http://localhost:4200`) |
| 30 | +2. Login redirects to IdentityServer (`https://localhost:44310`) |
| 31 | +3. IdentityServer authenticates user, issues ID token + access token |
| 32 | +4. Angular stores tokens, attaches access token to API requests |
| 33 | +5. API validates token against IdentityServer, returns protected data |
| 34 | + |
| 35 | +## Running the Full Stack |
| 36 | + |
| 37 | +**Start all three services in this order:** |
| 38 | + |
| 39 | +```bash |
| 40 | +# Terminal 1: IdentityServer (must start first) |
| 41 | +cd TokenService/Duende-IdentityServer/src/Duende.STS.Identity |
| 42 | +dotnet run |
| 43 | + |
| 44 | +# Terminal 2: API (needs IdentityServer running) |
| 45 | +cd ApiResources/TalentManagement-API |
| 46 | +dotnet run |
| 47 | + |
| 48 | +# Terminal 3: Angular Client |
| 49 | +cd Clients/TalentManagement-Angular-Material/talent-management |
| 50 | +npm start |
| 51 | +``` |
| 52 | + |
| 53 | +**Application URLs:** |
| 54 | +- Angular: `http://localhost:4200` |
| 55 | +- API: `https://localhost:44378` |
| 56 | +- IdentityServer: `https://localhost:44310` |
| 57 | +- IdentityServer Admin: `https://localhost:44303` |
| 58 | +- IdentityServer Admin API: `https://localhost:44302` |
| 59 | + |
| 60 | +## Working with Git Submodules |
| 61 | + |
| 62 | +### Initial Clone |
| 63 | + |
| 64 | +```bash |
| 65 | +# Clone with all submodules |
| 66 | +git clone --recurse-submodules https://github.com/workcontrolgit/AngularNetTutotial.git |
| 67 | + |
| 68 | +# Or initialize submodules after cloning |
| 69 | +git submodule update --init --recursive |
| 70 | +``` |
| 71 | + |
| 72 | +### Making Changes in a Submodule |
| 73 | + |
| 74 | +**Critical**: Submodules have their own Git history. Changes must be committed in the submodule first, then the parent. |
| 75 | + |
| 76 | +```bash |
| 77 | +# 1. Navigate to submodule and make changes |
| 78 | +cd Clients/TalentManagement-Angular-Material |
| 79 | +git checkout develop # or appropriate branch |
| 80 | +# ... make your changes ... |
| 81 | +git add . |
| 82 | +git commit -m "Your changes" |
| 83 | +git push |
| 84 | + |
| 85 | +# 2. Return to parent and update reference |
| 86 | +cd ../.. |
| 87 | +git add Clients/TalentManagement-Angular-Material |
| 88 | +git commit -m "Update Angular client submodule" |
| 89 | +git push |
| 90 | +``` |
| 91 | + |
| 92 | +### Pulling Latest Changes |
| 93 | + |
| 94 | +```bash |
| 95 | +# Pull parent repo changes |
| 96 | +git pull |
| 97 | + |
| 98 | +# Update all submodules to their referenced commits |
| 99 | +git submodule update --init --recursive |
| 100 | + |
| 101 | +# OR pull latest from submodule's remote branch |
| 102 | +git submodule update --remote --merge |
| 103 | +``` |
| 104 | + |
| 105 | +### Check Submodule Status |
| 106 | + |
| 107 | +```bash |
| 108 | +git submodule status |
| 109 | +# Shows current commit hash for each submodule |
| 110 | +``` |
| 111 | + |
| 112 | +### Common Submodule Issues |
| 113 | + |
| 114 | +**Submodule shows modified but you didn't change anything:** |
| 115 | +- Submodule is on a different commit than parent expects |
| 116 | +- Navigate to submodule: `cd Clients/TalentManagement-Angular-Material` |
| 117 | +- Check status: `git status` and `git log` |
| 118 | +- Reset to parent's expected commit or commit the change |
| 119 | + |
| 120 | +**Submodule folder is empty:** |
| 121 | +```bash |
| 122 | +git submodule update --init --recursive |
| 123 | +``` |
| 124 | + |
| 125 | +## Configuration Dependencies |
| 126 | + |
| 127 | +### IdentityServer Configuration |
| 128 | + |
| 129 | +**File**: `TokenService/Duende-IdentityServer/src/Duende.Admin/identityserverdata.json` |
| 130 | + |
| 131 | +Key configuration for Angular client: |
| 132 | +```json |
| 133 | +{ |
| 134 | + "ClientId": "TalentManagement", |
| 135 | + "AllowedScopes": [ |
| 136 | + "openid", |
| 137 | + "email", |
| 138 | + "profile", |
| 139 | + "roles", |
| 140 | + "app.api.talentmanagement.read", |
| 141 | + "app.api.talentmanagement.write" |
| 142 | + ], |
| 143 | + "RedirectUris": ["http://localhost:4200/callback"], |
| 144 | + "PostLogoutRedirectUris": ["http://localhost:4200"] |
| 145 | +} |
| 146 | +``` |
| 147 | + |
| 148 | +### Angular Environment Configuration |
| 149 | + |
| 150 | +**File**: `Clients/TalentManagement-Angular-Material/talent-management/src/environments/environment.ts` |
| 151 | + |
| 152 | +Must match IdentityServer configuration: |
| 153 | +```typescript |
| 154 | +identityServerUrl: 'https://localhost:44310' |
| 155 | +clientId: 'TalentManagement' |
| 156 | +scope: 'openid profile email roles app.api.talentmanagement.read app.api.talentmanagement.write' |
| 157 | +``` |
| 158 | + |
| 159 | +### API Configuration |
| 160 | + |
| 161 | +**File**: `ApiResources/TalentManagement-API/appsettings.json` |
| 162 | + |
| 163 | +Must trust IdentityServer: |
| 164 | +```json |
| 165 | +{ |
| 166 | + "IdentityServer": { |
| 167 | + "Authority": "https://localhost:44310" |
| 168 | + } |
| 169 | +} |
| 170 | +``` |
| 171 | + |
| 172 | +## Development Workflow |
| 173 | + |
| 174 | +### Branching Strategy |
| 175 | + |
| 176 | +Parent repository tracks submodule commits, not branches. Each submodule has its own branch strategy: |
| 177 | +- Angular: Uses `develop` and `master` branches |
| 178 | +- API: Check submodule for branch strategy |
| 179 | +- IdentityServer: Check submodule for branch strategy |
| 180 | + |
| 181 | +### Testing Changes Across Multiple Submodules |
| 182 | + |
| 183 | +When changes span multiple components (e.g., new API endpoint + Angular UI): |
| 184 | + |
| 185 | +1. Make changes in API submodule, commit, push |
| 186 | +2. Make changes in Angular submodule, commit, push |
| 187 | +3. Update parent repo to reference both new commits |
| 188 | +4. Test the integration locally before pushing parent |
| 189 | + |
| 190 | +### Port Conflicts |
| 191 | + |
| 192 | +If ports are already in use: |
| 193 | +- **IdentityServer**: Edit `Properties/launchSettings.json` |
| 194 | +- **API**: Edit `Properties/launchSettings.json` |
| 195 | +- **Angular**: Use `ng serve --port 4201` or edit `angular.json` |
| 196 | + |
| 197 | +## Component-Specific Documentation |
| 198 | + |
| 199 | +Each submodule has its own documentation: |
| 200 | + |
| 201 | +### Angular Client Documentation |
| 202 | +- `Clients/TalentManagement-Angular-Material/docs/claude-code-guide.md` - Comprehensive development guide |
| 203 | +- `Clients/TalentManagement-Angular-Material/docs/` - Feature plans, implementation guides |
| 204 | + |
| 205 | +### API Documentation |
| 206 | +- Check `ApiResources/TalentManagement-API/` for API-specific documentation |
| 207 | + |
| 208 | +### IdentityServer Documentation |
| 209 | +- Check `TokenService/Duende-IdentityServer/` for IdentityServer configuration guides |
| 210 | + |
| 211 | +## Common Development Tasks |
| 212 | + |
| 213 | +### Adding a New API Scope |
| 214 | + |
| 215 | +1. Update `TokenService/.../identityserverdata.json` with new scope |
| 216 | +2. Restart IdentityServer |
| 217 | +3. Update Angular `environment.ts` scope string |
| 218 | +4. Update API to protect endpoints with `[Authorize]` requiring the scope |
| 219 | + |
| 220 | +### Troubleshooting Authentication Issues |
| 221 | + |
| 222 | +Common issue: **"invalid_scope" error** |
| 223 | +- Cause: Angular requests a scope not in IdentityServer's `AllowedScopes` |
| 224 | +- Fix: Ensure `environment.ts` scope matches `identityserverdata.json` exactly |
| 225 | + |
| 226 | +Common issue: **Angular stuck at login page after successful auth** |
| 227 | +- Cause: Auth guard using wrong authentication service |
| 228 | +- Fix: Verify `auth-guard.ts` uses `OidcAuthService.isAuthenticated()` |
| 229 | + |
| 230 | +Common issue: **CORS errors** |
| 231 | +- Cause: IdentityServer URL mismatch |
| 232 | +- Fix: Ensure `environment.ts` identityServerUrl matches running IdentityServer URL |
| 233 | + |
| 234 | +### Verifying Full Stack Integration |
| 235 | + |
| 236 | +1. Start all three services |
| 237 | +2. Navigate to `http://localhost:4200` |
| 238 | +3. Click login → should redirect to IdentityServer |
| 239 | +4. Login with test credentials |
| 240 | +5. Should redirect back to Angular dashboard |
| 241 | +6. API calls should work (check Network tab for 200 responses with Bearer token) |
0 commit comments