I’m working on an update for my ASP.NET Core course for version 2.0. One major change is to use Angular (v4 probably) in the new course.
My challenge was to get Angular and ASP.NET Core to work together. I like the idea about Angular-CLI doing all the boilerplate since setup is a bit of a headache. Should be an easy win-win. Well…
UPDATE: Forgot about turning TypeScript off in the project. See Below.
There are a lot of good tutorials and blog posts on using the CLI so I’m just going to talk about how I got Angular and ASP.NET Core 2 working together *in VS2017*.
Before I moved the project into Visual Studio, I needed to tell the project that I’m handling the TypeScript myself. To do that I add two lines to the csproj file:
<Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <TargetFramework>netcoreapp2.0</TargetFramework> <TypeScriptToolsVersion>latest</TypeScriptToolsVersion> <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked> </PropertyGroup> ...
Make sure that the TypeScript version is latest (so that intellisense works right) and make sure you block the compilation of TypeScript; Angular-CLI will do that for us.
I deconstructed the Angular project to live in the ASP.NET Core project (so that the following files ended up in the root of the project):
All these files are needed to get angular working (the last one is the configuration for the actual cli for your project). Then I took the entire src directory (the one with all the .ts files) and put it in the root of the project (but I named it “ClientApp” to make it clearer what it is). Here’s what that looks like:
At this point VS2017 (Preview2) was really unresponsive. It was getting bogged down by the npm stuff and I didn’t know why. So I opened the Output window for npm/bower and saw a ton of errors and failures to load the npm dependencies. Hrmph!
The errors were about needing a newer version of Node and NPM on my machine. I knew I had upgraded so I had these versions already installed on my machine:
But the errors said I wasn’t using these versions. Investigating a usual issue with Visual Studio, I right clicked the ‘npm’ folder to configure the web tools:
And I could see that it was using the VS installed versions first:
To fix this I manually added the folders for npm and node. I am sure there is a better fix, but I had to get to work ; )
Now when I restored, all was well!
The only real oddity was that to do the development I needed to launch dotnet in watch mode and Angular-CLI in watch mode. That way I could just change code and the server and client code would be auto-built as I needed. To do this I wrote a tiny little .cmd file:
start ng build --watch start dotnet watch runThat way I could run both watches and do about my business. This is working pretty well. Anyone have any improvements or know a way to integrate this with launchsettings.json? I don’t want to actually debug necessarily in VS but I like the flow of it so far
Shawn's 4-hour course will get you up to speed in no time. Vue.js is a great middle-ground between React and Angular for people who don't like the complexity of Angular, and the overly componentized React. Learn today at Wilder Minds Training!
|Vue.js by Example (Now Available)|
|Bootstrap 4 by Example|
|Intro to Font Awesome 5 (Free Course)|
|Less: Getting Started (Coupon Available)|
|Building a Web App with ASP.NET Core, MVC6, EF Core, Bootstrap and Angular (updated for 2.1)|
|Using Visual Studio Code for ASP.NET Core Projects|
|Implementing ASP.NET Web API|
|Web API Design|
|Application Name||WilderBlog||Environment Name||Production|
|Application Ver||v4.0.30319||Runtime Framework||x86|
|App Path||D:\home\site\wwwroot\||Runtime Version||.NET Core 4.6.27129.04|
|Operating System||Microsoft Windows 10.0.14393||Runtime Arch||X86|