Getting Started with Angular CLI as Front end in ASP.NET MVC
28 Sep 20236 minutes to read
This document explains how to create an ASP.NET MVC framework with an Angular CLI project as the front end and integrate Syncfusion Angular UI components.
Prerequisites
Before getting started with Syncfusion Angular Components in an ASP.NET MVC with Angular project, check whether the following are installed on the developer machine.
Create an ASP.NET MVC Web application
Create a new ASP.NET MVC Web application using the Microsoft template.
1.Open the Visual Studio and select the create a new project
option.
2.Search the MVC template in the search box and select the ASP.NET Web Application(.NET Framework)
template.
3.Enter the project name as SyncfusionAngularASPNETMVC
and click the next button.
4.Then, select MVC
as a project template and click Create. Now the application is created.
Create Angular CLI application
1.Open the Developer Command Prompt
from Visual Studio, as follows.
2.Create an Angular CLI application by executing the ng new ClientApp
command, as shown in the following image.
3.Navigate to the ClientApp directory using the cd ClientApp
command.
4.Install and add the Syncfusion Angular components as described in the Getting Started with Angular CLI documentation.
5.Then, change the outputPath
value to ../Scripts/ClientApp
for the production build in the angular.json
file.
"projects": {
"ClientApp": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "../Scripts/ClientApp",
}
}
}
}
}
Configuring ASP.NET MVC application
For building Angular application using MS Build
To automate the installation and building of the Angular application whenever the MVC application is built, add MS Build configuration to the end of the SyncfusionAngularASPNETMVC.csproj
file, as shown in the following code sample.
<PropertyGroup>
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
<TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
<IsPackable>false</IsPackable>
<SpaRoot>ClientApp\</SpaRoot>
<DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
<BuildServerSideRenderer>false</BuildServerSideRenderer>
</PropertyGroup>
<ItemGroup>
<!-- Don't publish the SPA source files, but do show them in the project files list -->
<Content Remove="$(SpaRoot)**" />
<None Remove="$(SpaRoot)**" />
<None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
</ItemGroup>
<Target Name="BeforeBuild" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build --prod -- --base-href /" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />
<!-- Include the newly-built files in the publish output -->
<ItemGroup>
<DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
<DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
<ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
<RelativePath>%(DistFiles.Identity)</RelativePath>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
</ResolvedFileToPublish>
</ItemGroup>
</Target>
Configure MVC Bundle with Angular production scripts
To configure the MVC bundle with Angular production script and style files, modify the App_Start\BundleConfig.cs
file as shown in the following code snippet.
using System.Web;
using System.Web.Optimization;
namespace SyncfusionAngularASPNETMVC
{
public class BundleConfig
{
// For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new Bundle("~/bundles/clientapp").Include(
"~/Scripts/ClientApp/runtime.*",
"~/Scripts/ClientApp/polyfills.*",
"~/Scripts/ClientApp/main.*"));
bundles.Add(new StyleBundle("~/Content/clientapp").Include(
"~/Scripts/ClientApp/styles.*"));
Include Angular production scripts in MVC
To include the Angular production scripts and style files, include the following highlighted code in the ~/Views/Shared/_Layout.cshtml
file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<base href="/" />
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/clientapp")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
@RenderBody()
...
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/clientapp")
@RenderSection("scripts", required: false)
</body>
</html>
Add the <app-root>
tag in the ~/Views/Home/index.cshtml
file.
@{
ViewBag.Title = "Home Page";
}
<app-root></app-root>
Run the Application
Run the application from Visual Studio to render the component.