WIP - Re-sync with JavaScriptServices (#376)

* WIP - Re-sync with JavaScriptServices

Main goal is to re-align a bit more with JavaScriptServices to ensure
people coming from there, wanting to add additional features, have an
easier time syncing with this repo.

Adds back vendor builds,
Adds back fast HMR (but waiting for
aspnet/JavaScriptServices#1204)
AoT faster
Cleans up multiple tsconfigs
etc etc...

* fix gitignore

* fix HMR, VS builds, misc updates

* add package-lock to gitignore

closes #307 
closes #318 
closes #296 
closes #294 
closes #271 
closes #267 
closes #230 
closes #161

Author: MarkPieszak

.gitignore

@@ -35,7 +35,7 @@ Obj/
 .vs/
 
 /wwwroot/dist/
-/Client/dist/
+/ClientApp/dist/
 
 # MSTest test Results
 [Tt]est[Rr]esult*/
@@ -187,6 +187,7 @@ BundleArtifacts/
 !*.[Cc]ache/
 
 # Others
+*.db
 ClientBin/
 ~$*
 *~
@@ -259,3 +260,6 @@ _Pvt_Extensions
 
 # Jest Code Coverage report
 coverage/
+
+.DS_Store
+package-lock.json

.vscode/launch.json

@@ -20,7 +20,7 @@
       "type": "coreclr",
       "request": "launch",
       "preLaunchTask": "build",
-      "program": "${workspaceRoot}/bin/Debug/netcoreapp1.1/Asp2017.dll",
+      "program": "${workspaceRoot}/bin/Debug/netcoreapp2.0/Asp2017.dll",
       "args": [],
       "cwd": "${workspaceRoot}",
       "stopAtEntry": false,
@@ -51,7 +51,7 @@
       "type": "coreclr",
       "request": "launch",
       "preLaunchTask": "build",
-      "program": "${workspaceRoot}/bin/Debug/netcoreapp1.1/Asp2017.dll",
+      "program": "${workspaceRoot}/bin/Debug/netcoreapp2.0/Asp2017.dll",
       "args": [],
       "cwd": "${workspaceRoot}",
       "stopAtEntry": false,
@@ -82,7 +82,7 @@
       "type": "coreclr",
       "request": "launch",
       "preLaunchTask": "build",
-      "program": "${workspaceRoot}/bin/Debug/netcoreapp1.1/Asp2017.dll",
+      "program": "${workspaceRoot}/bin/Debug/netcoreapp2.0/Asp2017.dll",
       "args": [],
       "cwd": "${workspaceRoot}",
       "stopAtEntry": false,

Asp2017.csproj

@@ -1,51 +1,68 @@
 <Project ToolsVersion="15.0" Sdk="Microsoft.NET.Sdk.Web">
+
   <PropertyGroup>
-    <TargetFramework>netcoreapp2.0</TargetFramework>
+    <TargetFramework Condition="'$(TargetFrameworkOverride)' == ''">netcoreapp2.0</TargetFramework>
+    <TargetFramework Condition="'$(TargetFrameworkOverride)' != ''">TargetFrameworkOverride</TargetFramework>
     <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
+    <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
     <IsPackable>false</IsPackable>
   </PropertyGroup>
-  <ItemGroup>
-  <!-- New Meta Package has SpaServices in It -->
+
+   <ItemGroup Condition="'$(TargetFrameworkOverride)' == ''">
     <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0" />
+  </ItemGroup>
+  <ItemGroup Condition="'$(TargetFrameworkOverride)' != ''">
+    <PackageReference Include="Microsoft.AspNetCore" Version="2.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Mvc" Version="2.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.SpaServices" Version="2.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="2.0.0" />
+  </ItemGroup>
+  <ItemGroup>
     <PackageReference Include="NETStandard.Library" Version="2.0.0" />
     <PackageReference Include="Microsoft.EntityFrameworkCore" Version="2.0.0" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="2.0.0" />
     <PackageReference Include="Swashbuckle.AspNetCore" Version="1.0.0" />
   </ItemGroup>
-  <ItemGroup>
-    <!-- Files not to show in IDE -->
-    <None Remove="yarn.lock" />
-	<Content Remove="wwwroot\dist\**" />
-	<None Remove="Client\dist\**" />
-    <Content Remove="coverage\**" />
 
-    <!-- Files not to publish (note that the 'dist' subfolders are re-added below) -->
-    <Content Remove="Client\**" />
+  <ItemGroup>
+    <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.0" />
   </ItemGroup>
+
   <ItemGroup>
-    <Content Include="Client\tsconfig.browser.json" />
-    <Content Include="Client\tsconfig.server.aot.json" />
-    <Content Include="Client\tsconfig.server.json" />
+    <!-- Files not to publish (note that the 'dist' subfolders are re-added below) -->
+    <Content Remove="ClientApp\**" />
   </ItemGroup>
-  <Target Name="RunWebpack" AfterTargets="ComputeFilesToPublish">
+
+  <!--/-:cnd:noEmit -->
+  <Target Name="DebugRunWebpack" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('wwwroot\dist') ">
+    <!-- Ensure Node.js is installed -->
+    <Exec Command="node --version" ContinueOnError="true">
+      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
+    </Exec>
+    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
+
+    <!-- In development, the dist files won't exist on the first run or when cloning to
+         a different machine, so rebuild them if not already present. -->
+    <Message Importance="high" Text="Performing first-run Webpack build..." />
+    <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js" />
+    <Exec Command="node node_modules/webpack/bin/webpack.js" />
+  </Target>
+  <!--/+:cnd:noEmit -->
+
+  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
     <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
     <Exec Command="npm install" />
-    <Exec Command="node node_modules/webpack/bin/webpack.js --env.aot --env.client" />
-    <Exec Command="node node_modules/webpack/bin/webpack.js --env.aot --env.server" />
+    <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod" />
+    <Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />
+
     <!-- Include the newly-built files in the publish output -->
     <ItemGroup>
-      <DistFiles Include="wwwroot\dist\**; Client\dist\**" />
+      <DistFiles Include="wwwroot\dist\**; ClientApp\dist\**" />
       <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
         <RelativePath>%(DistFiles.Identity)</RelativePath>
         <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
       </ResolvedFileToPublish>
     </ItemGroup>
   </Target>
-  <Target Name="CleanDist" AfterTargets="Clean">
-    <ItemGroup>
-      <FilesToDelete Include="Client\dist\**; wwwroot\dist\**" />
-    </ItemGroup>
-    <Delete Files="@(FilesToDelete)" />
-    <RemoveDir Directories="Client\dist; wwwroot\dist" />
-  </Target>
+
 </Project>

Client/main.server.aot.ts

@@ -3,4 +3,4 @@
 </div>
 <div class="col-sm-9 body-content">
     <router-outlet></router-outlet>
-</div>
+</div>

Client/tsconfig.browser.json

@@ -6,7 +6,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { SignalRModule, SignalRConfiguration } from 'ng2-signalr';
 
 import { ORIGIN_URL } from './shared/constants/baseurl.constants';
-import { AppModule } from './app.module';
+import { AppModuleShared } from './app.module';
 import { AppComponent } from './app.component';
 import { REQUEST } from './shared/constants/request';
 import { BrowserTransferStateModule } from '../modules/transfer-state/browser-transfer-state.module';
@@ -41,7 +41,7 @@ export function getRequest() {
         BrowserTransferStateModule,
 
         // Our Common AppModule
-        AppModule,
+        AppModuleShared,
 
         SignalRModule.forRoot(createConfig)
     ],
@@ -58,5 +58,4 @@ export function getRequest() {
         }
     ]
 })
-export class BrowserAppModule {
-}
+export class AppModule { }

Client/tsconfig.server.aot.json

@@ -3,7 +3,7 @@ import { ServerModule } from '@angular/platform-server';
 import { BrowserModule } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
-import { AppModule } from './app.module';
+import { AppModuleShared } from './app.module';
 import { AppComponent } from './app.component';
 import { ServerTransferStateModule } from '../modules/transfer-state/server-transfer-state.module';
 import { TransferState } from '../modules/transfer-state/transfer-state';
@@ -20,10 +20,10 @@ import { TransferState } from '../modules/transfer-state/transfer-state';
     ServerTransferStateModule,
 
     // Our Common AppModule
-    AppModule
+    AppModuleShared
   ]
 })
-export class ServerAppModule {
+export class AppModule {
 
   constructor(private transferState: TransferState) { }
 

Client/tsconfig.server.json

@@ -1,5 +1,5 @@
 import { NgModule, Inject } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterModule, PreloadAllModules } from '@angular/router';
 import { CommonModule, APP_BASE_HREF } from '@angular/common';
 import { HttpModule, Http } from '@angular/http';
 import { FormsModule } from '@angular/forms';
@@ -134,9 +134,9 @@ export function createTranslateLoader(http: Http, baseHref) {
                     ]
                 }
             },
-          
+
             { path: 'lazy', loadChildren: './containers/lazy/lazy.module#LazyModule'},
-          
+
             {
                 path: '**', component: NotFoundComponent,
                 data: {
@@ -148,7 +148,12 @@ export function createTranslateLoader(http: Http, baseHref) {
                     ]
                 }
             }
-        ])
+        ], {
+          // Router options
+          useHash: false,
+          preloadingStrategy: PreloadAllModules,
+          initialNavigation: 'enabled'
+        })
     ],
     providers: [
         LinkService,
@@ -157,5 +162,5 @@ export function createTranslateLoader(http: Http, baseHref) {
         TranslateModule
     ]
 })
-export class AppModule {
+export class AppModuleShared {
 }

Client/app/app.component.html renamed to ClientApp/app/app.component.html

@@ -11,7 +11,7 @@ export class ChatMessage {
 @Component({
     selector: 'chat',
     templateUrl: './chat.component.html',
-    styleUrls: ['./chat.component.css']
+    styleUrls: ['./chat.component.scss']
 })
 export class ChatComponent implements OnInit {
 

Client/app/app.component.scss renamed to ClientApp/app/app.component.scss

@@ -1,23 +1,20 @@
-<h1>
-  {{ title }}</h1>
+<h1>{{ title }}</h1>
 
 <blockquote>
   <strong>Enjoy the latest features from .NET Core & Angular 4.0!</strong>
   <br> For more info check the repo here: <a href="https://github.com/MarkPieszak/aspnetcore-angular2-universal">AspNetCore-Angular2-Universal repo</a>
-
   <br><br>
 </blockquote>
 
-
 <div class="row">
   <div class="col-lg-6">
     <h2>{{ 'HOME_FEATURE_LIST_TITLE' | translate }} </h2>
     <ul>
-      <li>ASP.NET Core 1.1 :: ( Visual Studio 2017 )</li>
+      <li>ASP.NET Core 2.0 :: ( 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
+          <li>Angular **platform-server** (aka: Universal) - 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>
@@ -33,7 +30,7 @@ <h2>{{ 'HOME_FEATURE_LIST_TITLE' | translate }} </h2>
                 </ul>-->
       </li>
       <li>
-        Webpack 2
+        Webpack
         <ul>
           <!--<li>TS2 aware path support</li>-->
           <li>Hot Module Reloading/Replacement for an amazing development experience.</li>
@@ -65,11 +62,11 @@ <h2>{{ 'HOME_ISSUES_TITLE' | translate }}</h2>
     <h2> {{ 'SWITCH_LANGUAGE' | translate }}</h2>
 
     <button class="btn btn-default" (click)="setLanguage('en')">
-        <span class="flag-icon flag-icon-us"></span>  {{ 'ENGLISH' | translate }} 
+        <span class="flag-icon flag-icon-us"></span>  {{ 'ENGLISH' | translate }}
     </button>
 
     <button class="btn btn-default" (click)="setLanguage('no')">
-        <span class="flag-icon flag-icon-no"></span> {{ 'NORWEGIAN' | translate }} 
+        <span class="flag-icon flag-icon-no"></span> {{ 'NORWEGIAN' | translate }}
     </button>
 
   </div>

Client/app/app.component.ts renamed to ClientApp/app/app.component.ts

@@ -8,10 +8,12 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class HomeComponent implements OnInit {
 
-    title: string = 'Angular 4.0 Universal & ASP.NET Core advanced starter-kit';
+    title: string = 'Angular 4.0 Universal & ASP.NET Core 2.0 advanced starter-kit';
 
     // Use "constructor"s only for dependency injection
-    constructor(public translate: TranslateService) { }
+    constructor(
+      public translate: TranslateService
+    ) { }
 
     // Here you want to handle anything with @Input()'s @Output()'s
     // Data retrieval / etc - this is when the Component is "ready" and wired up

Client/app/browser-app.module.ts renamed to ClientApp/app/app.module.browser.ts

@@ -1,7 +1,7 @@
 import './polyfills/browser.polyfills';
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { BrowserAppModule } from './app/browser-app.module';
+import { AppModule } from './app/app.module.browser';
 
 const rootElemTagName = 'app'; // Update this if you change your root component selector
 
@@ -15,4 +15,4 @@ if (module['hot']) {
     enableProdMode();
 }
 
-const modulePromise = platformBrowserDynamic().bootstrapModule(BrowserAppModule);
+const modulePromise = platformBrowserDynamic().bootstrapModule(AppModule);