Post
Ask Question

Combining Angular 5 CLI Project And ASP.NET Core Project

Angular 5 is catching the attention of all the developers. And .NET Core from Microsoft is already popular. So what happens if you create an Angular project on the command line, and then you want to integrate it with ASP.NET Core framework? Let us see!

Prerequisites

You need Node 6.9 or higher and NPM version 3 or higher

Step 0. Install npm and install Angular CLI

  • npm install –g @angular/cli@latest

Here –g indicates you are installing globally, i.e., not for this folder only.

Let's assume you want to create a shopping cart application on an Angular 5 framework.

Step 1. Create an Angular project in the command line

Type “ng new classicbank”.

This will create a folder named “classicbank” and an Angular 5 based application with all subdirectories under /src folder. But more importantly, it will create files like appsetting.json, karma.conf.json, and package.json etc.

All the Angular files (.ts files) will be organized under \src folder.

Now, I want to create some components for the Angular project. For that, you can use the command -

  ng generate component  <component name>

Step 2. Create the asp.net core project at the command line.

Enter the folder by typing this command

>cd classicbank

Now, create the project

>dotnet new angular

This will create a new project in the .NET Core framework.

Now, open the above project in Visual Studio 2017.

ASP.NET Core

Step 3. Configuring startup.cs file to integrate static file

  1. if (env.IsDevelopment()) {  
  2.     app.UseDeveloperExceptionPage();  
  3. }  
  4. app.Use(async (context, next) => {  
  5.     await next();  
  6.     if (context.Response.StatusCode == 404 && !context.Request.Path.Value.StartsWith("/api/")) {  
  7.         context.Request.Path = "/index.html";  
  8.         await next();  
  9.     }  
  10. });  
  11. app.UseStaticFiles();  
  12. app.UseDefaultFiles();  
  13. app.UseMvcWithDefaultRoute();  

Step 4. router-outlet tag in app.component.html

  1. <router-outlet></router-outlet>  

Step 5. ng build command & ng serve command

Type the ng build command at the command prompt.

>ng build

This will build the Angular 4/5 application, and convert the TypeScript to JavaScript.

The ng serve will start the Angular 4/5 application. You can open it in the browser by typing localhost:4200

But the limitation of the ng serve is that it will serve only the static content, and the web API will not be available. So, for your application to fetch dynamic data from web API, you need to run the entire project through Visual Studio 2017.

Step 6. Running/debugging thru visual studio 2017

  1. Delete the webpack..config.js
  2. Delete the ClientApp folder. This folder is created by Visual Studio to store the static content like .ts files, .html files, and .spec.ts files. But we already have them under src folder

Modify the “angular-cli.js” file.

  1. "apps": [{  
  2.         "root": "src",  
  3.         "outDir": "wwwroot",  
  4.         "assets": ["assets", "favicon.ico"], 

As you can see, the outDir is modified to wwwroot. So when we compile th .ts file and index.html files, they get created in wwwroot folder.

And as you can see, the origin of the files has been kept as “src”, so ClientApp is no longer necessary.

Edit JSON to make it look like this:

  1. {  
  2.     "compileOnSave": false,  
  3.     "compilerOptions": {  
  4.         "outDir": "./dist/out_tsc",  
  5.         "sourceMap": true,  
  6.         "declaration": false,  
  7.         "moduleResolution": "node",  
  8.         "emitDecoratorMetadata": true,  
  9.         "experimentalDecorators": true,  
  10.         "target": "es5",  
  11.         "typeRoots": ["node_modules/@types"],  
  12.         "lib": ["es2017", "dom"]  
  13.     }  
  14. }  

You can see from the content of tsconfig.json, I have removed all reference to Webpack.

Edit the .csproj file (the project file). Right-click on the project, and select edit classicbank.csproj. My file looks like the following.

  1. <Project Sdk="Microsoft.NET.Sdk.Web">  
  2.     <PropertyGroup>  
  3.         <TargetFramework>netcoreapp2.0</TargetFramework>  
  4.         <!--<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>-->  
  5.         <TypeScriptToolsVersion>2.7</TypeScriptToolsVersion>  
  6.         <!--<IsPackable>false</IsPackable>-->  
  7.     </PropertyGroup>  
  8.     <ItemGroup>  
  9.         <None Remove="src\app\weather.data.type.ts" /> </ItemGroup>  
  10.     <ItemGroup>  
  11.         <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.5" />  
  12.         <PackageReference Include="Microsoft.TypeScript.Compiler" Version="2.7.2" />  
  13.         <!--<PackageReference Include="Microsoft.AspNetCore.Mvc" Version="2.0.2" /> -->  
  14.         <PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="2.0.1" />  
  15.         <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="2.0.2" /> </ItemGroup>  
  16.     <ItemGroup>  
  17.         <None Include="wwwroot\index.html" /> </ItemGroup>  
  18.     <ItemGroup>  
  19.         <TypeScriptCompile Include="src\app\accountservice.service.ts" />  
  20.         <TypeScriptCompile Include="src\app\weather.data.type.ts" /> </ItemGroup>  
  21.     <ItemGroup>  
  22.         <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.5" /> </ItemGroup>  
  23.     <ItemGroup>  
  24.         <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.2" /> </ItemGroup>  
  25. </Project>  

Again note, I have removed all reference to webpack from .csproj file. You still need the Angular CLI interface to build/compile the TypeScript to JavaScript.

So at the command prompt, type > ng build

And then, debug the application to test it in the browser, by pressing F5 in Visual Studio.


Similar Articles