angular-academy-devs · May 18, 2018 12:28
diff --git a/01.html b/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>
      
      
diff --git a/02.ts b/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>

  
diff --git a/03.ts b/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 {
    
 }
diff --git a/04.ts b/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"          
  }
 }
diff --git a/05.ts b/05.ts

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

 @NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
 })
 export class AppRoutingModule { }
diff --git a/06.ts b/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 {}
diff --git a/07.html b/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 {}