Get Aurelia working in ASP.NET Core 2 (#16)

Author: elanderson

ASP.NET Core Basics/src/Aurelia/.gitignore

@@ -1,22 +1,44 @@
-<Project ToolsVersion="15.0" Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
   <PropertyGroup>
-    <TargetFramework>netcoreapp1.1</TargetFramework>
+    <TargetFramework Condition="'$(TargetFrameworkOverride)' == ''">netcoreapp2.0</TargetFramework>
+    <TargetFramework Condition="'$(TargetFrameworkOverride)' != ''">TargetFrameworkOverride</TargetFramework>
     <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
+    <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
     <IsPackable>false</IsPackable>
-    <TypeScriptToolsVersion>2.3</TypeScriptToolsVersion>
   </PropertyGroup>
-  <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore" Version="1.1.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Mvc" Version="1.1.1" />
-    <PackageReference Include="Microsoft.AspNetCore.SpaServices" Version="1.1.0" />
-    <PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="1.1.0" />
-    <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="1.1.0" />
+
+  <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>
-    <!-- Files not to show in IDE -->
-    <None Remove="yarn.lock" />
+    <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.0" />
   </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 --config webpack.config.vendor.js --env.prod" />
@@ -31,4 +53,5 @@
       </ResolvedFileToPublish>
     </ItemGroup>
   </Target>
-</Project>
+
+</Project>

ASP.NET Core Basics/src/Aurelia/Aurelia.csproj

@@ -1,4 +1,4 @@
-import { Aurelia } from 'aurelia-framework';
+import { Aurelia, PLATFORM } from 'aurelia-framework';
 import { Router, RouterConfiguration } from 'aurelia-router';
 
 export class App {
@@ -10,36 +10,36 @@ export class App {
             route: ['', 'home'],
             name: 'home',
             settings: { icon: 'home' },
-            moduleId: '../home/home',
+            moduleId: PLATFORM.moduleName('../home/home'),
             nav: true,
             title: 'Home'
         }, {
             route: 'counter',
             name: 'counter',
             settings: { icon: 'education' },
-            moduleId: '../counter/counter',
+            moduleId: PLATFORM.moduleName('../counter/counter'),
             nav: true,
             title: 'Counter'
         }, {
             route: 'fetch-data',
             name: 'fetchdata',
             settings: { icon: 'th-list' },
-            moduleId: '../fetchdata/fetchdata',
+            moduleId: PLATFORM.moduleName('../fetchdata/fetchdata'),
             nav: true,
             title: 'Fetch data'
         },
         {
             route: 'contact-list',
             name: 'contactlist',
             settings: { icon: 'list-alt' },
-            moduleId: '../contacts/contactList',
+            moduleId: PLATFORM.moduleName('../contacts/contactList'),
             nav: true,
             title: 'Contact List'
         },
         {
             route: 'contact-detail/:id?',
             name: 'contactdetail',
-            moduleId: '../contacts/contactDetail',
+            moduleId: PLATFORM.moduleName('../contacts/contactDetail'),
             nav: false,
             title: 'Contact Detail'
         }]);

ASP.NET Core Basics/src/Aurelia/ClientApp/app/components/app/app.ts

@@ -8,7 +8,7 @@
     phone: string;
     email: string;
 
-    constructor(data?) {
+    constructor(data?: any) {
         if (data == null) return;
         Object.assign(this, data);
     }

ASP.NET Core Basics/src/Aurelia/ClientApp/app/components/contacts/contact.ts

@@ -9,12 +9,12 @@ export class ContactDetail {
 
     constructor(private contactService: ContactService) { }
 
-    activate(parms, routeConfig) {
+    activate(parms: any, routeConfig: any) {
         this.hasContactId = parms.id;
 
         if (this.hasContactId) {
             return this.contactService.getById(parms.id)
-                .then(contact => this.contact = contact);          
+                .then(contact => this.contact = contact);
         }
 
         return null;