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 –
will create the new angular project, navigate to the newly created CLISupportedApp folder and run
Make sure, you have already installed Angula CLI, or you can use the following command to install it :
Now navigate to the CLISupportedApp folder again and add Angular CLI as a dev dependency for the SPA app by running the following :
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
Now add the following file inside the project folder and name it as
.angular-cli.json. and copy paste the following contents in it
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
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)
or download this and develop on top of it.