How to integrate Angular Cli with .net Angular template

0
votes

I have chosen to develop with ASP.NET Core MVC and I am using the Angular template for the front end (See image below). I want to use this with the Angular Cli to generate components, directives etc. How can I modify the basic template to make it compatible with the Angular Cli?

enter image description here

1
asp.netangularangular-cli

1 Answers

0
votes

To integrate Angular Cli with VS 2017 Angular ASP.NET template.... (I will place the path that you should be executing these commands on inside brackets at the end of each step. your_project/ denoting your VS17 project!)

  1. Globally install the Angular Cli npm install -g @angular/cli@latest (your_project/)

  2. Install the Angular Cli in project dev environment npm install --save-dev @angular/cli@latest (your_project/)

  3. Rename app.module.shared.ts file to app.module.ts (your_project/ClientApp/)

  4. Inside the app.module.browser.ts file, change import { AppModuleShared } from './app.module.shared'; to import { AppModuleShared } from './app.module'; (your_project/ClientApp/app/)

  5. Inside the app.module.server.ts file, change import { AppModuleShared } from './app.module.shared'; to import { AppModuleShared } from './app.module'; (your_project/ClientApp/app/)

  6. Now create a new angular project in a folder on your desktop by issuing the command ng new test. Once this has complete, copy the angular-cli.json file to the root of your project folder and rename the root field from 'src' to 'ClientApp'. (C:/Users/your_username/Desktop/)

  7. Now test that it works by issuing the command ng g c components/test (your_project/)

For more detail and image click here. I've posted it also to ensure the link doesn't become broken!