Module not found can't resolve

I recently started working with Angular and created a pwa that allowed users in my board gaming club to submit results from their games. The end result is an email containing the form info sent to myself and the league manager. The form works great but as soon as I installed the mailgun package and tried to use var mailgun = require(‘mailgun-js’)({apiKey: api_key, domain: domain}); I started to get a bunch of the following for various modules. I have no idea how to fix this or what the root cause is. Any suggestions would be greatly appreciated.

[ng] ERROR in ./node_modules/pac-resolver/dnsResolve.js
[ng] Module not found: Error: Can’t resolve ‘dns’ in ‘C:\Users\Phil\src\iw40klv2\node_modules\pac-resolver’

1 Like

Hey necron, welcome to freeCodeCamp and Angular :call_me_hand:t4:
For Angular, when you’re installing a package through npm/yarn after installing you need to do a couple of things in order to use it in your .ts files (typeScript).

  1. If the package/library is exposing some modules you need to import those modules within your Angular module file. If not you can go to number 2.

  2. If the package is exposing some objects or functions then you should import them, with javaScript syntax, on top of your .ts file of the component consuming this object/function.

  3. In some cases, you might need to inject things using Dependency Injection in Angular which I highly doubt if that’s the case here.

These are my initial guesses without looking at your code. In case you checked those and they’re all right you can send some screenshots so we can solve the issue.

Let me know if any of the terms I used above sound confusing so we can work on those as well.

Good luck!

So you are using two things that stand out to me:

  1. Angular - a client-side application framework using web technologies
  2. Mailgun api - a nodejs package to send emails

This stands out to me because dns is a built in nodejs package so for it to not resolve I can only really assume 1 thing.

Your trying to use a nodejs package on the client-side, where Angular is, which wont work. Especially if your app was working, and the moment you try to use mailgun it explodes.

If you want to send emails, you will need a server, either running nodejs or otherwise and this server will be able to leverage mailgun, or use a client-side email sending utility, but I personally would create a server if sending emails is important for you. Creating a server isn’t too much more work but it could be depending on what you full requirements are.

1 Like

Yep, I think you’re right about that and this is where I’m lacking in knowledge since I’ve only been working with nodejs for a couple of months on my own time. I’m developing in VS Code with nodejs and deploying to firebase. I was hoping to be able to send emails from my local machine to test before I deploy. The “creating a server” is something I’m not familiar with. Are there any youtube videos or books that you’re aware of that would point me in the right direction? Thanks for the assist!

So understanding what nodejs is important to understand when working beyond the front-end.

The front-end is essentially the html+css+js that is ran by the user’s browser. Nodejs essentially is another execution environment that runs JS, by also providing different apis such as accessing the file system.

Firebase is a Google Saas platform that provides a number of libraries and apis to make mobile and web development easier. There are a number of services that are available to help build your application how you need it.

If you want to leverage the platform to send emails for things outside of authentication (Firebase has this built in) your best bet is to use Firebase functions, which builds ontop of Google Cloud’s cloud functions, except provides some nice features to integrate with Firebase authentication out of the box, so you can more easily integrate with the function in your Angular project.

You can add your secret’s/configurations in a cloud function to send emails using mailgun as-is. Then you can call this function from your Angular project when required (or via other triggers, like from changes in Firebase)

I personally recommend going back to basics before going further into more tech. Angular is not an easy framework to learn, due to its expansive api and opinionated approach to building apps. Stuff like dependency injection, and rxjs (Reactive programming lib) are used heavily within Angular, and are complex systems in their own right. Throw in Firebase, and its easy to get overloaded and lose sight of the core fundamentals of why and how things are actually working.

If you do want to push forward with Angular and Firebase, just be sure to be careful with using Firebase as its a pay to use service, and easy to totally crew yourself over, there are plenty of horror stories where you are getting charged thousands of dollars per hour.

On resources, I recommend being able to go thru the entire tour of heroes app on the Angular docs. Other good resources are, and The Angular docs (linked above with the heroes app) are always great to learn fundamentals and techniques specific to Angular.

Regardless of what you do, good luck! :+1:

1 Like