I am building a feature module for Angular which I would like to release on npm. I have the source for the feature module located by itself in one directory, and an angular application in another sibling directory. This angular application is to be used for building and testing the feature module.
The issue: Trying to include the feature module files by using relative file paths that have the ../../.. OR making symbolic links result in a warning being issued by webpack and an error in the browser console.
I have the directory structure:
<root project folder>
+--dev (demo angular app contained here)
...
+--src
+--app
--app.module.ts
--app.component.ts
+--dist
+--src
--feature.module.ts
--feature.component.ts
--feature.service.ts
--index.ts
When trying to import into app.module.ts
import { FeatureModule } from '../../../src/feature.module';
I get this warning from webpack:
WARNING in ../node_modules/@angular/core/src/linker/system_js_ng_module_factory_loader.js
71:15-36 Critical dependency: the request of a dependency is an expression
at ImportLazyContextDependency.getWarnings (/home/user/devel/agape-angular/packages/authentication/dev/node_modules/webpack/lib/dependencies/ContextDependency.js:39:18)
at Compilation.reportDependencyErrorsAndWarnings (/home/user/devel/agape-angular/packages/authentication/dev/node_modules/webpack/lib/Compilation.js:703:24)
at Compilation.finish (/home/user/devel/agape-angular/packages/authentication/dev/node_modules/webpack/lib/Compilation.js:561:9)
at applyPluginsParallel.err (/home/user/devel/agape-angular/packages/authentication/dev/node_modules/webpack/lib/Compiler.js:506:17)
at /home/user/devel/agape-angular/packages/authentication/dev/node_modules/tapable/lib/Tapable.js:289:11
at /home/user/devel/agape-angular/packages/authentication/dev/node_modules/html-webpack-plugin/index.js:60:9
at tryCatcher (/home/user/devel/agape-angular/packages/authentication/dev/node_modules/bluebird/js/release/util.js:16:23)
at Promise._settlePromiseFromHandler (/home/user/devel/agape-angular/packages/authentication/dev/node_modules/bluebird/js/release/promise.js:512:31)
at Promise._settlePromise (/home/user/devel/agape-angular/packages/authentication/dev/node_modules/bluebird/js/release/promise.js:569:18)
at Promise._settlePromise0 (/home/user/devel/agape-angular/packages/authentication/dev/node_modules/bluebird/js/release/promise.js:614:10)
at Promise._settlePromises (/home/user/devel/agape-angular/packages/authentication/dev/node_modules/bluebird/js/release/promise.js:693:18)
at Async._drainQueue (/home/user/devel/agape-angular/packages/authentication/dev/node_modules/bluebird/js/release/async.js:133:16)
at Async._drainQueues (/home/user/devel/agape-angular/packages/authentication/dev/node_modules/bluebird/js/release/async.js:143:10)
at Immediate.Async.drainQueues (/home/user/devel/agape-angular/packages/authentication/dev/node_modules/bluebird/js/release/async.js:17:14)
at runCallback (timers.js:672:20)
at tryOnImmediate (timers.js:645:5)
@ ../node_modules/@angular/core/src/linker/system_js_ng_module_factory_loader.js
@ ../node_modules/@angular/core/src/linker.js
@ ../node_modules/@angular/core/src/core.js
@ ../node_modules/@angular/core/index.js
@ ../src/authentication.module.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
Then in the browser, the app fails to load and the console has this message:
Uncaught Error: Unexpected value 'FeatureModule' imported by the module 'AppModule'. Please add a @NgModule annotation.
at syntaxError (webpack-internal:///../../../compiler/esm5/compiler.js:684)
at eval (webpack-internal:///../../../compiler/esm5/compiler.js:15307)
at Array.forEach (<anonymous>)
at CompileMetadataResolver.getNgModuleMetadata (webpack-internal:///../../../compiler/esm5/compiler.js:15290)
at JitCompiler._loadModules (webpack-internal:///../../../compiler/esm5/compiler.js:33760)
at JitCompiler._compileModuleAndComponents (webpack-internal:///../../../compiler/esm5/compiler.js:33721)
at JitCompiler.compileModuleAsync (webpack-internal:///../../../compiler/esm5/compiler.js:33637)
at CompilerImpl.compileModuleAsync (webpack-internal:///../../../platform-browser-dynamic/esm5/platform-browser-dynamic.js:244)
at PlatformRef.bootstrapModule (webpack-internal:///../../../core/esm5/core.js:5641)
at eval (webpack-internal:///../../../../../src/main.ts:13)
Creating a symbolic link produces the same results:
import { FeatureModule } from './symbolic-link/feature.module';
I have also used npm link to attempt this and still have the same results. If I move the feature module files side by side with the app files then everything works as expected, but in order to package my feature-module to be released on NPM it needs to exist in it's own source directory.
I am using latest webpack and angular.