angular-academy-devs/01.html

## 01.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>MyAppShell</title>
    <base href="/">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link href="styles.d41d8cd98f00b204e980.bundle.css" rel="stylesheet"/>
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.7af73d884e232b8a88bd.bundle.js"></script>
<script type="text/javascript" src="polyfills.169c804fcec855447ce7.bundle.js"></script>
<script type="text/javascript" src="main.cd226be56c6c7ccae88d.bundle.js"></script>
</body>
</html>


## 02.ts
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
     ..  main navigation menu of the application ...
</ul>

<router-outlet></router-outlet>


## 03.ts

@Component({
    selector: 'app-app-shell',
    template: `
      <img class="loading-indicator" src="loading.gif">
  `,
    styles: [`
      .loading-indicator {
          height: 300px;
          margin: 0 auto;
      }
  `]
})
export class AppShellComponent {

}

## 04.ts

"app-shell": {
  "builder": "@angular-devkit/build-angular:app-shell",
  "options": {
   "browserTarget": "my-app-name:build",
   "serverTarget": "my-app-name:server",
   "route": "app-shell-path"
  }
}

## 05.ts

const routes: Routes = [{
    path: 'app-shell-path',
    component: AppShellComponent
}];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }


## 06.ts

const routes: Routes = [ { path: 'app-shell-path', component: AppShellComponent }];

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    RouterModule.forRoot(routes),
  ],
  bootstrap: [AppComponent],
  declarations: [AppShellComponent],
})
export class AppServerModule {}

## 07.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>MyAppShell</title>
    <base href="/">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="styles.d41d8cd98f00b204e980.bundle.css" rel="stylesheet">
    <style ng-transition="serverApp"></style>
    <style ng-transition="serverApp">.loading-indicator[_ngcontent-c1] {
        height: 300px;
        margin: 0 auto;
    }</style>
</head>
<body>
<app-root _nghost-c0="" ng-version="5.1.0">
    <div _ngcontent-c0="" style="text-align:center">
        <h1 _ngcontent-c0="">Welcome to app! </h1>
        <img _ngcontent-c0="" alt="Angular Logo" src=".." width="300">
    </div>
    <h2 _ngcontent-c0="">Here are some links to help you start: </h2>
    <ul _ngcontent-c0="">
        <li _ngcontent-c0="">
            <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://angular.io/tutorial">Tourof Heroes</a></h2>
        </li>
        <li _ngcontent-c0="">
            <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
        </li>
        <li _ngcontent-c0="">
            <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://blog.angular.io/">Angular blog</a></h2>
        </li>
    </ul>

    <router-outlet _ngcontent-c0=""></router-outlet>

    <app-app-shell _nghost-c1="">
        <img _ngcontent-c1="" class="loading-indicator" src="loading.gif">
    </app-app-shell>
</app-root>
<script type="text/javascript" src="inline.7f492b32ad91aff5b9d4.bundle.js"></script>
<script type="text/javascript" src="polyfills.169c804fcec855447ce7.bundle.js"></script>
<script type="text/javascript" src="main.4b438877429c33fe644e.bundle.js"></script>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>MyAppShell</title>
	<base href="/">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	<link href="styles.d41d8cd98f00b204e980.bundle.css" rel="stylesheet"/>
	</head>
	<body>
	<app-root></app-root>
	<script type="text/javascript" src="inline.7af73d884e232b8a88bd.bundle.js"></script>
	<script type="text/javascript" src="polyfills.169c804fcec855447ce7.bundle.js"></script>
	<script type="text/javascript" src="main.cd226be56c6c7ccae88d.bundle.js"></script>
	</body>
	</html>
	<div style="text-align:center">
	<h1>
	Welcome to {{ title }}!
	</h1>
	<img width="300" alt="Angular Logo">
	</div>
	<h2>Here are some links to help you start: </h2>
	<ul>
	.. main navigation menu of the application ...
	</ul>

	<router-outlet></router-outlet>

	@Component({
	selector: 'app-app-shell',
	template: `
	<img class="loading-indicator" src="loading.gif">
	`,
	styles: [`
	.loading-indicator {
	height: 300px;
	margin: 0 auto;
	}
	`]
	})
	export class AppShellComponent {

	}

	"app-shell": {
	"builder": "@angular-devkit/build-angular:app-shell",
	"options": {
	"browserTarget": "my-app-name:build",
	"serverTarget": "my-app-name:server",
	"route": "app-shell-path"
	}
	}

	const routes: Routes = [{
	path: 'app-shell-path',
	component: AppShellComponent
	}];

	@NgModule({
	imports: [RouterModule.forRoot(routes)],
	exports: [RouterModule]
	})
	export class AppRoutingModule { }

	const routes: Routes = [ { path: 'app-shell-path', component: AppShellComponent }];

	@NgModule({
	imports: [
	AppModule,
	ServerModule,
	RouterModule.forRoot(routes),
	],
	bootstrap: [AppComponent],
	declarations: [AppShellComponent],
	})
	export class AppServerModule {}