角度6/7“依赖关系的结果是表达式”

主要的问题不是为什么你会收到这些警告。您访问库的方式不是理想的方式。让我们研究一个更好的方法[使用角度7]与您自己的样本步骤,这将不会导致问题在第一位。

第一步:【和你的一样】

步骤2:创建.tgz库文件

cd../workspace/dist/widgets/
NPM包
CP小部件-0.0.1.tgz../../../product/
< /代码> 



步骤3:在package.json中添加“widgets”库

打开package.jsonfile ofproductproject,并在devdependenciesadd the following line:。


“widgets”:“文件:./widgets-0.0.1.tgz”,
< /代码> 

如果您在本地拥有库,则需要步骤2和步骤3。否则,如果您的库被打包并发布到NPM存储库中,那么您不需要file:keyword。您可以像其他依赖项一样只提到版本。




步骤4:安装新添加的库

在产品项目中运行npm install



第5步:使用库

modifyapp.module.tsfile:。


import browsermodule from'@angular/platform browser';
从“@angular/core”导入ngmodule;

从“./app.component”导入“appcomponent”;
从“widgets”导入widgetsmodule//新行

@ ngMead({)
声明:
附加组件
,
进口:
BrowserModule
widgetsmodule//新行
,
供应商:
引导程序:[AppComponent]
})
导出类AppModule
< /代码> 



步骤6:构建产品项目

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



ETER方法[使用角度7]与您自己的样本步骤,这不会导致问题在第一位。




步骤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




步骤2:创建.tgz库文件

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




步骤3:在package.json中添加“widgets”库

正常开放package.json文件product项目及以下devDependencies添加以下行:

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


如果您在本地拥有库,则需要步骤2和步骤3。否则,如果您的库被打包并发布到NPM存储库中,那么您不需要file:关键字。您可以像其他依赖项一样只提到版本。



步骤4:安装新添加的库

跑npm install在产品项目中。



第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在产品项目中。它将成功运行。

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

Webpack抱怨这一点,因为这意味着它必须包含文件夹中的所有文件,而不是能够静态分析要包含哪些文件。它仍然有效,但根据讨论 this Webpack issue 它不应该被忽略,并且相关的依赖关系应该被重构。

最近我在一个项目中将Angular从v5升级到v6的过程中遇到了这个错误,如果我记得正确的话,当我升级了所有其他依赖项以及它们的最新版本后,它就消失了——我不能说是哪个依赖项导致了问题,不幸的是,我没有在看到错误和修复之间作出承诺。所以我不能分析是什么改变解决了这个错误。

不过,似乎很多人都有类似的问题——例如,参见 https://github.com/angular/angular/issues/20357

要清除警告(而不修复潜在问题),您将遵循 this process ,增加:

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'),
        {}
    )
]

…到Webpack配置。但是,在最新的Angular CLI中,不能手动编辑Webpack配置(旧的 ng eject 用于允许此操作的命令已被删除),因此我相信此时您无法修复警告。

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

我遇到了关于“依赖关系的结果是引用表达式”的相同警告 fesm5.js 在新的Angular7cli生成的项目中。

此特定项目引用了一个本地NPM包,该包的相对路径以 file://../ 这似乎引起了警告。

经过一些研究,我发现 this Github issue 这解释了我们如何在Angular6+CLI生成的应用程序中修复它。

对我有用的是打开 angular.json 文件位于客户端项目的根文件夹(而不是共享库)中,并找到以下路径:

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

并添加键:

"preserveSymlinks": true

忽略了文件的其余部分,以下是相关部分:

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

加上这个我就正常了 ng build 没有警告。希望有帮助!

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