At the time of writing this post, default ASP.NET Core SPA templates allow you to create Angular 5 based app with Visual Studio without installing any third-party extensions or templates. Angular 6 is out now and you can also upgrade the Angular 5 app to Angular 6. What if you want to create Angular 6 app with VS 2017? This post talks about how to create an Angular 6 App with Visual Studio 2017 and how to extend it with a simple example.
How to create an Angular 6 app with Visual Studio 2017
If you want to learn all of Angular, I want to personally recommend ng-book as the single-best resource out there. You can get a copy here.
In this post, we’ll use an ASP.NET Core 2.1 based API project and inside the same project, will create an angular 6 app. Therefore, before we begin, please do the following installation (ignore if already done).
- .NET Core 2.1 RC1 SDK — includes the runtime
- Install Visual Studio 2017 Update 7 or Visual Studio for Mac 7.5. You can also use latest version of Visual Studio 2017 Preview. Visual Studio and Visual Studio “Preview” can be installed side-by-side on the same device. It will have no impact on your current stable VS installation.
- Node.js and npm latest version
- Angular CLI
Open Visual Studio 2017, hit Ctrl+Shift+N and select the ASP.NET Core Web Application (.NET Core) project type from the templates. When you click Ok, you will get the following prompt. Select ASP.NET Core 2.1 and choose the API template.
The Visual Studio will create an ASP.NET Core 2.1 based Web API project with a controller named ValuesController. Just run the app to make sure it is running successfully.
Now, let’s add Angular 6 app to this project through Angular CLI. To do that, first open developer command prompt for Visual Studio and navigate to the project folder (if not there). First, install/update the Angular CLI using the following command.
npm install -g @angular/cli
Next, we need to create angular 6 based app. To do that, navigate to the ASP.NET Core project root folder (where the project’s solution file is present) and run the following command. Here, the angular app name must be same as your project name.
ng new Angular6App
This will take some time to create angular 6 based app. Once created, the project structure will look like the following.
To run this angular application with Visual Studio 2017, we need to make a couple of changes.
- First, edit the .csproj file and add the following 2 entries in the PropertyGroup section.
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked> <PostBuildEvent>ng build --aot</PostBuildEvent>
These entries will ensure that TypeScript files are compiled using Angular CLI instead of Visual Studio.
- Next, open
angular.jsonfile and set theoutputPathkey value towwwroot. This is required as thewwwrootfolder in ASP.NET Core application, is the place to serve static files. This change tells angular cli to copy the generated HTML, CSS and JS files towwwrootfolder. - Next, open
Startup.csfile and add these 2 middlewares in theconfiguremethod.app.UseDefaultFiles(); app.UseStaticFiles();
This tells ASP.NET Core to serve the static content from the wwwroot folder.
- Next, delete
"launchUrl": "api/values"from the Properties/launchSettings.json file. - Finally, build the application in Visual Studio and run the app. You should see following in the browser.
That’s it. The angular 6 based app running successfully in the browser.
If you want to learn all of Angular, I want to personally recommend ng-book as the single-best resource out there. You can get a copy here.
Conclusion
With Angular 5, the ASP.NET Core SPA templates support angular cli based application, compare to Angular 4 based application. This is the right decision as this allows developers to include Angular based apps created using CLI inside ASP.NET Core projects. In this post, we saw how easily we can integrate angular cli based application in ASP.NET Core app.
Thank you for reading. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.
hello how do I publish this site in IIS?
Hi, thank you so much for sharing this guide!
seems to do most of the job fine – just one thing,
I noticed the website does not update during runtime after saving changes.
For example, I change the value of the title property in the app.component.ts, save and nothing happens.
Anyone?
Did you find answer?
Sadly no, I neglected this tutorial and used a different approach.
Do you have any post to deploy the .net core + angular 6 application to cloud/azure/aws. Please provide the reference
Worked perfectly for me with angular 7. If you want “dotnet watch run” to rebuild on angular code updates, add this new ItemGroup to your .csproj file:
can you please share the csproj code to add dotnet watch run
Great walkthrough. Worked perfectly, thanks for sharing!
Just a note, Visual Studio 2017 now includes the line true in .csproj by default, as well as already including app.UseStaticFiles(); in Startup.cs
I did get an error when running “ng new Angular6App” due to Visual Studio already creating a .gitignore file. Once I deleted that, the ng new command executed successfully, and I was able to build and run the application on the first try.
Windows 10
Visual Studio 2017 v15.8.9
Angular CLI 7.0.5
Node.js v 10.6.0
The line that’s already included in .csproj is TypeScriptCompileBlocked . Forgot to remove the tags so they wouldn’t be stripped.
It is not working for me. I have a “initializers are not allowed in ambient contexts” mistake and “initializers may only be declared within a type” as well. Done a lot of step by step guides, but it won’t help
I guess you must have written some typescript code and which is causing this problem. Try to google it and you will find the solution.
Is this possible to upload a project with Angular 6 and asp.net MVC?
Or a step to step guide? Thanks in advance
I have a problem, when I build the project(from vs) My wwwroot folder is deleted, any idea how to fix it?
It would be nice to include steps about installing node.js and npm. Even just a sentence would be nice.
May want to include going to node_modules folder in file explorer and set properties to hidden. In VS2017 you may notice a long delay refreshing solution explorer if you don’t take this step.
Wow, this is a lot easier than using the Angular 5 template and trying to upgrade to Angular 6.
It worked the first time.
Thanks!
It works but I haven’t been able to use the angular router instead of the server-side one. Everything works fine until you refresh the browser…
I fixed this in a .net app (not core) but it may help. https://stackoverflow.com/questions/42805304/asp-net-webapi-with-angular-cli/50416855#50416855
and I have a problem, I’m having a mistake after bathing/gbuild (F6)
MSB3073 the “ng build –aot” ending/exited with code 1
this problem applies only to Visual Studio, because when I normally run the console in the directory (ng build –aot), everything works without any problems. How can I beat this?
Its difficult to find out the exact reason but my initial guess would be to check if anything wrong with angular.json
This is because when the angular cli tries to run `ng built -aot` command, the `wwwroot` folder is locked by visual studio and iis express. So to solve this, Instead of you can use in order to built angular files before the file get locked.
“`ng build –aot“`
Your comment is awaiting moderation.
This is because when the angular cli tries to run `ng built -aot` command, the `wwwroot` folder is locked by visual studio and iis express. So to solve this, Instead of “`PostBuildEvent“` tag in .cproj file, you can use “`PreBuildEvent“` in order to built angular files before the file get locked.
“`ng build –aot“
Any way to make this work like a CLI project so you can run commands like: ng generate someComponent ? Or are there any tools you use to overcome this shortcoming? Everything else worked for me.. I have actually tried about 5 different people and it finally came down to the angular version.. And running the ng new at the solution file level with the name as the project name was also key. Thanks!
Ah.. Figured it out.. It wasn’t working from within the Powershell in Visual Studio, but works from Powershell outside. Also opened the solution from VS Code so maybe that might have helped. Thanks so much and I enjoy that what you have actually works! Can’t describe the frustration trying to get this to work.
That’s great! But I can’t debug typescript in VisualStudio any more.
That was possible when you create your solution based on VS Angular project template for ASP.NET Core 2.0 and Angular 4.2.5.
My understanding is, the 4.2.5 angular based templates were SPA templates released by Microsoft. This is a not a SPA template. I think we’ll have to wait for official SPA templates for Angular 6.
Hello, is it normal that when I build the project works but the wwwroot symbol changes to a regular folder symbol?
That’s normal.. it should build properly and run properly..
Hello, would this work with VS2015? and if so, do i have to make any changes to make it work?
Nope..This will not work
Awesome !!! Very nice steps explained and it works perfectly ! Its perfect setup for Visual Studio 2017 and Angular 6.
Thank you so much for sharing this.
I would like to know if you have any way I can edit the layout and press f5 to refresh the page and layout change, in my application I make the changes in html but the changes do not appear in the screen result
Try to run the app from angular cli using “ng serve” command.
Shouldn’t the tag in .csproj file be instead of , i.e. “Compile” vs “Compiler” ?
Ah!! Thanks for pointing out. My bad.. It’s a typo.. it should be compile, not compiler.. Updated the post..
Useless… The main advantage of using asp.net core angular template is SSR, without it, there is no worth using them together, it only brings more complexity. Have to wait till the release of official template…
Thank you for your feedback. Well, SSR has its own advantages and disadvantages.
Here you go.. No need to wait for official template release. Here is my another post explaining how to implement SPA template features in Angular 6 app.
https://www.talkingdotnet.com/implement-asp-net-core-spa-template-feature-in-angular6-app/
Wow, thank You very much, that one is great!
I have followed this article throughout and done everything above but my app is just not working. It shows error after build the app using VS, probably it is related to AOT Compiler but I’m not sure how to resolve it.
Error: The command “ng build –aot” exited with code 9009. Angular6App2 C:\Program Files (x86)\Microsoft Visual Studio\2017\Enterprise\MSBuild\15.0\Bin\Microsoft.Common.CurrentVersion.targets 5143
What I’m missing here? Any help would be appreciated !! 🙂
There is something wrong with angular.json file. Please correct it.
Not able to tackle the issue in angular.json file. Already I have set the outputPath key value from “outputPath”: “dist/Angular6App2” to “outputPath”: “wwwroot”. No further change.
Error code 9009 means “File path not found”. Please verify that Angular cli is installed globally and added to the Environment PATH variables. You can try to uninstall it and then install it again globally.
Check this link for more help.
https://github.com/angular/angular-cli/issues/5872
Were you able to fix this issue? I am running into the same issue, any help will be appreciated.
Got same msg – make sure you restart after all the above installation – worked for me
This is not working. I have done every thing above but when I try to run the site, I get “This site cannot be reached” page. I can run the API just fine, but it will not give me the the Angular Page.
I figured it out.
I had to add the following two lines to Startup.cs
app.UseDefaultFiles();
app.UseStaticFiles();
Ah!! Yes, you need to make that change. I forgot to include that in the post. Thanks for pointing out, I have updated the post.
And what is required to make that nice solution working locally to work in Azure ? The “root” URL keeps redirecting to the homecontroller index page instead of the wwwroot index.html page.
When would Angular template be updated to v6 when creating new project using UI in VS?
Not sure but I hope it will be out soon. Possibly when ASP.NET Core 2.1 final version comes out.