10

I know the basics of Angular and ASP.NET Core 2, but not on the level that would allow me to understand how this template works.

I tried generating components using Angular CLI in Visual Studio Code, however, it says I don't have the CLI. I think it's the webpack thingy that keeps the CLI and allows all the cool stuff that comes with the template, but is there a way to use the CLI despite that? Or do I have, for example, generate components manually by creating the files and adding dependecies?

I can't find any documentation on the template or a tutorial that would use it.

Nech
  • 359
  • 3
  • 15
  • 1
    Did you install CLI? `npm install @angular/cli --global` As far as i remember template project didnt include CLI (at least in first template version of core 1.0) – Brivvirs Oct 19 '17 at 09:15
  • I did, yes. However, when I do install it and try a command like "ng g c temp" to create a component, I get an error saying "Unable to find any apps in `.angular-cli.json`". If I copy an existing angular-cli.json file from a different project, I get "Could not find an NgModule for the new component". I might've missed some setup steps that are required in this template... VS2017 lists 84 errors about missing @angular/core and different related things. – Nech Oct 19 '17 at 09:34
  • 1
    https://stackoverflow.com/questions/46268181/i-cant-add-new-component-with-angular-cli-in-asp-net-core-spas – R. Richards Oct 19 '17 at 10:34

3 Answers3

10

First of all after installing angular cli globally:

npm install @angular/cli@latest -g

You have to first create an angular project outside your main project with this command:

ng new hello-world

Now, go to project directory and copy .angular-cli.json file into the root of your main dot net core project. Then you have to edit this part of the file:

"root" : "src" change to "root" : "ClientApp"

Next, you have to install angularCli dev in your root of your project:

cd DotNetCoreProject

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

Everythings was done!

Now, go to your component directory of your project:

cd ClientApp/app/components

and make your component in component directory in terminal:

ng g c MyComponent --module='app.module.browser.ts'

Community
  • 1
  • 1
Ashkan Rahmani
  • 758
  • 1
  • 8
  • 20
  • 2
    You can avoid needing to specify "--module='app.module.browser.ts'" if you also make the following changes: Rename app.module.shared.ts to app.module.ts. Change the references to this file in app.module.browser.ts and app.module.server.ts. Now you will be able to just write "ng g c MyComponent" and the imports will show up in app.module.ts. – John Pankowicz Oct 31 '17 at 15:59
  • @JohnPankowicz this does not work anymore, at least not without moving the other .module files to a sub folder – RSinohara Mar 04 '18 at 19:09
8

The visual studio supports Angular CLI with Asp.Net Core project in the newest version of Angular project template in asp.net core 2.1.

  1. If using ASP.NET Core 2.0, install the latest version of Angular project template:

    1.1. Open the visual studio

    1.2. Go to tools -> NuGet Package Manager -> Package Manager Console and run this command:

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

If you have ASP.NET Core 2.1, there's no need to install it.

  1. Create an empty folder for your project and run cmd as administrator and navigate to this folder(alternatively, press Alt + D in an empty folder and write cmd as administrator).

  2. Create a new angular project with below commands:

    dotnet new angular -o my-new-app
    cd my-new-app

The Angular app, residing in the ClientApp subdirectory, is intended to be used for all UI concerns.

  1. Go to ClientApp folder with 'cd ClientApp' command.

If you haven't installed the angular-cli package, run 'npm install -g @angular/cli' command.

enter image description here

  1. Run 'npm install' command for installing the node_modules.

enter image description here

  1. Run 'ng g c testComponent' command(an Angular-CLI command) for creating a testComponent.

enter image description here

The test-component added to solution explorer

enter image description here

Run each of Angular CLI commands:

enter image description here

Good Luck

Microsoft

Angular CLI

Iman Bahrampour
  • 6,180
  • 2
  • 41
  • 64
  • 1
    Nice explaination, but afraid it has not worked for me. I've updated my templates in my asp.net core project to the latest SPA Angular template. I can see the template app that is generated by difficult. I've updated the angular CLI and done a npm install from the clientAPP directory, but unfortunately all generate cli commands still bring back the "Unable to find any apps in .angular-cli.json" error message. It's left me having to resort to manually hand cranking all the components. I find all these front end frameworks tools more pain than they are worth! – Jim Taliadoros Mar 11 '18 at 17:18
  • 1
    @Jim Taliadoros. Your welcome, can u upload the project Angular-cli.json file? Update the angular-cli package with following commands: 1-npm uninstall -g angular-cli 2-npm cache clean 3-npm install -g @angular/cli@latest – Iman Bahrampour Mar 14 '18 at 06:24
1

in .angular-cli.json in part "apps" replace "./src" to "src"

"apps": [ { "root": "src", "outDir": "dist",

Алексей Пастушенко
  • 51
  • 2