feat(AoT): ✨ ✨ added initial AoT support any many other things (#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>

Client/app/containers/chat/chat.component.html

@@ -1,4 +1,4 @@
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, Inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { SignalR, BroadcastEventListener, SignalRConnection } from 'ng2-signalr';

Client/app/containers/chat/chat.component.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../../node_modules/@types/jasmine/index.d.ts" />
+/// <reference path="../../../../node_modules/@types/jasmine/index.d.ts" />
 import { assert } from 'chai';
 import { CounterComponent } from './counter.component';
 import { TestBed, async, ComponentFixture } from '@angular/core/testing';

Client/app/containers/counter/counter.component.spec.ts

@@ -1,4 +1,4 @@
-
+
 <h1>{{ title }}</h1>
 
 <blockquote>
@@ -14,13 +14,13 @@ <h1>{{ title }}</h1>
     <div class="col-lg-6">
         <h2>What does this Starter offer? </h2>
         <ul>
-            <li>ASP.NET Core 1.0 :: ( Visual Studio 2017 )</li>
+            <li>ASP.NET Core 1.1 :: ( Visual Studio 2017 )</li>
             <li>
                 Angular 4.* front-end UI framework
                 <ul>
                     <li>Angular **platform-server** (Universal moved into Core here) - server-side rendering for SEO, deep-linking, and incredible performance.</li>
-                    <li>HMR State Management - Don't lose your applications state during HMR!</li>
-                    <li>AoT (Ahead-of-time) production compilation for even faster prod builds.</li>
+                    <!--<li>HMR State Management - Don't lose your applications state during HMR!</li>-->
+                    <li>AoT (Ahead-of-time) production compilation for even faster Prod builds.</li>
                 </ul>
             </li>
             <li>
@@ -36,7 +36,7 @@ <h2>What does this Starter offer? </h2>
                 Webpack 2
                 <ul>
                     <!--<li>TS2 aware path support</li>-->
-                    <li>Hot Module Reloading/Replacement for an amazing dev experience.</li>
+                    <li>Hot Module Reloading/Replacement for an amazing development experience.</li>
                     <li>Tree-shaking</li>
                 </ul>
             </li>

Client/app/containers/fetchdata/fetchdata.component.ts

@@ -0,0 +1,54 @@
+<h1>Ng2-bootstrap Demo:</h1>
+
+<blockquote>
+  <strong>Here we're using Bootstrap via <a href="https://github.com/valor-software/ng2-bootstrap">ng2-bootstrap</a>, which can even be rendered on the server!</strong>
+  <br>
+</blockquote>
+
+<hr>
+<br><br>
+
+<h3>Bootstrap Accordion demo:</h3>
+
+<p>
+  <button type="button" class="btn btn-primary btn-sm"
+          (click)="group.isOpen = !group.isOpen">
+    Toggle last panel
+  </button>
+  <button type="button" class="btn btn-primary btn-sm"
+          (click)="status.isFirstDisabled = ! status.isFirstDisabled">
+    Enable / Disable first panel
+  </button>
+</p>
+
+<div class="checkbox">
+  <label>
+    <input type="checkbox" [(ngModel)]="oneAtATime">
+    Open only one at a time
+  </label>
+</div>
+
+
+<accordion [closeOthers]="oneAtATime">
+  <accordion-group heading="Static Header, initially expanded"
+                   [isOpen]="status.isFirstOpen"
+                   [isDisabled]="status.isFirstDisabled">
+    This content is straight in the template.
+  </accordion-group>
+  <accordion-group *ngFor="let group of groups" [heading]="group.title">
+    {{ group?.content }}
+  </accordion-group>
+  <accordion-group heading="Dynamic Body Content">
+    <p>The body of the accordion group grows to fit the contents</p>
+    <button type="button" class="btn btn-primary btn-sm" (click)="addItem()">Add Item</button>
+    <div *ngFor="let item of items">{{item}}</div>
+  </accordion-group>
+  <accordion-group #group [isOpen]="status.open">
+    <div accordion-heading>
+      I can have markup, too!
+      <i class="pull-right glyphicon"
+         [ngClass]="{'glyphicon-chevron-down': group?.isOpen, 'glyphicon-chevron-right': !group?.isOpen}"></i>
+    </div>
+    This is just some content to illustrate fancy headings.
+  </accordion-group>
+</accordion>