# Troubleshooting

### Common Issues

#### 1. **Cannot connect to API**
**Symptom:** API calls fail with connection errors

**Solution:**
- Check API endpoints in `src/app/addrezz.ts`
- Verify API server is running
- Check CORS configuration on API server
- Verify network connectivity

#### 2. **Authentication fails after page refresh**
**Symptom:** User logged out after page refresh

**Solution:**
- Check JWT token in localStorage (browser DevTools)
- Verify token expiration
- Ensure `AuthGuard` is properly validating tokens
- Check `guardianTokens()` API endpoint

#### 3. **Lazy-loaded module not found**
**Symptom:** Error when navigating to a route

**Solution:**
- Verify module path in `app.routing.ts`
- Check module export in feature module
- Run `ng build` to check for compilation errors
- Clear browser cache and rebuild

#### 4. **Styling issues**
**Symptom:** Components not displaying correctly

**Solution:**
- Check Bootstrap and Material imports in `angular.json`
- Verify CSS files are imported in `styles.css`
- Clear browser cache
- Check for CSS conflicts

#### 5. **Build errors**
**Symptom:** Build fails with TypeScript errors

**Solution:**
- Run `npm install` to ensure dependencies are installed
- Check TypeScript version compatibility
- Fix TypeScript errors reported by compiler
- Clear `node_modules` and reinstall: `rm -rf node_modules && npm install`

#### 6. **Performance issues**
**Symptom:** Application is slow or unresponsive

**Solution:**
- Enable production mode build
- Check for memory leaks (unsubscribed Observables)
- Optimize large lists with virtual scrolling
- Lazy load heavy components
- Profile with Chrome DevTools Performance tab

### Debugging Tips

#### 1. **Browser DevTools**
- Use Console to check for JavaScript errors
- Use Network tab to inspect API calls
- Use Application tab to view localStorage
- Use Performance tab to profile application

#### 2. **Angular DevTools**
Install Angular DevTools Chrome extension:
- Inspect component tree
- View component properties
- Profile change detection
- Debug performance issues

#### 3. **Enable Source Maps**
For production debugging, build with source maps:
```bash
ng build --source-map
```

#### 4. **Logging**
Add console logging for debugging:
```typescript
console.log('Debug:', variable);
console.error('Error:', error);
```

### Getting Help

1. **Check Angular Documentation:** https://angular.io/docs
2. **Check Angular Material Documentation:** https://material.angular.io/
3. **Check Stack Overflow:** Tag questions with `angular` and `typescript`
4. **Review Application Logs:** Check browser console and network tab
5. **Contact Development Team:** For application-specific issues