When I first became interested in .Net Core + Angular, despite my knowledge in C#, Javascript, and Web Apps, I got a little bit lost. The technology is quite new and there is not always enough documentation to grasp the whole picture.

So, I went with templates included or downloaded from Visual Studio but was not satisfied with it. As I knew from experience, those ready-to-use solutions are great to give you an overview and some examples. But when you are looking for a specific solution, they just won’t do. Usually, when you need to customize things, they will fall apart.

Notes

My needs are very common:

Architecture

To spoil the surprise, this is what I did:

By having separate processes, you will also build way faster! Starting an Angular front takes more than 10 seconds, so if you are working on your API and haven’t touched the front, you will waste time on every debug.

Every time you want to add a service, you just have to create a new project. Imagine you want to add sign-ins to Google, Facebook, Github … You make a new .Net Core “Class Library” project called “Connexions” and put all the related configs and wrappers in it.

This modular architecture will allow you to manage big projects in the long run. If one day, you realize that the admin part could be done completely differently, you just unplug it and create a new project.

This is the structure with Visual Studio’s template types:

Model (Class Library)

View (Website)

The Angular project

Controller (Web API)

Admin (Web App MVC)

Development

What you need:

Source Code is here https://github.com/Wanchai/NetCore_Angular5_Template

For the sake of KISS, we will use an SQLite database, so you don’t have to install anything for that.

Create your solution -> Project

Open a command prompt in the folder of your choice:

  1. mkdir Project
  2. cd Project
  3. dotnet new sln -n Project

Or

Create the Admin -> Project.Admin

Here, you SHOULD use dotnet CLI as it creates a project with SQLite by default and it’s very convenient.

Commands

  1. dotnet new mvc -n Project.Admin -au Individual
  2. dotnet sln add Project.Admin/Project.Admin.csproj
As we want to share the same DB between projects, go to appsettings.json and replace DataSource=app.db by DataSource=..\\app.db

Or

At that point, you can press F5 and test your app. If you try to register, you will probably end up with this:

.NET Core

It’s because you changed the DB’s path, so it can’t find it. Just follow the instructions and refresh. It’s going to use the files in Data/Migrations to setup your DB. (command is: dotnet ef database update)

Because it’s a back-office, you want to protect it with a login:

  1. [Authorize]
  2. public class HomeController : Controller

With this, you won’t be able to access the home page without being logged in.

Create the DAL -> Project.DAL

In the main folder (Project) type,

  1. dotnet new classlib -n Project.DAL
  2. dotnet sln add Project.DAL/Project.DAL.csproj

/!\ If your solution is opened in VS 2017, you need to close the solution before and reopen it to see the changes.

Or

Create a folder Models

Create a public class Product.cs in it

Add those properties.

  1. public Guid Id { get; set; }
  2. public string Name { get; set; }
  3. public string Description { get; set; }

In the root folder, create the DbContext like so:

  1. using Microsoft.EntityFrameworkCore;
  2. using Project.DAL.Models;
  4. namespace Project.DAL
  5. {
  6. class ProjectDbContext : DbContext
  7. {
  8. public ProjectDbContext(DbContextOptions<ProjectDbContext> options) : base(options)
  9. {
  10. }
  12. public DbSet<Product> Product { get; set; }
  13. }
  14. }

Add the EntityFramework reference to your Project.DAL.csproj file

  1. <ItemGroup>
  2. <PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="2.0.1" />
  3. </ItemGroup>

Scaffold the controller in the admin project to manage the table

Or in the Project.Admin folder,

  1. dotnet aspnet-codegenerator controller -name ProductController -m Project.DAL.Models.Product -dc ApplicationDbContext --relativeFolderPath Controllers --useDefaultLayout --referenceScriptLibraries
Then create the table in your DB:
  1. dotnet ef migrations add AddProductTable
  2. dotnet ef database update
/!\ If the database does not want to update, it's probably because of SQLite. So delete the app.db file and everything in the Migrations folder, then retry the above command.
Build and test your app by going to /product

Create a few products as we are going to need them later.

.NET Core
Create the API -> Project.API

In the main folder (Project) type

  1. dotnet new webapi -n Project.API --use-launch-settings
  2. dotnet sln add Project.API/Project.API.csproj

Or

In Project.API.csproj add those lines to their related places.

  1. <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="2.0.0" />
  2. <DotNetCliToolReference Include="Microsoft.EntityFrameworkCore.Tools.DotNet" Version="2.0.1" />

Then dotnet restore to install them.

Add a reference to your DAL:

  1. dotnet add reference ..\Project.DAL\Project.DAL.csproj

Or

Add the connection string to the appsettings.json

  1. {
  2. "ConnectionStrings": {
  3. "DefaultConnection": "DataSource=..\\app.db"
  4. },
  5. "Logging": {
  6. "IncludeScopes": false,
  7. "LogLevel": {
  8. "Default": "Warning"
  9. }
  10. }
  11. }

And in Startup.cs, add the DbContext

  1. public void ConfigureServices(IServiceCollection services)
  2. {
  3. services.AddDbContext<ProjectDbContext>(options =>
  4. options.UseSqlite(Configuration.GetConnectionString("DefaultConnection")));
  6. services.AddCors();
  8. services.AddMvc();
  9. }

Scaffold the API controller

Or in the Project.API folder

dotnet aspnet-codegenerator controller -api -name ProductController -m Project.DAL.Models.Product -dc Project.DAL.ProjectDbContext --relativeFolderPath Controllers --useDefaultLayout --referenceScriptLibraries

Build your app and go to /api/product - You should see something like this:

.NET Core

Create the front: Project.Angular

To install Angular, make sure the CLI is installed

  1. npm install -g @angular/cli

Then create the project in your Project folder and test it:

  1. ng new Project.Angular
  2. cd Project.Angular
  3. ng serve -o

Your browser should open http://localhost:4200 and show your Angular app.

Add it to your solution.

/!\ Attention: There is a bug in VS 2017 (see here)

If it’s not working, the only solution is to add it manually to the .sln file (I know: ugly!)

  1. Project("{E24C65DC-7377-472B-9ABA-BC803B73C61A}") = "Project.Angular", "Project.Angular\", "{19A933CF-623B-4F15-AC94-74F308C4B148}"
  2. EndProject

You should now have something like this:

.NET Core

Now, create a product class and a product component:

You can use this wonderful tool (QuickType) to transform your JSON result directly to TypeScript.

  1. <app-product></app-product>
Where to go from here

Install Webpack in the Admin project: All your admin assets will be located in wwwroot. And you will have to manage them yourself in the bundleconfig.json file. If you want to work on the UI, it can become tiresome.

Use the Design-time DbContext

Make a config service for Angular to put all the routes to the API. I think it’s better to have them all in a single place.

Projects ideas/examples
G
M
T
Text-to-speech function is limited to 200 characters
Options : History : Feedback : DonateClose