NPM Module / Angular Compilation Errors

Posted 10/02/2018 1:12 PM by Corey Klass


It's considered good practice to separate Angular functionality into NPM modules for ease of re-use. The easiest way of importing modules is to import from the root of the module, and you accomplish this by creating a barrel.

In each of your module folders, create an index.ts file that looks like the following:

export * from './file1';
export * from './file2';
export * from './file3';

Then in the root of your module, add export statements for each of the index.ts files that you created above.

export * from './folder1/index';
export * from './folder2/index';

You are then able to import any file definition in your Angular application with a basic module reference:

import {File1} from '@coreyklass/module1';


Barrels are very useful, but they can result in compilation errors when building your Angular application for production.

The most common of these will be:

ERROR in : Unexpected value 'undefined' exported by the module 'Module1'


When building your module definition TS file, ensure that all of the import statements reference the actual file that the code is contained in, not the barrel file that you created above. You may not have noticed, but your IDE may have used the barrel for the automatic import statement.

Instead of this in your module definition file: import {File1} from './folder1';

Use this: import {File1} from './folder1/file1';

This should solve your compilation problem.