Question

我正在为Angular构建一个功能模块，我想在npm上发布。我将功能模块的源代码放在一个目录中，将角度应用程序放在另一个兄弟目录中。此角度应用程序将用于构建和测试功能模块。

问题：尝试通过使用具有../../.. OR或符号链接的相对文件路径来包含功能模块文件会导致webpack发出警告并在浏览器控制台中发生错误。

我有目录结构：

<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

尝试导入app.module.ts

时

import { FeatureModule } from '../../../src/feature.module';

我从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)

创建符号链接会产生相同的结果：

import { FeatureModule } from './symbolic-link/feature.module';

我还使用了npm link来尝试这个并且仍然有相同的结果。如果我将功能模块文件与app文件并排移动，那么一切都按预期工作，但为了将我的功能模块打包在NPM上发布，它需要存在于它自己的源目录中。

我正在使用最新的webpack和angular。

Angular / Webpack相对路径/符号链接到app源目录之外的文件导致错误

0 个答案: