You created an Angular library, and you published it to an npm registry. Now you’re ready to use the library in an application. Everything works exactly like you intended, and you’re feeling pretty confident. It’s time to put your production environment settings to the test, and get ready for deployment.
Go Modules with Private Git Repositories
How to configure Go Modules to work with private Git Repositories, with examples for both local development and Docker.
ng build --prod
Things are looking good for a while, and then you see a most unhelpful message:
Let’s highlight the error for clarity:
ERROR in : Unexpected value ‘undefined’ imported by the module ‘MyLibraryModule in /build/src/node_modules/my-lib/my-lib.d.ts’
Ok. Now what happened? Everything worked fine during development, and you never saw anything remotely like this error. To the Googles!
First, the Stack Overflow results. Surely our fellow coders have run into this error:
It turns out many of our compatriots have run afoul of this uniquely ambiguous exception, and for a lot of different reasons. This solution may be harder to find than we thought.
This answer is helpful to point out it could be a syntax error, but we don’t have extra commas in our module declarations (IntelliJ would have yelled at us if we did). [Edit: farther down the page there is a helpful answer in the same vein as where we’re headed below]
Ok, so we couldn’t find the answer to our problem on Stack Overflow this time. (Update: Found an answer 13 down on the first SO question with the same solution. Cest la vie)
Maybe if we get more specific with our search.
The second result (pictured above) looks very promising. The diligent questioner (thank you martinwojtus) included a stack trace that looks exactly like ours. The error was generated from a prod-mode-build, just like ours. And the error stems from the use of an Angular library… just like ours! I think we’re on to something.
The GitHub issue is closed, which is a good sign that there might be a satisfying resolution to this journey. We can see that GitHub user xidedix has referenced the closed issue in a merged pull request:
And the commit message directly calls out the cause of the error we’re dealing with!
fix: faulty LayoutModule import causes: Unexpected value ‘undefined’ imported by the module
I’d like to take a moment to shout out both users in the issue referenced for an exceptionally clear question about the error, a quick response and remediation, and a helpful and descriptive commit message that points us in the right direction. This is a great example of the community working together in ways that benefit not only those involved, but also those (like us) who come after seeking answers. Thank you both.
Since the commit message is so clear and helpful, we can just click right in there to see what was changed.
Wait, that’s it? Angular doesn’t like it when a library doesn’t explicitly import the full module path? Could this be the problem that we have? In my case, that’s exactly what the problem was.
Here is the library module that caused the error:
And here is how I fixed it:
So, how did this happen? For me, it happened when I allowed IntelliJ (my absolute favorite IDE) to import my modules for me. I haven’t encountered any problems with the shortening of the import path in a standard application, but I believe there is something about the way a library gets built and packaged for npm that just has to be more strict.
Something to watch out for here, is that IntelliJ actually doesn’t like it when we lengthen the import path, and will highlight it as something to address.
From our journey through the error question internet, I think it’s pretty clear that this particular error can pop up for many different reasons. This case was a few levels deep, so I wanted to share my experience to help anyone else that finds themselves scratching their heads when confronted with a production build that fails unexpectedly. I hope it helped.
Thanks for reading!