App shell kalıbı

App shell kalıbı, derleme zamanında bir rota kullanarak uygulamanızın bir bölümünü render etmenin bir yoludur. Tarayıcı istemcinin tam sürümünü indirirken ve kod yüklendikten sonra otomatik olarak ona geçerken, hızlıca statik olarak render edilmiş bir sayfa (tüm sayfalarda ortak olan bir iskelet) başlatarak kullanıcı deneyimini iyileştirebilir.

Bu, kullanıcılara uygulamanızın anlamlı bir ilk çizimini hızlıca sunar çünkü tarayıcı herhangi bir JavaScript başlatmaya gerek kalmadan HTML ve CSS'i render edebilir.

Bu sayfada
Uygulamayı hazırlayın

Bunu aşağıdaki Angular CLI komutuyla yapın:
```
ng new my-app
```
Mevcut bir uygulama için Router'ı manuel olarak eklemeniz ve uygulamanız içinde bir <router-outlet> tanımlamanız gerekir.
Uygulama kabuğunu oluşturun

Uygulama kabuğunu otomatik olarak oluşturmak için Angular CLI'yi kullanın.
```
ng generate app-shell
```
Bu komut hakkında daha fazla bilgi için App shell komutu sayfasına bakın.

Komut, uygulama kodunu günceller ve proje yapısına ekstra dosyalar ekler.
```
src
├── app
│ ├── app.config.server.ts # sunucu uygulama yapılandırması
│ └── app-shell # app-shell bileşeni
│   ├── app-shell.component.html
│   ├── app-shell.component.scss
│   ├── app-shell.component.spec.ts
│   └── app-shell.component.ts
└── main.server.ts # ana sunucu uygulama başlatma
```
```
ng build --configuration=development
```
Veya üretim yapılandırmasını kullanmak için.
```
ng build
```
Derleme çıktısını doğrulamak için dist/my-app/browser/index.html dosyasını açın. Uygulama kabuğu rotasının çıktının bir parçası olarak render edildiğini göstermek için varsayılan app-shell works! metnini arayın.

Uygulamayı hazırlayın

Uygulama kabuğunu oluşturun