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:

ng build --source-map

4. Logging

Add console logging for debugging:

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