Angular vs Angular CLI vs NPM (Version, Usage & Dependency) - c#

Can anyone clear angular, angular cli & npm? I am going to start with Angular project. Unfortunately my client already have project developed in some version of Angular (+.net core). I am newbie to angular.
I am trying to configuring that project on my local machine and facing too many version conflicts error. Submitting those error (one by one) here doesn't make any sense to me. Rather, I would need more clarity/intro/relations between angular, angular cli & npm.
Thanks.

Well, Angular is Angular. Angular CLI is a command developed in Node that helps you generate the boilerplate of an Angular project, so you don't have to do the repetitive, error prone work of preparing a new project by hand. This command uses npm to download the different dependencies the generated boilerplate needs.
Angular CLI let's you start a development web server too, to assist you during the development.
This is a very high level explanation. If you are totally new to Angular + .NET Core development, I would recommend you to check this book. It helped me a lot when I was in your position.

Related

NX monorepo in a dotnet Angular project

I am doing some research for a new project. This project will use .NET/C# for the backend and now I am investigating about the best way to integrate the frontend in the same repository.
There will be multiple client apps like a web based CMS and Android/iOS mobile apps. Because of the team expertise NX, Angular and Ionic has been chosen as client technologies.
I know dotnet has a template to create an Angular SPA project, since there will be multiple client apps and we want to share code between them I wanted to convert it in an NX monorepo but beside this article (not working for me) I didn't find how to do it. I came across nx-dotnet but wraps a C# backend inside a native NX monorepo (I am trying to do the opposite: NX in a dotnet project).
Is there any tool or docs about converting the dotnet Angular template in a monorepo? What is a good practice to share code between multiple client apps in a dotnet solution?
I thought about the following alternatives:
Init the NX monorepo in a folder and treat it like a normal node app (not a dotnet project)
Use Angular Workspace feature

.NET 6.0 Razor Pages unable to connect to the localhost

I am working through some tutorials on Razor Pages using .NET 6.0 and have found that my computer is not wanting to find the localhost when running the application. If I create a basic .NET Core Web App using .NET 5.0 then everything works but if I do the same with .NET 6.0 then it doesn't load, even without any changes.
The message I receive is:
This localhost page can’t be found
No webpage was found for the web address: https://localhost:7273/
HTTP ERROR 404
I can open the same project on another computer and everything works as expected. I assume there is something with local setup that is causing this since the standard template for a .NET Core Web App using .NET 6.0 won't even work.
I have attempted to install the .NET Core 6.0 SDK, the Core Runtime, and the Desktop Runtime and nothing changed.
My launch settings file is:
LaunchSettings.json Image
And my Program.cs is: Program.cs Image
I've spent hours searching various forums but there seems to be very little available for .NET 6.0 and nothing seems to hit what I need, especially since the default starter template for a .NET Core Web App won't even work.
I was finally able to find another post that actually matched the issue I was having. The post can be found here: .NET 6 Core Web App Returns web page not found
I was able to confirm that building through dotnet build in the command line did work but I would have to do that every time I made a code change. I then updated visual studio and it works now.

C# WASM without Blazor

I want to be able to call C# code from JavaScript. The mono project used to have a WASM SDK that you could download from their old Jenkins server, but that is no longer public. Existing docs tend to point toward those builds. The Azure Devops builds do not include this SDK. A few messages I've seen on their Github account indicate that they are now focusing on the .NET 6 for WASM. I do not wish to use the Blazor components. Is there a way in .NET 6 to build a minimally sized WASM binary without the Blazor UI?
Yes it's absolutely possible. Blazor does not have a monopoly on C#/WASM and it's far from clear that it's going to wind up being the best long term option (and a lot of evidence it's not).
I recommend starting with the Uno WASM Bootstrap. https://github.com/unoplatform/Uno.Wasm.Bootstrap
2022-06-30 Edit -
More evidence Blazor is not the only game in town nor even at the forefront of innovation here:
https://visualstudiomagazine.com/articles/2022/06/29/uno-platform-4-4.aspx
The Mono WASM SDK is continued in the dotnet/runtime repo. The tooling based on old Packager.exe has evolved into a MSBuild/csproj based solution:
https://github.com/dotnet/runtime/tree/main/src/mono/wasm
samples:
https://github.com/dotnet/runtime/tree/main/src/mono/sample/wasm
The key issue when I trying to use code in a custom project (not within the sample) is that we need to reference a private assembly System.Private.Runtime.InteropServices.JavaScript.dll which is included in Microsoft.NETCore.App.Runtime.browser-wasm. The code is almost the same as WebAssembly.Bindings.dll in old mono wasm sdk.
Here is a screenshot of a WebGL page I created, based on dotnet/runtime/mono/wasm:
BTW there is a viewpoint that the performance of implementing WebGL via calling JavaScript functions from C#, is bad: https://marcoscobena.com/?i=wave-engine-web-performance
NativeAOT-LLVM, an experimental c# compiler not official supported by Microsoft, (https://github.com/dotnet/runtimelab/tree/feature/NativeAOT-LLVM) can also compile C# to Wasm without any UI framework requirements. There's a similar question about libraries at Compiling C# project to WebAssembly
It seems that dotnet 7 has improved WASM support. More information is provided in https://devblogs.microsoft.com/dotnet/dotnet-7-wasm/

Why there is a dependency to install NodeJs for a .Net core web application which uses angular template?

When I create a new .NET core web application in visual studio using angular template and try to run the barebone application, build error is thrown asking to install nodeJs. After studying that angular is totally a different package from NodeJs, why is this project has dependency on nodejs installation ?
Problem solved after installing nodejs, but not sure why nodejs is a dependency here.
FYI, I am relatively new to angular.
Typescript used by angular cant be understood by browers, so you need to transpile the code to javascript for make them work. The typescript transpiler for converting typescript to javascript requires nodejs.
NPM package mangager which helps in managing your project dependencies comes by default with nodejs
As Ameer Pappay mentioned, NodeJs is needed to transpile typescript into javascript and for other development tools that you might need while you develop your application. But once you create a distribution build, it can be served through any web server and will not require a NodeJs instance.

Where to configure Razor page language version to C# 6?

Recently I've tried to use some C# 6 new feature (interpolated strings) in my ASP.NET MVC (5) .cshtml view, but when running got an error message complaining about the $. It is clear the compiler in C# 5 compatibility mode, or worst it is a C# 5 compiler.
When in editor a popup warning warns me (I do not know it is VS or ReSharper) Feature 'Interpolated strings' is not available in C# 5. Please use language version 6 or greater.
The project itself was set to C# 6, and I can use C# 6 features in my build time compiled code like controllers etc.
Q: Where should I set page compiler version, and will this C# 6 compiler available when I deploy my web app to Azure there?
From String interpolation in a Razor view?:
This only works in MVC6. Alternatively, also from a comment on this link, you'll need to add the roslyn code dom package from ASP.Net.
<div>
#($"Hello {this.Model.SomeProperty}")
</div>
As far as Azure is concerned, please see this link. http://azure.microsoft.com/blog/2015/08/11/update-on-net-framework-4-6-and-azure/
With great power… The tooling, framework and Azure platform teams want
to ensure the powerful tools we give you to help build your dream is
matched by the responsibility we recognize we have to keep it running
in the cloud. At the time of the Visual Studio and Azure SDK 2.7
releases, Framework 4.6 wasn’t supported broadly throughout Azure.
This is due in large part to the fact that just as many teams (or
more) are responsible for the ongoing development and stability of the
Azure platform.
For now, we have an update on the availability of .NET Framework 4.6
for Azure App Service and an article demonstrating how to get .NET
Framework 4.6 working in your Cloud Service roles.
Azure IaaS
For customers using Azure’s Infrastructure as a Service
(IaaS) services, installation of .NET Framework 4.6 is manual. To
install .NET Framework 4.6 on an Azure IaaS virtual machine, the
process is as simple as logging into the virtual machine using Remote
Desktop. Once on the machine, the .NET Framework 4.6 installer can be
downloaded and installed directly onto the virtual machine. Customers
using Azure Automation could also choose to automate the installation
onto Azure virtual machines using PowerShell.
Azure App Service
Update The Azure App Service team is nearing the end
of the testing phase for .NET Framework 4.6 and planning the
deployment to the environments. Currently, the plan is to roll out the
updates to Azure App Service during August 2015.
Azure Cloud Services
Saurabh Bhatia authored an article in the Azure
documentation center outlining how to install the .NET Framework in a
Cloud Service Role. The content has been recently updated to include
commentary specific to .NET Framework 4.6. You can find the updated
article here on the Azure documentation center.
For me installing the Microsoft.CodeDom.Providers.DotNetCompilerPlatform NuGet package solved the problem.

Categories