The application uses ASP.NET Core 5 + Angular 9

Thursday, 18/06/2020

Tram Ho

Install Visual Studio 2019 preview, .NET Core SDK 5

Create a new project

The first run will take quite a while, due to the need to download the libraries. Wait patiently for about 5 minutes, not the Visual Studio 2019 preview hangs. The web browser will be turned off automatically. If there is an error warning dialog box, accept it. Because the results still appear:

Some source files illustrate

File SKClientAppsrcappcountercounter.component.html

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> h1</span> <span class="token punctuation">&gt;</span></span> Counter <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> h1</span> <span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> p</span> <span class="token punctuation">&gt;</span></span> This is a simple example of an Angular component. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> p</span> <span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> p</span> <span class="token attr-name">aria-live</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> polite <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> Current count: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> strong</span> <span class="token punctuation">&gt;</span></span> {{ currentCount }} <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> strong</span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> p</span> <span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> button</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> btn btn-primary <span class="token punctuation">"</span></span> <span class="token attr-name">(click)</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> incrementCounter() <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> Increment <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> button</span> <span class="token punctuation">&gt;</span></span>

< h1 > Counter </ h1 >

< p > This is a simple example of an Angular component. </ p >

< p aria-live = " polite " > Current count: < strong > {{ currentCount }} </ strong > </ p >

< button class = " btn btn-primary " (click) = " incrementCounter() " > Increment </ button >

File SKClientAppsrcappcountercounter.component.ts

<span class="token keyword">import</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/core'</span> <span class="token punctuation">;</span>

@ <span class="token function">Component</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
  selector <span class="token punctuation">:</span> <span class="token string">'app-counter-component'</span> <span class="token punctuation">,</span>
  templateUrl <span class="token punctuation">:</span> <span class="token string">'./counter.component.html'</span>
<span class="token punctuation">}</span> <span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">CounterComponent</span> <span class="token punctuation">{</span>
  <span class="token keyword">public</span> currentCount <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span>

  <span class="token keyword">public</span> <span class="token function">incrementCounter</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span> <span class="token punctuation">.</span> currentCount <span class="token operator">++</span> <span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

import { Component } from '@angular/core' ;

@ Component ( {

selector : 'app-counter-component' ,

templateUrl : './counter.component.html'

} )

export class CounterComponent {

public currentCount = 0 ;

public incrementCounter ( ) {

this . currentCount ++ ;

}

File SKClientAppsrcappfetch-datafetch-data.component.ts

<span class="token keyword">import</span> <span class="token punctuation">{</span> Component <span class="token punctuation">,</span> Inject <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/core'</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> HttpClient <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/common/http'</span> <span class="token punctuation">;</span>

@ <span class="token function">Component</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
  selector <span class="token punctuation">:</span> <span class="token string">'app-fetch-data'</span> <span class="token punctuation">,</span>
  templateUrl <span class="token punctuation">:</span> <span class="token string">'./fetch-data.component.html'</span>
<span class="token punctuation">}</span> <span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">FetchDataComponent</span> <span class="token punctuation">{</span>
  <span class="token keyword">public</span> forecasts <span class="token punctuation">:</span> WeatherForecast <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>

  <span class="token keyword">constructor</span> <span class="token punctuation">(</span> http <span class="token punctuation">:</span> HttpClient <span class="token punctuation">,</span> @ <span class="token function">Inject</span> <span class="token punctuation">(</span> <span class="token string">'BASE_URL'</span> <span class="token punctuation">)</span> baseUrl <span class="token punctuation">:</span> <span class="token builtin">string</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    http <span class="token punctuation">.</span> <span class="token keyword">get</span> <span class="token operator">&lt;</span> WeatherForecast <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token operator">&gt;</span> <span class="token punctuation">(</span> baseUrl <span class="token operator">+</span> <span class="token string">'weatherforecast'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">subscribe</span> <span class="token punctuation">(</span> result <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span> <span class="token punctuation">.</span> forecasts <span class="token operator">=</span> result <span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token punctuation">,</span> error <span class="token operator">=&gt;</span> <span class="token builtin">console</span> <span class="token punctuation">.</span> <span class="token function">error</span> <span class="token punctuation">(</span> error <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">interface</span> <span class="token class-name">WeatherForecast</span> <span class="token punctuation">{</span>
  date <span class="token punctuation">:</span> <span class="token builtin">string</span> <span class="token punctuation">;</span>
  temperatureC <span class="token punctuation">:</span> <span class="token builtin">number</span> <span class="token punctuation">;</span>
  temperatureF <span class="token punctuation">:</span> <span class="token builtin">number</span> <span class="token punctuation">;</span>
  summary <span class="token punctuation">:</span> <span class="token builtin">string</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

import { Component , Inject } from '@angular/core' ;

import { HttpClient } from '@angular/common/http' ;

@ Component ( {

selector : 'app-fetch-data' ,

templateUrl : './fetch-data.component.html'

} )

export class FetchDataComponent {

public forecasts : WeatherForecast [ ] ;

constructor ( http : HttpClient , @ Inject ( 'BASE_URL' ) baseUrl : string ) {

http . get < WeatherForecast [ ] > ( baseUrl + 'weatherforecast' ) . subscribe ( result => {

this . forecasts = result ;

} , error => console . error ( error ) ) ;

}

interface WeatherForecast {

date : string ;

temperatureC : number ;

temperatureF : number ;

summary : string ;

}

Other source files can be viewed in the newly created project.

Update to the latest version SKClientApppackage.json

<span class="token punctuation">{</span>
  <span class="token property">"name"</span> <span class="token operator">:</span> <span class="token string">"sk"</span> <span class="token punctuation">,</span>
  <span class="token property">"version"</span> <span class="token operator">:</span> <span class="token string">"0.0.0"</span> <span class="token punctuation">,</span>
  <span class="token property">"scripts"</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">"ng"</span> <span class="token operator">:</span> <span class="token string">"ng"</span> <span class="token punctuation">,</span>
    <span class="token property">"start"</span> <span class="token operator">:</span> <span class="token string">"ng serve"</span> <span class="token punctuation">,</span>
    <span class="token property">"build"</span> <span class="token operator">:</span> <span class="token string">"ng build"</span> <span class="token punctuation">,</span>
    <span class="token property">"build:ssr"</span> <span class="token operator">:</span> <span class="token string">"ng run SK:server:dev"</span> <span class="token punctuation">,</span>
    <span class="token property">"test"</span> <span class="token operator">:</span> <span class="token string">"ng test"</span> <span class="token punctuation">,</span>
    <span class="token property">"lint"</span> <span class="token operator">:</span> <span class="token string">"ng lint"</span> <span class="token punctuation">,</span>
    <span class="token property">"e2e"</span> <span class="token operator">:</span> <span class="token string">"ng e2e"</span>
  <span class="token punctuation">}</span> <span class="token punctuation">,</span>
  <span class="token property">"private"</span> <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span>
  <span class="token property">"dependencies"</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">"@angular/animations"</span> <span class="token operator">:</span> <span class="token string">"9.1.11"</span> <span class="token punctuation">,</span>
    <span class="token property">"@angular/common"</span> <span class="token operator">:</span> <span class="token string">"9.1.11"</span> <span class="token punctuation">,</span>
    <span class="token property">"@angular/compiler"</span> <span class="token operator">:</span> <span class="token string">"9.1.11"</span> <span class="token punctuation">,</span>
    <span class="token property">"@angular/core"</span> <span class="token operator">:</span> <span class="token string">"9.1.11"</span> <span class="token punctuation">,</span>
    <span class="token property">"@angular/forms"</span> <span class="token operator">:</span> <span class="token string">"9.1.11"</span> <span class="token punctuation">,</span>
    <span class="token property">"@angular/platform-browser"</span> <span class="token operator">:</span> <span class="token string">"9.1.11"</span> <span class="token punctuation">,</span>
    <span class="token property">"@angular/platform-browser-dynamic"</span> <span class="token operator">:</span> <span class="token string">"9.1.11"</span> <span class="token punctuation">,</span>
    <span class="token property">"@angular/platform-server"</span> <span class="token operator">:</span> <span class="token string">"9.1.11"</span> <span class="token punctuation">,</span>
    <span class="token property">"@angular/router"</span> <span class="token operator">:</span> <span class="token string">"9.1.11"</span> <span class="token punctuation">,</span>
    <span class="token property">"@nguniversal/module-map-ngfactory-loader"</span> <span class="token operator">:</span> <span class="token string">"9.1.11"</span> <span class="token punctuation">,</span>
    <span class="token property">"aspnet-prerendering"</span> <span class="token operator">:</span> <span class="token string">"^3.0.1"</span> <span class="token punctuation">,</span>
    <span class="token property">"bootstrap"</span> <span class="token operator">:</span> <span class="token string">"4.5.0"</span> <span class="token punctuation">,</span>
    <span class="token property">"core-js"</span> <span class="token operator">:</span> <span class="token string">"3.6.5"</span> <span class="token punctuation">,</span>
    <span class="token property">"jquery"</span> <span class="token operator">:</span> <span class="token string">"3.5.1"</span> <span class="token punctuation">,</span>
    <span class="token property">"oidc-client"</span> <span class="token operator">:</span> <span class="token string">"1.10.1"</span> <span class="token punctuation">,</span>
    <span class="token property">"popper.js"</span> <span class="token operator">:</span> <span class="token string">"^1.16.0"</span> <span class="token punctuation">,</span>
    <span class="token property">"rxjs"</span> <span class="token operator">:</span> <span class="token string">"6.5.5"</span> <span class="token punctuation">,</span>
    <span class="token property">"zone.js"</span> <span class="token operator">:</span> <span class="token string">"0.10.3"</span>
  <span class="token punctuation">}</span> <span class="token punctuation">,</span>
  <span class="token property">"devDependencies"</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">"@angular-devkit/build-angular"</span> <span class="token operator">:</span> <span class="token string">"^0.901.9"</span> <span class="token punctuation">,</span>
    <span class="token property">"@angular/cli"</span> <span class="token operator">:</span> <span class="token string">"9.1.11"</span> <span class="token punctuation">,</span>
    <span class="token property">"@angular/compiler-cli"</span> <span class="token operator">:</span> <span class="token string">"9.1.11"</span> <span class="token punctuation">,</span>
    <span class="token property">"@angular/language-service"</span> <span class="token operator">:</span> <span class="token string">"9.1.11"</span> <span class="token punctuation">,</span>
    <span class="token property">"@types/jasmine"</span> <span class="token operator">:</span> <span class="token string">"~3.4.4"</span> <span class="token punctuation">,</span>
    <span class="token property">"@types/jasminewd2"</span> <span class="token operator">:</span> <span class="token string">"~2.0.8"</span> <span class="token punctuation">,</span>
    <span class="token property">"@types/node"</span> <span class="token operator">:</span> <span class="token string">"~12.11.6"</span> <span class="token punctuation">,</span>
    <span class="token property">"codelyzer"</span> <span class="token operator">:</span> <span class="token string">"^5.2.0"</span> <span class="token punctuation">,</span>
    <span class="token property">"jasmine-core"</span> <span class="token operator">:</span> <span class="token string">"~3.5.0"</span> <span class="token punctuation">,</span>
    <span class="token property">"jasmine-spec-reporter"</span> <span class="token operator">:</span> <span class="token string">"~4.2.1"</span> <span class="token punctuation">,</span>
    <span class="token property">"karma"</span> <span class="token operator">:</span> <span class="token string">"^5.0.2"</span> <span class="token punctuation">,</span>
    <span class="token property">"karma-chrome-launcher"</span> <span class="token operator">:</span> <span class="token string">"~3.1.0"</span> <span class="token punctuation">,</span>
    <span class="token property">"karma-coverage-istanbul-reporter"</span> <span class="token operator">:</span> <span class="token string">"~2.1.0"</span> <span class="token punctuation">,</span>
    <span class="token property">"karma-jasmine"</span> <span class="token operator">:</span> <span class="token string">"~2.0.1"</span> <span class="token punctuation">,</span>
    <span class="token property">"karma-jasmine-html-reporter"</span> <span class="token operator">:</span> <span class="token string">"^1.4.2"</span> <span class="token punctuation">,</span>
    <span class="token property">"typescript"</span> <span class="token operator">:</span> <span class="token string">"3.5.3"</span>
  <span class="token punctuation">}</span> <span class="token punctuation">,</span>
  <span class="token property">"optionalDependencies"</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">"node-sass"</span> <span class="token operator">:</span> <span class="token string">"^4.12.0"</span> <span class="token punctuation">,</span>
    <span class="token property">"protractor"</span> <span class="token operator">:</span> <span class="token string">"~5.4.2"</span> <span class="token punctuation">,</span>
    <span class="token property">"ts-node"</span> <span class="token operator">:</span> <span class="token string">"~8.4.1"</span> <span class="token punctuation">,</span>
    <span class="token property">"tslint"</span> <span class="token operator">:</span> <span class="token string">"~5.20.0"</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

{

"name" : "sk" ,

"version" : "0.0.0" ,

"scripts" : {

"ng" : "ng" ,

"start" : "ng serve" ,

"build" : "ng build" ,

"build:ssr" : "ng run SK:server:dev" ,

"test" : "ng test" ,

"lint" : "ng lint" ,

"e2e" : "ng e2e"

} ,

"private" : true ,

"dependencies" : {

"@angular/animations" : "9.1.11" ,

"@angular/common" : "9.1.11" ,

"@angular/compiler" : "9.1.11" ,

"@angular/core" : "9.1.11" ,

"@angular/forms" : "9.1.11" ,

"@angular/platform-browser" : "9.1.11" ,

"@angular/platform-browser-dynamic" : "9.1.11" ,

"@angular/platform-server" : "9.1.11" ,

"@angular/router" : "9.1.11" ,

"@nguniversal/module-map-ngfactory-loader" : "9.1.11" ,

"aspnet-prerendering" : "^3.0.1" ,

"bootstrap" : "4.5.0" ,

"core-js" : "3.6.5" ,

"jquery" : "3.5.1" ,

"oidc-client" : "1.10.1" ,

"popper.js" : "^1.16.0" ,

"rxjs" : "6.5.5" ,

"zone.js" : "0.10.3"

} ,

"devDependencies" : {

"@angular-devkit/build-angular" : "^0.901.9" ,

"@angular/cli" : "9.1.11" ,

"@angular/compiler-cli" : "9.1.11" ,

"@angular/language-service" : "9.1.11" ,

"@types/jasmine" : "~3.4.4" ,

"@types/jasminewd2" : "~2.0.8" ,

"@types/node" : "~12.11.6" ,

"codelyzer" : "^5.2.0" ,

"jasmine-core" : "~3.5.0" ,

"jasmine-spec-reporter" : "~4.2.1" ,

"karma" : "^5.0.2" ,

"karma-chrome-launcher" : "~3.1.0" ,

"karma-coverage-istanbul-reporter" : "~2.1.0" ,

"karma-jasmine" : "~2.0.1" ,

"karma-jasmine-html-reporter" : "^1.4.2" ,

"typescript" : "3.5.3"

} ,

"optionalDependencies" : {

"node-sass" : "^4.12.0" ,

"protractor" : "~5.4.2" ,

"ts-node" : "~8.4.1" ,

"tslint" : "~5.20.0"

}

Clean project, then rebuild, so that the relevant libraries are the latest.

Share the news now

Source : Viblo

The application uses ASP.NET Core 5 + Angular 9

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers