feat(AoT): ✨ ✨ added initial AoT support any many other things (TrilonIO#151)

* wip - aot upgrade

currently facing issues like
angular/angular-cli#5802
cannot find browser-app.module.ngfactory

* feat(AoT): ✨ ✨ added initial AoT support any many other things

Added Bootstrap with SCSS / SASS support
Added ng2-bootstrap
Passing Server originURL so that URLs can use it (when 4.1 comes out
with HttpInterceptors this will be even easier to do)

✨ AoT added ! for prod (npm run build:aot)
- Still need to test this for Azure deployments etc

Removed es6-shim added core-js

Author: MarkPieszak

.editorconfig

@@ -0,0 +1,15 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

.gitignore

@@ -13,7 +13,9 @@
 *.userprefs
 
 # yarn
-.yarn.lock
+yarn.lock
+
+npm-debug.log.*
 
 # Build results
 [Dd]ebug/

Asp2017.csproj

@@ -20,6 +20,11 @@
     <!-- Files not to publish (note that the 'dist' subfolders are re-added below) -->
     <Content Remove="Client\**" />
   </ItemGroup>
+  <ItemGroup>
+    <Content Include="Client\tsconfig.browser.json" />
+    <Content Include="Client\tsconfig.server.aot.json" />
+    <Content Include="Client\tsconfig.server.json" />
+  </ItemGroup>
   <Target Name="RunWebpack" AfterTargets="ComputeFilesToPublish">
     <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
     <Exec Command="npm install" />

Client/app/app.component.css

@@ -0,0 +1,21 @@
+
+/* Import Bootstrap & Fonts */
+$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
+@import "~bootstrap-sass/assets/stylesheets/bootstrap";
+
+
+/* *** Overall APP Styling can go here ***
+   --------------------------------------------
+   Note: This Component has ViewEncapsulation.None so the styles will bleed out
+
+*/
+
+body { background: #f1f1f1; line-height: 18px; }
+ul { padding: 10px 25px; }
+ul li { padding: 5px 0; }
+
+h1 { border-bottom: 5px #4189C7 solid; }
+h1, h2, h3 { padding: 10px 0; }
+
+blockquote { margin: 25px 10px; padding: 10px 35px 10px 10px; border-left: 10px #158a15 solid; background: #edffed; }
+blockquote a, blockquote a:hover { color: #068006; }

Client/app/app.component.scss

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, Inject, ViewEncapsulation, RendererFactory2, PLATFORM_ID } from '@angular/core';
+import { Component, OnInit, OnDestroy, Inject, ViewEncapsulation, RendererFactory2, PLATFORM_ID } from '@angular/core';
 import { Router, NavigationEnd, ActivatedRoute, PRIMARY_OUTLET } from '@angular/router';
 import { Meta, Title, DOCUMENT, MetaDefinition } from '@angular/platform-browser';
 import { Subscription } from 'rxjs/Subscription';
@@ -8,7 +8,8 @@ import { LinkService } from './shared/link.service';
 @Component({
     selector: 'app',
     templateUrl: './app.component.html',
-    styleUrls: ['./app.component.css']
+    styleUrls: ['./app.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class AppComponent implements OnInit, OnDestroy {
 
@@ -17,16 +18,14 @@ export class AppComponent implements OnInit, OnDestroy {
     // If no Title is provided, we'll use a default one before the dash(-)
     private defaultPageTitle: string = 'My App';
 
-    private sub: Subscription;
-    private isServer: boolean = isPlatformServer(this.platform_id);
+    private routerSub$: Subscription;
 
     constructor(
-        public router: Router,
-        public activatedRoute: ActivatedRoute,
+        private router: Router,
+        private activatedRoute: ActivatedRoute,
         private title: Title,
         private meta: Meta,
-        private linkService: LinkService,
-        @Inject(PLATFORM_ID) private platform_id
+        private linkService: LinkService
     ) { }
 
     ngOnInit() {
@@ -37,12 +36,12 @@ export class AppComponent implements OnInit, OnDestroy {
 
     ngOnDestroy() {
         // Subscription clean-up
-        this.sub.unsubscribe();
+        this.routerSub$.unsubscribe();
     }
 
     private _changeTitleOnNavigation() {
 
-        this.sub = this.router.events
+        this.routerSub$ = this.router.events
             .filter(event => event instanceof NavigationEnd)
             .map(() => this.activatedRoute)
             .map(route => {

Client/app/app.component.ts

@@ -1,15 +1,18 @@
-import { NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { HttpModule } from '@angular/http';
 import { FormsModule } from '@angular/forms';
 
+import { Ng2BootstrapModule } from 'ng2-bootstrap';
+
 import { AppComponent } from './app.component';
 import { NavMenuComponent } from './components/navmenu/navmenu.component';
 import { HomeComponent } from './containers/home/home.component';
 import { UsersComponent } from './containers/users/users.component';
 import { CounterComponent } from './containers/counter/counter.component';
 import { ChatComponent } from './containers/chat/chat.component';
+import { Ng2BootstrapComponent } from './containers/ng2-bootstrap-demo/ng2bootstrap.component';
 
 import { LinkService } from './shared/link.service';
 import { ConnectionResolver } from './shared/route.resolver';
@@ -21,12 +24,15 @@ import { ConnectionResolver } from './shared/route.resolver';
         CounterComponent,
         UsersComponent,
         HomeComponent,
-        ChatComponent
+        ChatComponent,
+        Ng2BootstrapComponent
     ],
     imports: [
         CommonModule,
         HttpModule,
         FormsModule,
+        Ng2BootstrapModule.forRoot(), // You could also split this up if you don't want the Entire Module imported
+
         // App Routing
         RouterModule.forRoot([
             {
@@ -86,6 +92,18 @@ import { ConnectionResolver } from './shared/route.resolver';
                     ]
                 }
             },
+            {
+                path: 'ng2-bootstrap', component: Ng2BootstrapComponent,
+                data: {
+                    title: 'Ng2-bootstrap demo!!',
+                    meta: [{ name: 'description', content: 'This is an Demo Bootstrap page Description!' }],
+                    links: [
+                        { rel: 'canonical', href: 'http://blogs.example.com/bootstrap/something' },
+                        { rel: 'alternate', hreflang: 'es', href: 'http://es.example.com/bootstrap-demo' }
+                    ]
+                }
+            },
+
             // All else fails - go home!
             { path: '**', redirectTo: 'home' }
         ])

Client/app/app.module.ts

@@ -28,8 +28,8 @@ export function createConfig(): SignalRConfiguration {
         BrowserAnimationsModule,
         // Our Common AppModule
         AppModule,
-
-        SignalRModule.forRoot(() => createConfig())
+        
+        SignalRModule.forRoot(createConfig)
     ],
     providers: [
         {
@@ -39,5 +39,5 @@ export function createConfig(): SignalRConfiguration {
         }
     ]
 })
-export class AppBrowserModule {
+export class BrowserAppModule {
 }

Client/app/browser-app.module.ts

@@ -1,4 +1,4 @@
-<div class='main-nav'>
+<div class='main-nav'>
     <div class='navbar'>
         <div class='navbar-header'>
             <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
@@ -24,9 +24,14 @@
                 </li>
                 <li [routerLinkActive]="['link-active']">
                     <a [routerLink]="['/users']">
-                        <span class='glyphicon glyphicon-user'></span> Users
+                        <span class='glyphicon glyphicon-user'></span> REST API Demo
                     </a>
                 </li>
+              <li [routerLinkActive]="['link-active']">
+                <a [routerLink]="['/ng2-bootstrap']">
+                  <span class='glyphicon glyphicon-user'></span> ng2-Bootstrap demo
+                </a>
+              </li>
                 <!--<li [routerLinkActive]="['link-active']">
                     <a [routerLink]="['/chat']">
                         <span class='glyphicon glyphicon-comment'></span> Chat

Client/app/components/navmenu/navmenu.component.html

@@ -13,6 +13,7 @@ <h2>SignalR chat example</h2>
                         <!--<span chatMessage="chat-img pull-left">
                             <img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />
                         </span>-->
+
                         <div class="chat-body clearfix">
                             <div class="header">
                                 <strong class="primary-font">{{message.user}}</strong>