Angular `ng build --prod` Error

Tim Jones
Tim Jones
Jun 27, 2019 · 5 min read
Image for post
Image for post
Photo by Jason Leung on Unsplash

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.

You run:

ng build --prod

The unhelpful stack trace

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’

Image for post
Image for post
A Brute Force Approach

First, the Stack Overflow results. Surely our fellow coders have run into this error:

Image for post
Image for post
The Stack Overflow Results

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]

Image for post
Image for post
IntelliJ dutifully warning of an extra comma

There are some good suggestions about circular dependencies and incorrect import paths that seem plausible, but we rule those out too.

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.

Image for post
Image for post
Let’s get more specific…
Image for post
Image for post
A promising development

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:

Image for post
Image for post

And the commit message directly calls out the cause of the error we’re dealing with!

Image for post
Image for post

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.

Image for post
Image for post
A simple and helpful bug fix commit.
AHA! (from Giphy)

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:

The imports are too short

And here is how I fixed it:

The imports are just right

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.

Image for post
Image for post
Not this time, old friend.

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!

cloud native: the gathering

A gathering place for all things cloud native…

Tim Jones

Written by

Tim Jones

I like to build things and put them in clouds. I try to write about non-intuitive solutions to problems I run into along the way.

cloud native: the gathering

A gathering place for all things cloud native, microservices, api development

Tim Jones

Written by

Tim Jones

I like to build things and put them in clouds. I try to write about non-intuitive solutions to problems I run into along the way.

cloud native: the gathering

A gathering place for all things cloud native, microservices, api development

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store