DEV Community

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...

Read full post

ashiarush • Jan 18 '20

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:.

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

ashiarush • Jan 18 '20

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)

JonBrownNHTI • Jan 21 '20

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';

ashiarush • Jan 21 '20

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.

JonBrownNHTI • Jan 22 '20

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;

Martin Soderlund Ek • Jan 19 '20 • 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.

ashiarush • Jan 21 '20

Thanks

3X7=25 • Dec 6 '19

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

JonBrownNHTI • Jan 21 '20

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';

Martin Soderlund Ek • Dec 6 '19

Thanks!

Have you tried reinstalling Node?

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

Emiel • Nov 15 '19 • 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

Martin Soderlund Ek • Nov 15 '19

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

Emiel • Nov 15 '19 • 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.

GirmaMoges • Feb 17 '20 • 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

Martin Soderlund Ek • Feb 17 '20

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

GirmaMoges • Feb 18 '20

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.

Martin Soderlund Ek • Feb 18 '20

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/

Hans • Feb 2 '20 • 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?

Martin Soderlund Ek • Feb 5 '20

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

GirmaMoges • Feb 22 '20

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?

Martin Soderlund Ek • Feb 24 '20

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...

Emiel • Nov 15 '19

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 :)

Martin Soderlund Ek • Nov 16 '19 • Edited

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

Thank you!

Maíllo • May 4 '20

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

jsky222-code • Jan 29 '20

Thank you so much!

FatfoutiMontassar • Jan 22 '20

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.

Martin Soderlund Ek • Jan 22 '20

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

bjornstensberg • Feb 9 '20

Hi!

Great tutorial.

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

Martin Soderlund Ek • Feb 11 '20

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...

touinta • Apr 10 '20

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

John Ojo • Oct 13 '20

Nice work

Rabin Rai • Nov 28 '19

Thanks for the helpful post!

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

Rabin

Martin Soderlund Ek • Dec 10 '19

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

touinta • Apr 11 '20

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