typescript Angular 6 / 7“依赖的结果是一个表达式”

Question

提问by Patrick McElhaney

I'm trying to create an Angular 6 library and use it in an Angular 6 app. I've boiled it down to a minimal test case. (Update: since Angular 7 is out, I've tried that as well.)

我正在尝试创建一个 Angular 6 库并在 Angular 6 应用程序中使用它。我已经把它归结为一个最小的测试用例。（更新：由于 Angular 7 已经发布，我也试过了。）

ng new workspace # accept the defaults
ng new product # accept the defaults
cd workspace 
ng generate library widgets 
ng build --prod widgets # leave out "--prod" for Angular 7
cd ../product
ng build

An app called "workspace" hosts a library called "widgets". Another app called "product" stands alone. Everything to this point is fine.

一个名为“workspace”的应用程序托管了一个名为“widgets”的库。另一个名为“产品”的应用程序是独立的。到目前为止一切都很好。

Now let's try using the "widgets" library in the "product" app. Open the file product/src/app/app.module.tswhich was generated by the CLI. Add two lines as shown below.

现在让我们尝试使用“产品”应用程序中的“小部件”库。打开product/src/app/app.module.ts由 CLI 生成的文件。添加两行，如下所示。

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

import { AppComponent } from './app.component';
import { WidgetsModule } from '../../../workspace/dist/widgets'; //  added

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

After that change, when I run ng buildfrom the product directory, I get warnings from Webpack.

更改之后，当我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

What does "the result of a dependency is an expression" mean? What am I doing wrong?

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

Answer 1

采纳答案by Saddam Pojee

The main problem is not why you are getting that warnings. The way you are accessing the library is not an ideal way. Let's look into a little better approach [Using Angular 7] with your own sample steps, which will not cause that issue in the first place.

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

Step 1: [Same as yours]

第 1 步：[和你的一样]

ng new workspace # accept the defaults
ng new product # accept the defaults
cd workspace 
ng generate library widgets 
ng build --prod widgets # leave out "--prod" for Angular 7
cd ../product
ng build

Step 2: Create .tgz library file

第 2 步：创建 .tgz 库文件

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

Step 3: Add "widgets" library in package.json

第 3 步：在 package.json 中添加“widgets”库

Open package.jsonfile of productproject, and under devDependenciesadd the following line:

打开项目package.json文件product，并在下面devDependencies添加以下行：

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

Step 2 and Step 3 are required if you have the library locally. Otherwise, if your library is packed and publish into npm repository, then you don't need file:keyword. You can just mention the version like other dependencies.

如果您在本地拥有库，则需要执行第 2 步和第 3 步。否则，如果您的库已打包并发布到 npm 存储库中，则您不需要file:关键字。您可以像其他依赖项一样提及版本。

Step 4: Install newly added library

第四步：安装新添加的库

Run npm installin product project.

npm install在产品项目中运行。

Step 5: Use the library

第 5 步：使用库

Modify app.module.tsfile:

修改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 { }

Step 6: Build product project

第 6 步：构建产品项目

Now, run ng buildin product project. It will run successfully.

现在，ng build在产品项目中运行。它将成功运行。

Answer 2

回答by H Dog

I encountered the same warning about "the result of a dependency is an expression” referencing fesm5.jsin a new Angular 7 cli generated project.

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

This particular project has a reference to a local npm package with a relative path beginning with file://../which seemed to cause the warning.

这个特定的项目引用了一个本地 npm 包，其中的相对路径file://../似乎引起了警告。

After some research I found this Github issuewhich explains how we can fix it in Angular 6+ cli generated apps.

经过一番研究，我发现了这个 Github 问题，它解释了我们如何在 Angular 6+ cli 生成的应用程序中修复它。

What worked for me was to open the angular.jsonfile in the client project's root folder (not the shared library's) and find this path:

对我有用的是angular.json在客户端项目的根文件夹（不是共享库的）中打开文件并找到以下路径：

projects > (your project name) > architect > build > options

and add the key:

并添加密钥：

"preserveSymlinks": true

with all the rest of the file omitted here are the relevant parts:

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

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

After adding this I get normal ng buildwithout warnings. Hope that helps!

添加后，我在ng build没有警告的情况下变得正常。希望有帮助！

Answer 3

回答by Mark Hughes

This error comes out when a JS dependency is expressed using an expression rather than a fixed string - for example, require('horse' + variable)or require(function() { return 'horse'+variable }). It is likely that something being imported by your WidgetsModule is importing a library that is doing that form of a require.

当使用表达式而不是固定字符串表示 JS 依赖项时会出现此错误 - 例如，require('horse' + variable)或require(function() { return 'horse'+variable }). 您的 WidgetsModule 导入的东西很可能正在导入一个正在执行这种形式的需求的库。

Webpack complains about this because it means it has to include all of the files in a folder, rather than being able to statically analyse what files to include. It will still work, but according to the discussion on this Webpack issueit should not be ignored and the dependency in question should be refactored.

Webpack 对此表示不满，因为这意味着它必须将所有文件都包含在一个文件夹中，而不是能够静态分析要包含哪些文件。它仍然可以工作，但根据关于此 Webpack 问题的讨论，不应忽略它，并且应重构有问题的依赖项。

I came across this error when in the process of upgrading Angular from v5 to v6 on a project recently, and if I recall correctly, it went away once I upgraded all the other dependencies as well to their latest versions - I can't say which dependency was causing the problem though, and unfortunately I did not commit between seeing the error and fixing it so I can't analyse what exact change addressed the error.

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

It does seem that many people are having similar issues though - see for example https://github.com/angular/angular/issues/20357

似乎很多人都遇到了类似的问题 - 例如参见https://github.com/angular/angular/issues/20357

To clear the warning (without fixing the underlying problem), you would follow this process, adding:

要清除警告（不解决根本问题），您可以按照此流程进行操作，并添加：

plugins: [
    // Workaround for Critical dependency 
    // The request of a dependency is an expression in ./node_modules/@angular/core/fesm5/core.js
    new webpack.ContextReplacementPlugin(
        /\@angular(\|\/)core(\|\/)fesm5/,
        helpers.root('./src'),
        {}
    )
]

... to the webpack configuration. However, in the latest Angular CLI, you cannot manually edit the webpack configuration (the old ng ejectcommand which used to allow this has been removed), so I don't believe you can fix the warning at this time.

... 到 webpack 配置。但是，在最新的 Angular CLI 中，您无法手动编辑 webpack 配置（ng eject用于允许此操作的旧命令已被删除），因此我认为您此时无法修复警告。

All of which concludes that you would need the authors of either the Angular CLI to mask this error through the generated webpack configuration it uses internally, or the authors of Angular to change the way the core.js does its imports.

所有这些都得出结论，您需要 Angular CLI 的作者通过其内部使用的生成的 webpack 配置来掩盖此错误，或者 Angular 的作者来更改 core.js 执行其导入的方式。

Answer 4

回答by Amr ElAdawy

It is the BrowserModulethat is causing such warning. I don't know the reason, but it seems that it is the source of the warning.

正是BrowserModule造成这种警告的原因。我不知道原因，但它似乎是警告的来源。

typescript Angular 6 / 7“依赖的结果是一个表达式”

提问by Patrick McElhaney

采纳答案by Saddam Pojee

Step 1: [Same as yours]

第 1 步：[和你的一样]

Step 2: Create .tgz library file

第 2 步：创建 .tgz 库文件

Step 3: Add "widgets" library in package.json

第 3 步：在 package.json 中添加“widgets”库

Step 4: Install newly added library

第四步：安装新添加的库

Step 5: Use the library

第 5 步：使用库

Step 6: Build product project

第 6 步：构建产品项目

回答by H Dog

回答by Mark Hughes

回答by Amr ElAdawy

相关推荐

最近更新

标签

typescript Angular 6 / 7“依赖的结果是一个表达式”

提问by Patrick McElhaney

采纳答案by Saddam Pojee

Step 1: [Same as yours]

第 1 步：[和你的一样]

Step 2: Create .tgz library file

第 2 步：创建 .tgz 库文件

Step 3: Add "widgets" library in package.json

第 3 步：在 package.json 中添加“widgets”库

Step 4: Install newly added library

第四步：安装新添加的库

Step 5: Use the library

第 5 步：使用库

Step 6: Build product project

第 6 步：构建产品项目

回答by H Dog

回答by Mark Hughes

回答by Amr ElAdawy

相关推荐

typescript 无法分配给“状态”，因为它是常量或只读属性

typescript 泛型类型 Subject<T> 需要 1 个类型参数。- 角

typescript 用于多语言支持的 Angular 6 CLI 本地化和国际化

typescript *ng如果数组中存在值

相关推荐

最近更新

标签