Click here to Skip to main content
13,589,271 members
Click here to Skip to main content
Add your own
alternative version

Stats

6.6K views
23 bookmarked
Posted 22 May 2018
Licenced Ms-PL

How to Create an App with Angular 6 and ASP.NET Core 2.0

, 23 May 2018
Rate this:
Please Sign up or sign in to vote.
This article would help you in getting started from scratch with Angular 6, ASP.NET Core & Angular CLI using Visual Studio 2017.

Introduction

It has become a challenging task to start a new project using Angular and ASP.NET Core though there is an Angular project template provided in Visual Studio 2017 using which we can create an Angular 4 application with ASP.NET Core 2.0 which is useful to explore and learn but it becomes difficult if we need to upgrade it from Angular 4 to Angular 5 or 6. I always feel it is better to learn by creating a project with an empty solution and add more things to it when required so that we have complete control on our solution.

As prerequisites, you would need the install the following if they are not already installed:

  1. Visual Studio 2017
  2. Node.js and npm latest version
  3. ASP.NET Core 2.0

Steps for Creating an App with Angular 6 & ASP.NET Core 2.0 using Visual Studio 2017

  1. Create a new ASP.NET Core Web Application.

    clip_image002_thumb

  2. Choose empty template and click OK.

    clip_image004_thumb

  3. You should be able to see a solution with ASP.NET Core 2.0 application.

    clip_image006_thumb

  4. Right click on the project, add new folder and name it as Controllers.

    clip_image008_thumb

  5. Right click on the Controllers folder, add new Item by right clicking on Controllers folder and click Add > Controller and name it ValuesController.

    clip_image010_thumb

  6. Select API Controller and click Add:

    clip_image012_thumb

  7. Now you would see ValuesController in the Controllers folder.
  8. Hit Ctrl + F5 to run it, you would see “Hello World!” on your browser.

    clip_image014_thumb

  9. Try to navigate to localhost:<Port>/api/values, you would still see “Hello World!” instead of ValuesController as you still need to configure Startup.cs.
  10. Update Startup.cs as shown below:
    public class Startup
    {
      // This method gets called by the runtime. Use this method to add services to the container.
      // For more information on how to configure your application, 
      // visit https://go.microsoft.com/fwlink/?LinkID=398940
      public void ConfigureServices(IServiceCollection services)
      {
        services.AddMvc();
      }
     
      // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
      public void Configure(IApplicationBuilder app, IHostingEnvironment env)
      {
        if (env.IsDevelopment())
        {
          app.UseDeveloperExceptionPage();
        }
     
        app.UseMvc();
     
        app.UseDefaultFiles();
        app.UseStaticFiles();
        //app.Run(async (context) =>
        //{
        //  await context.Response.WriteAsync("Hello World!");
        //});
      }
    }
  11. Now when you refresh your browser with url localhost:<Port>/api/values, you would be able to see the below:

    image_thumb

  12. Now it's time to add Angular 6 app through Angular CLI to the same project, to do that, first open Developer Command Prompt.

    image_thumb68

  13. Then install Angular CLI globally using the below command in the Developer Command Prompt.

     

    npm install -g @angular/cli
  14. After installing Angular CLI globally, now navigate to Solution folder using command cd.. and then:

    run ng new MyFirstAngular6Core2App. Note that here name of the Angular App should be the same as the name of ASP.NET Core project, in my case, it is MyFirstAngular6Core2App.

    image_thumb1

  15. Angular App would be created in your solution and your solution would look like below:

    image_thumb5

  16. Now before running the Angular App, we need to configure few things - for that, first edit the .csproj file.

    image_thumb3

  17. Modify the .csproj file, under the PropertyGroup, add <TypeScriptCompilerBlocked>true</TypeScriptCompilerBlocked> <PostBuildEvent>ng build --aot</PostBuildEvent> as shown below, this will compile the TypeScript files using Angular CLI instead of Visual Studio.

    image_thumb7

  18. Now edit angular.json file and set the outputPath to wwwroot. This setting will make sure that Angular CLI will copy the assets to wwwroot after the build (Ctrl + F5).

    image_thumb9

  19. Now execute ng build in Developer Command Prompt to build the angular App and hit Ctrl + F5 in Visual Studio to run the App and you should see the below App in the browser.

    image_thumb11

  20. To call ValuesController from Angular App, we need to modify app.module.ts, app.component.ts and app.component.html as follows:

    app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { HttpModule } from '@angular/http';
     
    import { AppComponent } from './app.component';
     
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        HttpModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

    app.component.ts

    import { Component, Inject } from '@angular/core';
    import { Http } from '@angular/http';
     
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
     
    export class AppComponent {
      title = 'app';
      public values: string[];
     
      constructor(private http: Http) {
        this.http.get('/api/values').subscribe(result => {
          this.values = result.json() as string[];
        }, error => console.error(error));
      }
     
    }

    app.component.html

    <!--The content below is only a placeholder and can be replaced.-->
    <div style="text-align:center">
      <h1>
        Welcome to {{ title }}!
      </h1>
      <p *ngIf="!values"><em>Loading...</em></p>
     
      <div style="height: 350px; overflow: auto">
        <table class='table' *ngIf="values">
          <thead>
            <tr>
              <th>Values</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let value of values">
              <td>{{ value }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  21. Run ng build in Developer Command Prompt.

    image_thumb2

  22. Hit Ctrl + F5 in Visual Studio to run it and you should see the below in your browser.

    image_thumb4

You can download the source code from here.

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)

Share

About the Author

Arun Endapally
Technical Lead Thomson Reuters
India India
No Biography provided

You may also be interested in...

Comments and Discussions

 
QuestionNot working Pin
Hardik_savani24-May-18 3:27
memberHardik_savani24-May-18 3:27 
AnswerRe: Not working Pin
Arun Endapally29-May-18 4:34
professionalArun Endapally29-May-18 4:34 
GeneralMy vote of 5 Pin
Klaus Luedenscheidt23-May-18 9:14
memberKlaus Luedenscheidt23-May-18 9:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03 | 2.8.180615.1 | Last Updated 23 May 2018
Article Copyright 2018 by Arun Endapally
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid