DEV Community

Cover image for Build an Angular 8 App with REST API and ASP.NET Core 2.2 - part 2

Build an Angular 8 App with REST API and ASP.NET Core 2.2 - part 2

Martin Soderlund Ek on September 18, 2019

In part 1 of this tutorial, we built the ASP.NET Core back-end. Part 2 - Create the Angular 8 app Now, let’s finally start with the Ang...
Collapse
 
ashiarush profile image
ashiarush

An unhandled exception occurred while processing the request.
AggregateException: One or more errors occurred. (One or more errors occurred. (Failed to start 'npm'. To resolve this:.

[1] Ensure that 'npm' is installed and can be found in one of the PATH directories.
Current PATH enviroment variable is: C:\Oracle\product\12.1.0\dbhome_1\bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\windows\system32;C:\windows;C:\windows\System32\Wbem;C:\windows\System32\WindowsPowerShell\v1.0\;C:\windows\System32\OpenSSH\;C:\Program Files\TortoiseSVN\bin;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\170\Tools\Binn\;C:\Users\algupta\AppData\Local\Programs\Git\cmd;C:\Program Files (x86)\Microsoft SQL Server\150\Tools\Binn\;C:\Program Files\Microsoft SQL Server\150\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\150\DTS\Binn\;C:\Program Files\Microsoft SQL Server\150\DTS\Binn\;C:\Program Files\Java\jdk1.8.0_231\bin;C:\Program Files\nodejs;C:\Program Files\dotnet\;C:\Program Files\TortoiseGit\bin;C:\Program Files\PuTTY\;C:\Users\algupta\AppData\Roaming\npm;C:\Users\algupta\AppData\Local\Microsoft\WindowsApps;C:\Program Files (x86)\Sophos\Sophos SSL VPN Client\bin;C:\Users\algupta.dotnet\tools;C:\Users\algupta\AppData\Local\Programs\Microsoft VS Code\bin
Make sure the executable is in one of those directories, or update your PATH.

[2] See the InnerException for further details of the cause.))
System.Threading.Tasks.Task.GetResultCore(bool waitCompletionNotification)

InvalidOperationException: Failed to start 'npm'. To resolve this:.

[1] Ensure that 'npm' is installed and can be found in one of the PATH directories.
Current PATH enviroment variable is: C:\Oracle\product\12.1.0\dbhome_1\bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\windows\system32;C:\windows;C:\windows\System32\Wbem;C:\windows\System32\WindowsPowerShell\v1.0\;C:\windows\System32\OpenSSH\;C:\Program Files\TortoiseSVN\bin;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\170\Tools\Binn\;C:\Users\algupta\AppData\Local\Programs\Git\cmd;C:\Program Files (x86)\Microsoft SQL Server\150\Tools\Binn\;C:\Program Files\Microsoft SQL Server\150\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\150\DTS\Binn\;C:\Program Files\Microsoft SQL Server\150\DTS\Binn\;C:\Program Files\Java\jdk1.8.0_231\bin;C:\Program Files\nodejs;C:\Program Files\dotnet\;C:\Program Files\TortoiseGit\bin;C:\Program Files\PuTTY\;C:\Users\algupta\AppData\Roaming\npm;C:\Users\algupta\AppData\Local\Microsoft\WindowsApps;C:\Program Files (x86)\Sophos\Sophos SSL VPN Client\bin;C:\Users\algupta.dotnet\tools;C:\Users\algupta\AppData\Local\Programs\Microsoft VS Code\bin
Make sure the executable is in one of those directories, or update your PATH.

[2] See the InnerException for further details of the cause.
Microsoft.AspNetCore.NodeServices.Npm.NpmScriptRunner.LaunchNodeProcess(ProcessStartInfo startInfo)

Collapse
 
ashiarush profile image
ashiarush

Please provide solution for the same.
I have tried all the options but did not work.

Getting this error while executing with Visual studio 2017(F5)

Collapse
 
jonbrownnhti profile image
JonBrownNHTI

spa.Options.SourcePath = "ClientApp";

This could be your problem. If you want just give it the full path like:

spa.Options.SourcePath = @"C:\'PATH TO CLIENTAPP';

Thread Thread
 
ashiarush profile image
ashiarush

Yes it worked but I think its not the good way to give full path.

Is there anyother way to give just the relative path.

Thanks in advance.

Thread Thread
 
jonbrownnhti profile image
JonBrownNHTI

I agree. This was just a quick fix so you could test. Where is your ClientApp folder?

var path = Path.Combine(Directory.GetCurrentDirectory(), "ClientApp");

spa.Options.SourcePath = path;

Collapse
 
dileno profile image
Martin Soderlund Ek • Edited

In VS 2019 you can add path to your nodejs installation manually. Hope you find the screenshot helpful! thepracticaldev.s3.amazonaws.com/i...

I don't use VS 2017 any more but External Web Tools should be easy to find via Tools -> Options as well.

Thread Thread
 
ashiarush profile image
ashiarush

Thanks

Collapse
 
coderhh profile image
3X7=25

Hi, great posts. When I press F5 to launch both front and back end, I always got System.AggregateException: One or more errors occurred. (One or more errors occurred. (Failed to start 'npm'. To resolve this:.error. I ensure npm was installed successful and work in cmd and bash shell on my machine. Do you have any solution? thanks

Collapse
 
jonbrownnhti profile image
JonBrownNHTI

spa.Options.SourcePath = "ClientApp";

This could be your problem. If you want just give it the full path like:

spa.Options.SourcePath = @"C:\'PATH TO CLIENTAPP';

Collapse
 
dileno profile image
Martin Soderlund Ek

Thanks!

Have you tried reinstalling Node?

Do you use a Docker container? Make sure Node is installed in that Docker image.

Collapse
 
mill1 profile image
Emiel • Edited

Great post! One 'typo' though:
blog-posts.component.scss
should be:
blog-posts.component.css
The same is true for
blog-post.component.scss
and
blog-post-add-edit.component.scss

Cheers

Collapse
 
dileno profile image
Martin Soderlund Ek

Hi and thanks! The app uses scss and the file ends with .scss so I can't see the typo?

Collapse
 
mill1 profile image
Emiel • Edited

I see. I am new to Angular and I am using your tutorial to implement my first CRUD. I used (your) following command to create the component:
ng generate component BlogPosts
However (by default?) it generates a .css instead of a .scss, hence my confusion.

Collapse
 
girmamoges profile image
GirmaMoges • Edited

Extremely helpful, very precise detail-oriented and everything is easy to follow, This should be the template for Microsoft's Visual Studio 2019 starter template right out of the box, instead of having WebAPI and ClientApp in one project.

I like all your valuable explanations, boy ! they are the most important why a specific code is where it should be. You deserve to be acknowledged.

  • with flying colors, the industry-standard starter sample flows like a river *

  • just for fun, if cut and paste has a grade I could A's this one,
    fortunately, I seem to understand 90% of the code why, when and how things
    are working in the Angular ecosystem*

God Bless

Collapse
 
dileno profile image
Martin Soderlund Ek

You're very kind and I'm glad I could be of help! :)

Collapse
 
girmamoges profile image
GirmaMoges

Your work 100% deserves to be mentioned and even more.

Questions:

What do you prefer in an Angular project Material Design or BootStrap 4.0 and why.

I am writing an ASP.NET Core Angular app for our local community client registration management, mass email, mass text, upload/download functionality, and some reporting web site, where would be a reasonable service provider to deploy or sever the application from.

Thread Thread
 
dileno profile image
Martin Soderlund Ek

Bootstrap is very well documented and you can easily create responsive websites with an emphasis on mobile first. It's mine and many more's default pick.

I've actually not used MD yet.

You can get both though, there's MD for Bootstrap :)

mdbootstrap.com/

Collapse
 
hans_nl profile image
Hans • Edited

Great tutorial but the project is not working on my Visual Studio for Mac (latest version), I know this tutorial is written for Visual Studio 2019 but I was hoping it would work on Visual Studio for Mac.

Any tips to make it run on a Mac?

Collapse
 
dileno profile image
Martin Soderlund Ek

I don't use a Mac, what's wrong, do you get any error messages?

Collapse
 
girmamoges profile image
GirmaMoges

Hi Martin:

It is me the usual pest.

The question, Do you have a social login step by step sample: Google Gmail and Facebook if it is with Angular 8.

Do you have any recommendations on this or any tutorial doing this?

Collapse
 
dileno profile image
Martin Soderlund Ek

Hi, you're welcome.

For authorization I'd take a look at a JWT (JSON Web Token) solution like Okta: developer.okta.com/quickstart/#/an...

Collapse
 
mill1 profile image
Emiel

Another small bug in app-routing.module.ts:
{ path: 'addedit', component: BlogPostAddEditComponent },
should be:
{ path: 'add', component: BlogPostAddEditComponent },

Still the best Angular 8 CRUD tutorial could find online :)

Collapse
 
dileno profile image
Martin Soderlund Ek • Edited

Thanks for pointing this out - now updated the code section for app-routing.module.ts :)

Thank you!

Collapse
 
melquimaillo profile image
Maíllo

Thanks Martin for your great article. I have been able to build my first CRUD in Angular. But now I'm stuck with the problem of including pagination with angular material. In the component we can get the observables (this.cargosPosts $ = this.cargoPostService.getCargoPosts ();) But how can I assign the data source to the pager?

I tried this, but don't run...

--- In the service
public lstCargos: Array = [];

getCargoPosts(): Observable {
this.http.get(this.myAppUrl + this.myApiUrlList).subscribe(result =>
{
this.lstCargos = result;
console.log(this.lstCargos)
}, error => console.error(error));

return this.http.get<Cargo[]>(this.myAppUrl + this.myApiUrlList)
  .pipe(
    map((lstCargos: Cargo[]) => lstCargos.map(cargo => this.getNewCargoFormatImg(cargo))),
    retry(1),
    catchError(this.errorHandler)
  );

}

---- In the component
this.cargosPosts$ = this.cargoPostService.getCargoPosts();
this.lstCargos = this.cargoPostService.lstCargos;
this.dataSource = new MatTableDataSource(this.lstCargos);

I'm very greatful if you can help me. Thankou very much

Collapse
 
jsky222code profile image
jsky222-code

Thank you so much!

Collapse
 
fatfoutimontassar profile image
FatfoutiMontassar

Hello Martin, thanks for the tutorial <3

i think that you forgot to mention creating the AppRoutingModule .. i was folowing your instructions and i was stuck because it wasn't there.

Collapse
 
dileno profile image
Martin Soderlund Ek

Hi and thanks! Please check the section "Setup routing" in this article, you'll find out more about AppRoutingModule :)

Collapse
 
bjornstensberg profile image
bjornstensberg

Hi!

Great tutorial.

However, how would it be to handle authorization?
Like MVC is pretty different from this I guess

Collapse
 
dileno profile image
Martin Soderlund Ek

Hi and thanks!

Authorization isn't really dependent on a specific design pattern. I'd take a look at a JWT (JSON Web Token) solution like Okta: developer.okta.com/quickstart/#/an...

Collapse
 
touinta profile image
touinta

Hello!
Very good post!
I have a problem:
I see three rows of the html table (as many as the records) but i dont see data at all!
Any idea?
thank you

Collapse
 
jioophoenix profile image
John Ojo

Nice work

Collapse
 
rabinrai44 profile image
Rabin Rai

Thanks for the helpful post!

There some confusion to follow along step-by-step for beginners though I figure out using GitHub repo.

Rabin

Collapse
 
dileno profile image
Martin Soderlund Ek

Thanks! My aim is to be as clear as possible to as many as possible. What steps were confusing?

Collapse
 
touinta profile image
touinta

Hello,
I manage to solve my problem.
I would like to ask if is there any way so the CRUD actions to be display in the same view as the list does.
thank you

Collapse
 
mahdishokri60 profile image
MahdiShokri60

excellent

Collapse
 
krunalmmahera profile image
Krunal M Mahera

How to deploy app for production?

Collapse
 
dileno profile image
Martin Soderlund Ek

Hi, there's more in Angular docs for deployment :) angular.io/guide/deployment

Deployment procedure depends on where you want to host your app.

Collapse
 
jsky222code profile image
jsky222-code

Helped me tremendously. Thank you so much!!

Collapse
 
jawaharrajan profile image
Jawahar Rajan

Hi Martin,
Just wanted to add my thanks for an easy to follow yet with good detail.
Learnt a lot too

Thanks

Collapse
 
dileno profile image
Martin Soderlund Ek

Appreciated, thanks!

Collapse
 
dehollaender profile image
DeHollaender

Thanks for sharing this! I like the way of teaching in this tutorial.