Build and edit Angular 21 apps using standalone components without NgModules. Handles routing, lazy loading, guards, and component creation following modern Angular patterns.
This skill helps you work with modern Angular 21 applications that use standalone components without NgModules, focusing on routing, lazy loading, and component creation patterns.
This type of Angular app uses `bootstrapApplication` instead of NgModule-based bootstrapping. Key architectural elements:
When adding a new component:
1. Create the component file at `src/app/pages/<name>/<name>.ts`
2. Export a standalone component class:
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-<name>',
standalone: true,
templateUrl: './<name>.html',
styleUrl: './<name>.scss',
imports: [/* add dependencies here */]
})
export class <Name> {}
```
3. Create corresponding template (`.html`) and styles (`.scss`) files
4. The exported class name must match what you reference in the route
Add routes to `src/app/app.routes.ts` using the lazy-loading pattern:
```typescript
{
path: 'your-path',
loadComponent: () => import('../app/pages/<name>/<name>').then(m => m.<Name>)
}
```
For protected routes behind authentication:
```typescript
{
path: 'protected-path',
loadComponent: () => import('../app/pages/<name>/<name>').then(m => m.<Name>),
canActivate: [authGuard]
}
```
For routes with child routes (like shell layouts):
```typescript
{
path: 'app',
loadComponent: () => import('./core/layout/shell/shell').then(m => m.Shell),
canActivate: [authGuard],
children: [/* child routes */]
}
```
Follow these patterns consistently:
Auth guards are functional guards (not class-based):
```typescript
export const authGuard: CanActivateFn = (route, state) => {
// guard logic
return true; // or false, or redirect
};
```
Apply guards using `canActivate` array in route definitions.
Common commands:
When making changes, reference these paths:
1. **Symbol Naming**: Exported component class names must match the import expression in routes (`.then(m => m.ComponentName)`)
2. **No NgModules**: This app exclusively uses standalone components and `ApplicationConfig` providers
3. **Lazy Loading**: Use `loadComponent` pattern for all route components to maintain code-splitting
4. **Guard Signature**: When modifying guards, preserve the `CanActivateFn` functional signature
After making changes:
1. Run `npm start` to verify the dev server starts without errors
2. Navigate to affected routes to confirm they load correctly
3. Run `npm test` to verify tests pass
4. Check browser console for any runtime errors
To add a new "Profile" page under protected routes:
1. Create `src/app/pages/profile/profile.ts`:
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-profile',
standalone: true,
templateUrl: './profile.html',
styleUrl: './profile.scss'
})
export class Profile {}
```
2. Create `src/app/pages/profile/profile.html` and `src/app/pages/profile/profile.scss`
3. Add route to `src/app/app.routes.ts`:
```typescript
{
path: 'app/profile',
loadComponent: () => import('../app/pages/profile/profile').then(m => m.Profile),
canActivate: [authGuard]
}
```
This pattern ensures consistency with the existing codebase architecture.
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/angular-21-standalone-components-guide/raw