mcpField
A
angular-standalone

angular-standalone

github.com/oguzhan18开发7189 次安装31 周前更新
代码仓库

关于 angular-standalone

用于使用独立组件构建 Angular 应用的开发指南，涵盖组件依赖、应用启动、函数式提供器、路由、延迟加载及从 NgModule 迁移。

主要功能

  1. 01创建独立组件
  2. 02在 imports 数组中声明依赖
  3. 03使用 bootstrapApplication 启动应用
  4. 04配置函数式提供器和路由
  5. 05延迟加载独立组件
  6. 06从 NgModule 迁移

适用场景

  1. 01构建不依赖 NgModule 组件的 Angular 应用
  2. 02为独立组件应用配置路由
  3. 03按需加载功能组件
  4. 04使用迁移工具转换现有组件

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-standalone

安装后在 Claude Code 中输入/angular-standalone确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

详细介绍

Angular 独立组件

版本： Angular 21（2025） 标签： 独立、组件、导入、启动

参考： 独立组件指南 • 迁移

API 变更

本节介绍近期特定版本的 API 变更。

  • 新增：默认采用独立模式 — 自 Angular 17 起，新组件默认采用独立模式

  • 新增：用于独立模式的 provideRouter — 使用函数式提供程序替代 RouterModule

  • 新增：ng generate @angular/core:standalone — 迁移原理图

  • 已弃用：NgModule — 建议迁移到独立组件

最佳实践

  • 创建独立组件
@Component({
  standalone: true,
  imports: [CommonModule, MatButtonModule],
  selector: 'app-my',
  template: `<button>Click</button>`
})
export class MyComponent {}
  • 使用 imports 数组添加依赖
@Component({
  standalone: true,
  imports: [
    CommonModule,
    RouterModule,
    MatCardModule,
    MyChildComponent
  ],
  template: `
    <mat-card>
      <app-my-child></app-my-child>
    </mat-card>
  `
})
export class ParentComponent {}
  • 启动独立组件
// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));
  • 使用函数式提供程序
export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideAnimations()
  ]
};
  • 使用 provideZoneChangeDetection
export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true })
  ]
};
  • 从 NgModule 迁移
# Full migration
ng generate @angular/core:standalone

# Specific component
ng generate @angular/core:standalone --path=path/to/component
  • 在独立模式下使用 Router Outlet
@Component({
  standalone: true,
  imports: [RouterOutlet],
  template: `<router-outlet></router-outlet>`
})
export class AppComponent {}
  • 延迟加载独立组件
const routes: Routes = [
  {
    path: 'admin',
    loadComponent: () => import('./admin/admin.component').then(m => m.AdminComponent)
  }
];
  • 使用 forwardRef 处理循环导入
@Component({
  standalone: true,
  imports: [forwardRef(() => OtherComponent)]
})
export class MyComponent {}
  • 导出独立组件
@Component({
  standalone: true,
  exports: [MyComponent],
  imports: [MyComponent]
})
export class FeatureComponent {}

评论

支持 Markdown