Angular 6 is announced recently which has introduced some pretty awesome features.
Let us see how to create Angular 6 application with and without using .Net Core SPA templates using Visual Studio 2017.
There are more than one ways to create Angular 6 application with .Net Core, Let us see some of them.
Make sure you have instilled Visual Studio 2017 & .Net Core latest SDK and of course Node & Angular CLI.
Without using SPA Template
In this approach we will not use any template and will add Angular 6 within an API project.
Create the Angular application using .Net Core 2.0 template in VS 2017
Once you have all these installed, open your Visual Studio 2017 -> Create New Project -> Select Core Web application:
Click on Ok and in next window, select API as shown below:
Once the API project is created, open Command prompt and navigate to the project folder -> run command:
ng new ClientApp
This will create Angular 6 application within API project.
Next task is to run our Angular application with .Net Core. For this we need to add some code within Startup.cs class.
Add below lines in ConfigureService method:
services.AddSpaStaticFiles(configuration => { configuration.RootPath = "ClientApp/dist"; });
Add below lines in Configure method:
app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseSpaStaticFiles(); app.UseHttpsRedirection(); app.UseMvc(); app.UseSpa(spa => { spa.Options.SourcePath = "ClientApp"; if (env.IsDevelopment()) { spa.UseAngularCliServer(npmScript: "start"); } });
Above code adds required configuration for running Angular code with .Net Core.
Note: Make sure the property “launchUrl”: “api/values” is not present in the Properties/launchSettings.json, if it is available then delete it.
Just run the application in the browser:
Your Angular 6 application is now running with .Net Core.
With SPA Template
In first approach, we have not used SPA template to create Angular app, in this approach we will use the Angular template.
Create the Angular application using .Net Core 2.1 template in VS 2017
Once you have all these installed, open your Visual Studio 2017 -> Create New Project -> Select Core Web application:
Click on Ok and in next window, select Angular as shown below:
Visual Studio will create a well-structured application for you.
If you compare latest project structure with the previous versions then you would notice that the Views folder is no more there:
We do not need that Views folder now.
Delete ClientApp and install Angular 6
If you open package.json file under ClientApp folder, you would notice the Angular version is 5.0 but we want to create Angular 6 application.
So go to File explorer and delete ClientApp folder:
Once the folder is deleted, open Command prompt and navigate to the project and run command:
ng new ClientApp
This command will create brand new Angular application with latest version.
Once the process is completed, go back to solution explorer -> ClientApp -> package.json file, it should show Angular 6.0 references:
That is it. We have just created Angular 6 application with .Net Core.
Let us try to use any random Angular 6 feature just to make sure we have latest Angular 6 code.
Test Library feature
We will test the library feature which has been shipped with Angular 6.
Open the command prompt again and navigate to ClientApp folder -> run command:
ng generate library my-shared-library
Logs in the window confirms that we have Angular 6 now. Library would be created under the ClientApp -> Projects folder:
Hope it helps.
Hi,
Can you please explain the deployment of Angular 6 with .NET Core in IIS Server
LikeLike
Hello, you can check this: https://neelbhatt.com/2017/12/19/build-angular-app-with-net-core-2-0-templatevs-2017-deploy-on-azure-step-by-step-guide/
LikeLike
This was very helpful. Thanks a lot Neel
LikeLiked by 2 people
Glad to know that it is helpful 🙂
LikeLike
Neel:
Considering 2.1’s integration with Angular 6, would you say the best practice for UI in .Net Core is to use Angular as your front end rather than Razor files?
Thanks,
mark
LikeLike
Hi Mark, from .Net Core 2.1 on wards, default template does not include the views which means it would be good to use Angular as front end but we can use Razor as well. It makes more sense to use Angular though.
LikeLike
Neel:
I hate to ask a dumb question, but could you please specify how to “run the app”. I open a command prompt in the project folder, and run ng serve. I receive the error “Local workspace file (‘angular.json’) could not be found” What am I doing wrong?
Thanks in advance.
LikeLike
Hey Mark, questions are never dumb, it is good when someone asks questions. ng serve works for me. Reason of the error can be anything from this answers:https://stackoverflow.com/questions/49810580/error-local-workspace-file-angular-json-could-not-be-found
LikeLike
Is “ng serve” the accepted way to run/debug the application when using visual studio? If I try to run the app in IIS I get errors about paths to NPM not found, but using “ng serve” from command prompt works.
LikeLike
Hi, ng serve is basically used to test your app locally while developing. While developing, you can use ng serve which will build the application and start a web server where you can test. Deploying to IIS is a different thing because you are using IIS server for that. Have a look here for hosting Angular apps on IIS: https://www.google.co.in/search?safe=strict&ei=ngBkW9DaJYn28gWgo5_YAw&q=host+angular+app+in+iis&oq=host+angular+app&gs_l=psy-ab.1.0.0i20i263k1j0l9.2144.5919.0.7918.18.14.1.3.3.0.289.1936.0j4j5.9.0….0…1c.1.64.psy-ab..6.12.1665…35i39k1j0i67k1j0i10k1j0i131k1j0i22i30k1.0.7avk2QHyTw8
LikeLike
Neel:
I didn’t upgrade node.js – once I had the latest version the project ran correctly.
Thanks.
LikeLike
Good to know that Mark.
LikeLike
Thanks for this, this makes is really easy to start with.
LikeLike
Thanks for your kind words.
LikeLike
Neel, first of all, great post!!
But trying to expand Mark’s question… What would you consider to be the pros/cons of choosing Angular over Razor UI? What would be de main differences? Thank you!!
LikeLike
Hello Angel, Thanks a lot. Well your question is broad so I would suggest you to look at these threads where similar discussion is going on: https://www.google.co.in/search?q=angular+vs+razor+UI+site:stackoverflow.com&safe=strict&sa=X&ved=2ahUKEwiplMX-vsHcAhXrqlQKHU0aAvAQrQIoBDAAegQIABAM&biw=1366&bih=662
LikeLike
Hi Neel,
I have a doubt, in your experience. Which is better using with or without SPA Template?
Thanks.
LikeLike
Hi Luis. Using SPA template is bit easier to use as we do not require to configure anything manually. VS does it for us.
LikeLike
One thing to mention is that you need to change parameter in angular.json to make it work in Production (in Azure):
“outputPath”: “dist”
instead of
“outputPath”: “dist/ClientApp”
to match original .angular-cli.json setting
LikeLike
Thanks John. This is really helpful.
LikeLike
It would be nice how to connect to oracle with this project
LikeLike
Hi Samuel, .Net applications mostly use SQL, there are very few .Net apps which uses Oracle. You can check this for using .Net Core API with Oracle : https://www.c-sharpcorner.com/article/asp-net-core-web-api-with-oracle-database-and-dapper/
LikeLike
Thank you Neel, This is really good post to start on AngularJS with .Net Core.
While running the application, I was facing weird issue. Initially was getting HTTP ERROR 500.
This page isn’t working
localhost is currently unable to handle this request.
HTTP ERROR 500
But, after waiting for some time when I reload the browser, it’s working fine.
Any guess ?
LikeLike
An unhandled exception occurred while processing the request.
TimeoutException: The Angular CLI process did not start listening for requests within the timeout period of 50 seconds. Check the log output for error information.
Microsoft.AspNetCore.SpaServices.Extensions.Util.TaskTimeoutExtensions.WithTimeout(Task task, TimeSpan timeoutDelay, string message)
Stack Query Cookies Headers
TimeoutException: The Angular CLI process did not start listening for requests within the timeout period of 50 seconds. Check the log output for error information.
Microsoft.AspNetCore.SpaServices.Extensions.Util.TaskTimeoutExtensions.WithTimeout(Task task, TimeSpan timeoutDelay, string message)
Microsoft.AspNetCore.SpaServices.Extensions.Proxy.SpaProxy.PerformProxyRequest(HttpContext context, HttpClient httpClient, Task baseUriTask, CancellationToken applicationStoppingToken, bool proxy404s)
Microsoft.AspNetCore.Builder.SpaProxyingExtensions+c__DisplayClass2_0+<b__0>d.MoveNext()
Microsoft.AspNetCore.Builder.RouterMiddleware.Invoke(HttpContext httpContext)
Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware.Invoke(HttpContext context)
Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)
LikeLike
Thanks Pradip. This post may help you: https://github.com/aspnet/JavaScriptServices/issues/1512. This may occur due to the extra time taken by the compilation process. You can increase the startup time out value: spa.Options.StartupTimeout = new TimeSpan(0, 0, 80);
LikeLike
Hi Neel,
Thank you for your response. Application is working fine now locally.
Publishing this app over Azure (app service) from Visual Studio 2017 getting below error.
InvalidOperationException: The SPA default page middleware could not return the default page ‘/index.html’ because it was not found, and no other middleware handled the request.
Your application is running in Production mode, so make sure it has been published, or that you have built your SPA manually. Alternatively you may wish to switch to the Development environment.
LikeLike
Looks like you are running the production mode, set it to the development: ASPNETCORE_Environment=Development, this should help: https://github.com/aspnet/JavaScriptServices/issues/1514
LikeLike
Thanks for the post, I have just followed the steps,
what I still could not be able to do is, ajax calls to web api is not working.
LikeLike
Hey, I would suggest you to use the httpmodule within the angular instead of using ajax calls. Have a look here: https://stackoverflow.com/questions/34802813/how-to-make-ajax-call-with-angular2ts
LikeLike
It would be nice if you can post how it can be deployed in production using IIS
LikeLike
Hi Samuel, I will try to publish that soon. Thanks for the suggestion
LikeLike
It would be really nice if you post to how to compile and to publish at once.
I meant debugging is easy, but to publish it I need to compile Angular 6 in prod and and publish core 2.1 seperately and move the files around
Thanks !! in advance
LikeLike
Hey, I have posts to publish angular app on Azure and Firebase. Have a look here: https://neelbhatt.com/2017/12/19/build-angular-app-with-net-core-2-0-templatevs-2017-deploy-on-azure-step-by-step-guide/ and here: https://neelbhatt.com/2018/09/12/publish-angular-6-app-to-firebase/
LikeLike
The problem is I want to publish to WebHost a normal Windows10 server. Very disappointed.
LikeLike
What is the problem you are facing?
LikeLike
ng new ClientApp is still creating Angular 5 version files only
LikeLike
Which version is your Angular CLI?
LikeLike
Excellent article, followed it easily. Now the hard question… How can you deploy this exact setup to Azure App Service? Standard deploy tried to read a package.json from a place it doesn’t even exist (wwwroot\ClientApp\node_modules\start\package.json).
LikeLike
Hi,
Can you please explain the deployment of Angular 7 with .NET Core in azure app Services?
LikeLike