Angular 角度6/7“；依赖项的结果是一个表达式"；

我正在尝试创建一个Angular 6库，并在Angular 6应用程序中使用它。我已经把它归结为一个最小的测试用例。（更新：自从Angular 7推出以来，我也尝试过。）

ng新建工作区#接受默认值
ng新产品#接受默认值
cd工作区
生成库小部件
ng build--prod小部件#省略--prod用于Angular 7
cd../产品
ng构建

一个名为“工作区”的应用程序拥有一个名为“小部件”的库。另一个名为“产品”的应用程序是独立的。到目前为止一切都很好

现在，让我们尝试使用“产品”应用程序中的“小部件”库。打开CLI生成的文件

product/src/app/app.module.ts

。添加两行，如下所示

从'@angular/platform browser'导入{BrowserModule}；
从“@angular/core”导入{NgModule}；
从“./app.component”导入{AppComponent}；
从“../../../workspace/dist/widgets”；/”导入{WidgetsModule}补充
@NGD模块({
声明：[
应用组件
],
进口：[
浏览器模块，
WidgetsModule//已添加
],
提供者：[]，
引导：[AppComponent]
})
导出类AppModule{}

更改之后，当我从产品目录运行

ng build

时，我会从Webpack收到警告

Date: 2018-07-31T13:13:08.001Z
Hash: 8a6f58d2ae959edb3cc8
Time: 8879ms
chunk {main} main.js, main.js.map (main) 15.9 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.59 MB [initial] [rendered]

WARNING in ../workspace/node_modules/@angular/core/fesm5/core.js
4997:15-36 Critical dependency: the request of a dependency is an expression

WARNING in ../workspace/node_modules/@angular/core/fesm5/core.js
5009:15-102 Critical dependency: the request of a dependency is an expression

---

“依赖的结果是表达式”是什么意思？我做错了什么？

当使用表达式而不是固定字符串表示JS依赖项时，会出现此错误-例如，

require（'horse'+变量）

或

require（function（）{return'horse'+variable}）

。WidgetsModule正在导入的东西很可能正在导入一个执行这种形式的require的库

Webpack对此表示不满，因为这意味着它必须包含文件夹中的所有文件，而不能静态分析要包含的文件。它仍然可以工作，但是根据对它的讨论，不应该忽视它，应该重构相关的依赖关系

我最近在一个项目中将Angular从v5升级到v6的过程中遇到了这个错误，如果我没记错的话，当我将所有其他依赖项以及它们的最新版本升级时，这个错误就消失了——但我不能说是哪个依赖项导致了这个问题，不幸的是，我没有在看到错误和修复错误之间做出承诺，因此我无法分析解决错误的确切更改

但似乎很多人都有类似的问题——比如

要清除警告（而不修复潜在问题），请执行以下操作，并添加：

。。。到网页包配置。但是，在最新的Angular CLI中，您无法手动编辑网页包配置（用于允许此操作的旧

ng eject

命令已被删除），因此我认为您目前无法修复此警告

---

所有这些都表明，您需要Angular CLI的作者通过其内部使用的生成的网页包配置来掩盖此错误，或者Angular的作者来更改core.js导入的方式。

导致此警告的是

BrowserModule

。我不知道原因，但它似乎是警告的来源。

我在一个新的Angular 7 cli生成的项目中遇到了相同的关于“依赖项的结果是表达式”的警告，该警告引用了

fesm5.js

此特定项目引用了一个本地npm包，其相对路径以

file://../

这似乎导致了警告

经过一些研究，我发现这解释了如何在Angular 6+cli生成的应用程序中修复它

对我来说，有效的方法是打开客户机项目根文件夹（不是共享库）中的

angular.json

文件，并找到以下路径：

projects>（您的项目名称）>architect>build>options

并添加密钥：

“保存符号链接”：true

此处省略了文件的所有其余部分，包括相关部分：

{
  "projects": {
    "MyAwesomeProject": {
      "architect": {
        "build": {
          "options": {
            "preserveSymlinks": true
          }
        }
      }
    }
  }
}

---

添加此选项后，我得到的是正常的

ng构建

，没有警告。希望这有帮助！

主要问题不是为什么会收到警告。访问库的方式不是理想的方式。让我们研究一种更好的方法[使用Angular 7]使用您自己的示例步骤，这首先不会导致该问题

---

第一步：[和你的一样]

---

步骤2：创建.tgz库文件

---

步骤3：在package.json中添加“widgets”库 打开

product

项目的

package.json

文件，并在

devDependencies

下添加以下行：

"widgets": "file:./widgets-0.0.1.tgz",

如果您在本地拥有库，则需要执行步骤2和步骤3。否则，如果您的库已打包并发布到npm存储库中，则不需要

文件：

关键字。您可以像其他依赖项一样提及版本

---

步骤4：安装新添加的库 在产品项目中运行npm安装

---

步骤5：使用库 修改

app.module.ts

文件：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { WidgetsModule } from 'widgets'; // new line

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    WidgetsModule // new line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

步骤6：构建产品项目 现在，在产品项目中运行

ng build

。它将成功运行

---

我怀疑这里发生的一切都是这个问题中错误的原因：刚刚用Angular 6.1（Angular cli 6.1.2）再次测试过。没有更改。在生成的widgets.module.ts中，它是否导入BrowserModule？基本上，但在最新的CLI中，

ng eject

已经消失，因此我现在不知道您将如何编辑CLI使用的网页包配置……但至于为什么会在这种情况下发生这种情况？我放弃：）不知道！祝您好运找到解决方案，我怀疑是这样的这实际上是Angular（CLI或fesm5/core.js）中的一个bug/feature。谢谢。在这种情况下，我从零开始使用（6.1.1）的最新版本。所有这些都依赖于

cd ../workspace/dist/widgets/
npm pack
cp widgets-0.0.1.tgz ../../../product/

"widgets": "file:./widgets-0.0.1.tgz",

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { WidgetsModule } from 'widgets'; // new line

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    WidgetsModule // new line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }