This document discusses Angular standalone components, which were introduced in Angular 14 developer preview. Standalone components can be defined with the standalone: true flag, and import other modules, components, directives and pipes directly without needing NgModules. This allows for a more intuitive and lightweight development approach compared to traditional NgModules. Some key benefits mentioned are faster build times, smaller bundle sizes, and easier finding of components through direct imports. Examples are provided of defining and using standalone components. Readers are directed to the Angular documentation for more details on this new feature.

1. Taipei
Mike Huang
多奇數位創意有限公司
使用 Standalone Component
來寫 Angular 吧！

2. About Me
● Title
○ 多奇數位創意有限公司
○ Angular GDE
○ Microsoft MVP
● Awards
○ 2018 iT 邦幫忙鐵人賽 冠軍
○ 2019 iT 邦幫忙鐵人賽 優選
○ 第 12 屆 iThome 鐵人賽 冠軍
● 著作：打通 RxJS 任督二脈
https://github.com/wellwind
https://www.facebook.com/fullstackledder
https://fullstackladder.dev
https://www.tenlong.com.tw/products/9789864348039

3. 先回憶一下使用
＠NgModule 的感覺

4. @NgModule({
declarations: [
AppComponent,
LayoutComponent
],
imports: [
BrowserModule,
AnotherModule,
TodoListModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }
@NgModule({
declarations: [
TodoListComponent,
TodoItemComponent,
TodoTextPipe,
TodoDoneDirective
],
imports: [
CommonModule
],
exports: [
TodoListComponent
]
})
export class TodoListModule { }

5. @Component({
selector: 'app-root',
template: '<app-todo-list></app-todo-list>'
})
export class AppComponent { }
如何找到 <app-todo-list></app-todo-list> 元件？

6. @Component({
selector: 'app-root',
template: '<app-todo-list></app-todo-list>'
})
export class AppComponent { }
如何找到 <app-todo-list></app-todo-list> 元件？
@NgModule({
declarations: [
AppComponent,
LayoutComponent
],
imports: [
BrowserModule,
AnotherModule,
TodoListModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }
1
2
@NgModule({
declarations: [
TodoListComponent,
TodoItemComponent,
TodoTextPipe,
TodoDoneDirective
],
imports: [
CommonModule
],
exports: [
TodoListComponent
]
})
export class TodoListModule { }
3
4

8. Angular Standalone
Components / Directives / Pipes

9. Standalone Components / Directives / Pipes
● Angular 14 推出 Developer Preview
● Angular 15 正式宣告 stable
● 在 @Component、@Directive、＠Pipe 加上 standalone: true 即可！
● Standalone 程式本身即可用 imports: [] 匯入
○ 其他的 @NgModule
○ 其他的 Standalone 程式
● 有 @NgModule 的概念，但又不用管 @NgModule
● 更加直覺、簡單的開發方式
● 打包速度更快、產出檔案更小

10. @Component({
standalone: true,
selector: 'app-root',
...
})
export class AppComponent { }
• 加上 standalone: true 就對了！
• 在 @Directive / @Pipe 上一樣適用

11. @Component({
standalone: true,
selector: 'app-todo-list',
imports: [
CommonModule
],
template: `
<ul *ngFor="...">
<li>...</li>
</ul>
`
})
export class TodoListComponent { }
@Component({
standalone: true,
selector: 'app-root',
...
})
export class AppComponent { }
準備一個 standalone component
ng generate component [name] --standalone
imports: [] 可加入其他 @NgModule

12. @Component({
standalone: true,
selector: 'app-root',
imports: [
NgIf
TodoListComponent
],
template: `
<app-todo-list>
</app-todo-list>
`
})
export class AppComponent { }
@Component({
standalone: true,
selector: 'app-todo-list',
imports: [
CommonModule
],
template: `
<ul *ngFor="...">
<li>...</li>
</ul>
`
})
export class TodoListComponent { }
NgIf、NgFor 等 directives 現在也都是 standalone 了！

13. @Component({
standalone: true,
selector: 'app-root',
imports: [
TodoListComponent
],
template: `
<app-todo-list>
</app-todo-list>
`
})
export class AppComponent { }
@Component({
standalone: true,
selector: 'app-todo-list',
imports: [
CommonModule
],
template: `
<ul *ngFor="...">
<li>...</li>
</ul>
`
})
export class TodoListComponent { }
standalone component 可以放入
另外一個 standalone component 的 imoprts: [] 中

14. @Component({
standalone: true,
selector: 'app-root',
imports: [
NgIf,
TodoListComponent
],
template: `
<app-todo-list *ngIf="...">
</app-todo-list>
`
})
export class AppComponent { }
如何找到 <app-todo-list></app-todo-list> 元件？
1 抬頭就找到！

15. 需要什麼再匯入什麼
就。很。剛剛好。

16. 更多重點都在文件裡
https://angular.io/guide/standalone-components

17. DEMO

18. Resources
● 搶先體驗 Standalone Components / Directives / Pipes
● RFC: Standalone APIs
● Getting started with standalone components