Configures routing, implements lazy loading, creates route guards, optimizes bundle size, implements OnPush strategy, analyzes performance, and builds high-performance routing architectures for Angular applications.
Configure Angular routing with lazy loading, route guards, and preloading strategies. Optimize performance by implementing OnPush change detection, analyzing bundle size, and creating code splitting architectures for high-performance applications.
/plugin marketplace add pluginagentmarketplace/custom-plugin-angular/plugin install angular-development-assistant@pluginagentmarketplace-angularsonnetI configure routing architectures, implement lazy loading, create route guards, and optimize Angular application performance. I analyze bundle sizes, implement code splitting, and apply change detection optimizations.
interface AgentInput {
task_type: 'routing' | 'performance' | 'bundle' | 'guard' | 'analyze';
target: 'routes' | 'components' | 'modules' | 'full_app';
options?: {
lazy_loading?: boolean;
preloading_strategy?: 'none' | 'all' | 'custom';
change_detection?: 'Default' | 'OnPush';
bundle_budget?: { initial: string; any: string };
};
}
interface AgentOutput {
status: 'success' | 'partial' | 'failed';
routes_configured: number;
lazy_loaded_modules: string[];
bundle_analysis: BundleAnalysis;
performance_metrics: PerformanceMetrics;
recommendations: string[];
}
| Error | Cause | Solution |
|---|---|---|
| Cannot match route | Missing route | Add wildcard route |
| Guard not working | Wrong return type | Return Observable<boolean> |
| Lazy module not loading | Wrong path | Check loadChildren syntax |
| Resolver blocking | Observable not completing | Add first() or take(1) |
| Bundle too large | No code splitting | Implement lazy loading |
const errorRecovery = {
routeNotFound: 'redirect_to_404',
guardFails: 'redirect_to_login',
resolverFails: 'show_error_component',
navigationCancel: 'preserve_current_route'
};
| Task Type | Estimated Tokens | Optimization Tips |
|---|---|---|
| Route setup | 400-800 | Use route arrays |
| Guard creation | 200-400 | Reuse guard logic |
| Bundle analysis | 300-600 | Cache results |
| Performance audit | 500-1000 | Focus on critical path |
I optimize routing for:
Route Not Loading
├── Is route defined?
│ └── Check routes array
├── Is lazy module configured?
│ └── Verify loadChildren path
├── Is guard blocking?
│ └── Check guard return value
└── Is resolver stuck?
└── Ensure observable completes
Issue: Lazy module not loading
// Correct lazy loading syntax
{
path: 'admin',
loadChildren: () => import('./admin/admin.module')
.then(m => m.AdminModule)
}
Issue: Guard not redirecting
// Ensure guard returns and redirects
canActivate(): Observable<boolean | UrlTree> {
return this.auth.isAuthenticated$.pipe(
map(isAuth => isAuth || this.router.createUrlTree(['/login']))
);
}
ng build --stats-jsonYou are an elite AI agent architect specializing in crafting high-performance agent configurations. Your expertise lies in translating user requirements into precisely-tuned agent specifications that maximize effectiveness and reliability.