ng : Add Angular CLI to .NET Core Angular template

As I have already written about, .NET Core 2.0 comes with SPA templates (Angular and React), in that post I demonstrated how to add a new ng component to the Angular app, created from the angular SPA template. In this post, lets see how to add Angular CLI support to the app, created out of the template. So the benifit of adding Angular CLI support is, as you may already know, you don’t need to go thought the hard way to do things in the app, as we did in the previous post.

To start –

dotnet new anglar -o "CLISupportedApp"

will create the new angular project, navigate to the newly created CLISupportedApp folder and run

npm install

Make sure, you have already installed Angula CLI, or you can use the following command to install it :

npm install -g @angular/cli@latest

Now navigate to the CLISupportedApp folder again and add Angular CLI as a dev dependency for the SPA app by running the following :

npm install --save-dev @angular/cli@latest

If you go to package.json you should be able to see the newly added dependencies.

Open the folder as VS Code project. You will see the app.module.shared.ts. We need to rename it as “app.module.ts” and change its references in both app.module.server.ts and app.module.browser.ts.

app_module

Now add the following file inside the project folder and name it as .angular-cli.json. and copy paste the following contents in it

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "default"
  },
  "apps": [
    {
      "root": "ClientApp",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

This is exactly the same  .angular-cli.json that comes when you create a new Angular project via CLI. The only change is the root property of app – it must be the ClientApp folder. That’s it – now we can use the Angular CLI from the app. Just to make sure, navigate to ClientApp / app / components and type ng g c testcomponent – this will add the “testcomponent” component.

Feeling lazy to do the things mentioned above? – run the below (if you have git installed)

git clone https://github.com/IshamMohamed/dotNetCoreSpaNgCli.git

or download this and develop on top of it.

Happy ng-ing!

Advertisements

6 thoughts on “ng : Add Angular CLI to .NET Core Angular template

  1. Excellent, this worked for me. I wanted to make use of environment.ts under angular-cli inside the .net core angular template, and this was a big help.

    One of the issues I have with the current version of dotnet new angular is that I am unable to run ng build on the ClientApp directory without error. Using the angular-cli in the mix does not seem to help that. Since I am just getting started with my project, I am considering finding an alternative to the .net core spa template. Shawn Wildermuth addresses a more contemporary approach to get .net core and angular into a project here:

    https://wildermuth.com/2017/07/10/ASP-NET-Core-2-VS2017-Angular-CLI

    Also, Steve Sanderson is blogging on a possible new version of the dotnet core angular spa template that may do away with web pack in favor of angular-cli middleware and allow the angular component to be broken out and run on it’s own with “ng serve”. Here:

    https://github.com/aspnet/JavaScriptServices/issues/1288

    IMO: I waded into Angular and .net core months ago because it seemed apparent that this was the direction it was going. Now I’m in deep and finding that there are still so many ongoing changes happening too fast to be productive enough. Finding Stack overflow and other forums to help with this complicated process will really add time to development because it’s hard to tell, without wading into the comments, if the post is using a deprecated approach to a solution. This takes time and hopefully the boss truly understands and appreciates why it is all taking so long 🙂

    Thank you for taking the time to write this up for other developers (like me) who are struggling to keep up with the constantly evolving landscape particularly when using .net core and angular side by side.

  2. Update: in order to Use the last CLI Angular it works for me an update of angular package. Run this command at the and of tutorial:
    “ng update @angular/cli”

    Enjoy.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s