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...

Author: MarkPieszak

Asp2017.csproj

@@ -30,11 +30,11 @@
   <Target Name="RunWebpack" 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>
@@ -43,9 +43,9 @@
   </Target>
   <Target Name="CleanDist" AfterTargets="Clean">
     <ItemGroup>
-      <FilesToDelete Include="Client\dist\**; wwwroot\dist\**" />
+      <FilesToDelete Include="ClientApp\dist\**; wwwroot\dist\**" />
     </ItemGroup>
     <Delete Files="@(FilesToDelete)" />
-    <RemoveDir Directories="Client\dist; wwwroot\dist" />
+    <RemoveDir Directories="ClientApp\dist; wwwroot\dist" />
   </Target>
 </Project>

Client/app/app.component.html

@@ -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/main.server.aot.ts

@@ -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.browser.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/tsconfig.server.aot.json

@@ -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);

Client/tsconfig.server.json

@@ -7,7 +7,7 @@ import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
 
 import { ORIGIN_URL } from './app/shared/constants/baseurl.constants';
 // Grab the (Node) server-specific NgModule
-import { ServerAppModule } from './app/server-app.module';
+import { AppModule } from './app/app.module.server';
 // Temporary * the engine will be on npm soon (`@universal/ng-aspnetcore-engine`)
 import { ngAspnetCoreEngine, IEngineOptions, createTransferScript } from './polyfills/temporary-aspnetcore-engine';
 
@@ -18,7 +18,7 @@ export default createServerRenderer((params: BootFuncParams) => {
   // Platform-server provider configuration
   const setupOptions: IEngineOptions = {
     appSelector: '<app></app>',
-    ngModule: ServerAppModule,
+    ngModule: AppModule,
     request: params,
     providers: [
       // Optional - Any other Server providers you want to pass (remember you'll have to provide them for the Browser as well)

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

@@ -43,7 +43,7 @@ public async Task<IActionResult> Index()
                 "/",
                 nodeServices,
                 cancelToken,
-                new JavaScriptModuleExport(applicationBasePath + "/Client/dist/main-server"),
+                new JavaScriptModuleExport(applicationBasePath + "/ClientApp/dist/main-server"),
                 unencodedAbsoluteUrl,
                 unencodedPathAndQuery,
                 transferData, // Our simplified Request object & any other CustommData you want to send!

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

@@ -1,6 +1,7 @@
 @Html.Raw(ViewData["SpaHtml"])
 
+<script src="~/dist/vendor.js" asp-append-version="true"></script>
 @section scripts {
     <!-- Our webpack bundle -->
-    <script src="~/dist/main-browser.js" asp-append-version="true"></script>
+    <script src="~/dist/main-client.js" asp-append-version="true"></script>
 }

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

@@ -1,32 +1,33 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <base href="/" />
-        <title>@ViewData["Title"]</title>
+  <head>
+    <base href="/" />
+    <title>@ViewData["Title"]</title>
 
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        @Html.Raw(ViewData["Meta"])
-        @Html.Raw(ViewData["Links"])
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    @Html.Raw(ViewData["Meta"])
+    @Html.Raw(ViewData["Links"])
 
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css" />
+    <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
 
-        @Html.Raw(ViewData["Styles"])
+    @Html.Raw(ViewData["Styles"])
 
-    </head>
-    <body>
-        @RenderBody()
+  </head>
+  <body>
+    @RenderBody()
 
-        <!-- remove if you're not going to use SignalR -->
-        <script src="https://code.jquery.com/jquery-2.2.4.min.js"
-                integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
-                crossorigin="anonymous"></script>
+    <!-- remove if you're not going to use SignalR -->
+    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
+            integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
+            crossorigin="anonymous"></script>
 
-        <script src="http://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.0.min.js"></script>
+    <script src="http://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.0.min.js"></script>
 
-        <!-- Here we're passing down any data to be used by grabbed and parsed by Angular -->
-        @Html.Raw(ViewData["TransferData"])
+    <!-- Here we're passing down any data to be used by grabbed and parsed by Angular -->
+    @Html.Raw(ViewData["TransferData"])
 
-        @RenderSection("scripts", required: false)
-    </body>
+    @RenderSection("scripts", required: false)
+  </body>
 </html>