Open in app

Sign in

Write

Sign in

Building my DotNetCore 2.1 and Angular CLI 6.1 application

latenightninjacoder
6 min readJul 26, 2018

So I have this ticket at work for a new web application that I am going to build using .NET Core 2.1 and using Angular CLI 6.1. For starters, I want to make sure that I have the latest nodejs and dotnetcore installed on my machine.

PS C:\SandBox> node --version
v10.6.0
PS C:\SandBox> dotnet --version
2.1.302
PS C:\SandBox>

My dotnetcore package seems to be alright. My nodejs is still okay but it is nice to have the latest version available. Let’s go download and install the latest version from Node.js website which is 10.7.0 as of this writing.

I also need the latest Angular CLI package installed. I usually install Angular CLI globally.

npm install -g @angular/cli (or npm install -g @angular/cli@latest)

I also need the ASP.NET core Angular template which can be installed via:

dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates

Now I have my dotnet project templates installed.

Installing Microsoft.DotNet.Web.Spa.ProjectTemplates 2.0.0.

Let’s create a new Angular project.

dotnet new angular -o YetAnotherAngularProject

Something is wrong. It didn’t generated an Angular project. Let’s try it again with some parameters.

PS C:\SandBox> dotnet new angular -o YetAnotherAngularProject -f netcoreapp2.1 --exclude-launch-settings false
The template "ASP.NET Core with Angular" was created successfully.

*short clap*

It generated my these files.

PS C:\SandBox> cd .\YetAnotherAngularProject\
PS C:\SandBox\YetAnotherAngularProject> lsDirectory: C:\SandBox\YetAnotherAngularProjectMode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----        7/26/2018  11:51 PM                ClientApp
d-----        7/26/2018  11:51 PM                Controllers
d-----        7/26/2018  11:51 PM                obj
d-----        7/26/2018  11:51 PM                Pages
d-----        7/26/2018  11:51 PM                Properties
d-----        7/26/2018  11:51 PM                wwwroot
-a----        7/26/2018  11:51 PM           3800 .gitignore
-a----        7/26/2018  11:51 PM            146 appsettings.Development.json
-a----        7/26/2018  11:51 PM            105 appsettings.json
-a----        7/26/2018  11:51 PM            643 Program.cs
-a----        7/26/2018  11:51 PM           2293 Startup.cs
-a----        7/26/2018  11:51 PM           2754 YetAnotherAngularProject.csproj

Now I am not going to talk about project structure here and all that jazz. Let’s open this project from Visual Studio 2017 and build it.

1>------ Build started: Project: YetAnotherAngularProject, Configuration: Debug Any CPU ------1>YetAnotherAngularProject -> C:\SandBox\YetAnotherAngularProject\bin\Debug\netcoreapp2.1\YetAnotherAngularProject.dll1>YetAnotherAngularProject -> C:\SandBox\YetAnotherAngularProject\bin\Debug\netcoreapp2.1\YetAnotherAngularProject.Views.dll1>v10.7.01>Restoring dependencies using 'npm'. This may take several minutes...1>1>> uws@9.14.0 install C:\SandBox\YetAnotherAngularProject\ClientApp\node_modules\uws1>> node-gyp rebuild > build_log.txt 2>&1 || exit 01>1>1>> node-sass@4.9.0 install C:\SandBox\YetAnotherAngularProject\ClientApp\node_modules\node-sass1>> node scripts/install.js1>1>Downloading binary from https://github.com/sass/node-sass/releases/download/v4.9.0/win32-x64-64_binding.node1>Download complete1>Binary saved to C:\SandBox\YetAnotherAngularProject\ClientApp\node_modules\node-sass\vendor\win32-x64-64\binding.node1>Caching binary to C:\Users\iamweasel\AppData\Roaming\npm-cache\node-sass\4.9.0\win32-x64-64_binding.node1>1>> uglifyjs-webpack-plugin@0.4.6 postinstall C:\SandBox\YetAnotherAngularProject\ClientApp\node_modules\webpack\node_modules\uglifyjs-webpack-plugin1>> node lib/post_install.js1>1>1>> node-sass@4.9.0 postinstall C:\SandBox\YetAnotherAngularProject\ClientApp\node_modules\node-sass1>> node scripts/build.js1>1>Binary found at C:\SandBox\YetAnotherAngularProject\ClientApp\node_modules\node-sass\vendor\win32-x64-64\binding.node1>Testing binary1>Binary is fine1>npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.3 (node_modules\fsevents):1>npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})1>1>added 1260 packages from 1244 contributors and audited 7698 packages in 54.99s1>found 47 vulnerabilities (4 low, 32 moderate, 11 high)1>  run `npm audit fix` to fix them, or `npm audit` for details========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========

Looks fine so far but what are those npm audit fix messages ??!!?? Let’s put a pin on that later. Let’s just go ahead and execute the npm audit fix.

PS C:\SandBox\YetAnotherAngularProject> cd ClientApp
PS C:\SandBox\YetAnotherAngularProject\ClientApp> lsDirectory: C:\SandBox\YetAnotherAngularProject\ClientAppMode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----        7/26/2018  11:51 PM                e2e
d-----        7/26/2018  11:58 PM                node_modules
d-----        7/26/2018  11:51 PM                src
-a----        7/26/2018  11:51 PM           1408 .angular-cli.json
-a----        7/26/2018  11:51 PM            258 .editorconfig
-a----        7/26/2018  11:51 PM            572 .gitignore
-a----        7/26/2018  11:51 PM            956 karma.conf.js
-a----        7/26/2018  11:58 PM         418105 package-lock.json
-a----        7/26/2018  11:51 PM           1686 package.json
-a----        7/26/2018  11:51 PM            750 protractor.conf.js
-a----        7/26/2018  11:51 PM           1053 README.md
-a----        7/26/2018  11:51 PM            382 tsconfig.json
-a----        7/26/2018  11:51 PM           3155 tslint.jsonPS C:\SandBox\YetAnotherAngularProject\ClientApp> npm audit fix

What do you do if build is successful? Click on the Run button and see if it works, right? So let’s do that! Click.

Voila! Success!

But wait a minute. Why is my Angular CLI json configuration still named .angular-cli.json ? The latest version of Angular CLI should be angular.json.

Seems like DotNetCore Project template is still using an older Angular CLI version. Let’s look at the package.json file.

{
  "name": "YetAnotherAngularProject",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --extract-css",
    "build": "ng build --extract-css",
    "build:ssr": "npm run build -- --app=ssr --output-hashing=media",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/platform-server": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.0",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^2.0.5",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.4.0",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  },
  "optionalDependencies": {
    "node-sass": "^4.9.0"
  }
}

I need the latest version of Angular!

Let’s upgrade everything!

I am inside the ClientApp folder and I am going to upgrade my local Angular CLI.

PS C:\SandBox\YetAnotherAngularProject\ClientApp> npm install @angular/cli@latest
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})+ @angular/cli@6.1.0
added 26 packages from 37 contributors, removed 415 packages, updated 9 packages, moved 28 packages and audited 12740 packages in 24.874s
found 41 vulnerabilities (2 low, 33 moderate, 6 high)
  run `npm audit fix` to fix them, or `npm audit` for details
PS C:\SandBox\YetAnotherAngularProject\ClientApp>

There’s that freaking npm audit fix again. Let’s execute that for now.

I got my latest Angular CLI but it seems like my json configuration file is still the old one. Let’s update all those Angular CLI files via the ng update @angular/cli command

PS C:\SandBox\YetAnotherAngularProject\ClientApp> ng update @angular/cli
            Updating karma configuration
            Updating configuration
            Removing old config file (.angular-cli.json)
            Writing config file (angular.json)
            Some configuration options have been changed, please make sure to update any npm scripts which you may have modified.
DELETE .angular-cli.json
CREATE angular.json (3809 bytes)
UPDATE karma.conf.js (993 bytes)
UPDATE src/tsconfig.spec.json (322 bytes)
UPDATE package.json (1733 bytes)
UPDATE tsconfig.json (407 bytes)
UPDATE tslint.json (3140 bytes)

Let’s execute this nifty ng update command to know what other packages do we need to update.

Neat! Let’s update those packages by executing the suggested commands.

Seems like i have a problem when executing ng update @nguniversal/aspnetcore-enging it says package is not installed…..

Let’s move on. We can dig more on it later (or never).

So i got all those packages updated. Let’s open the project from Visual Studio 2017 again and build it.

Build was successful. Hooray!

Now hit F5 and run this sucker.

WHAT!?!

Hhhmm… seems like this extract-css parameter is an unknown option.

Open your package.json file and remove this unknown option.

"start": "ng serve --extract-css",
"build": "ng build --extract-css",

It should now look like this (of course.. duh!)

"start": "ng serve",
"build": "ng build",

What’s the effect for removing that? I don’t know yet. I’ll have to figure it out.

But first let’s hit F5 again on Visual Studio.

Success! Time for a coffee break!

There you have it folks!

Code on Github

JavaScript
Angular
Angular Cli
Dotnet Core

--

--

latenightninjacoder

Written by latenightninjacoder

19 Followers

A dotnet coder and a newbie on scripting.

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams