关键依赖：require函数的使用方式不能静态提取依赖答案

【问题标题】：Critical dependency: require function is used in a way in which dependencies cannot be statically extracted关键依赖：require函数的使用方式不能静态提取依赖
【发布时间】：2018-12-21 11:39:34
【问题描述】：

有人在“ng serve”中遇到过以下警告吗？

./node_modules/@angular/compiler/src/util.js 中的警告 10:24-31 关键依赖：require函数的使用方式不能静态提取依赖 ℹ ｢wdm｣：编译时带有警告。

角度版本控制：

Angular CLI：6.0.8 节点：8.11.3 操作系统：达尔文 x64 角度：6.0.9 ... 动画、通用、编译器、编译器-cli、核心、表单 ... http、语言服务、平台浏览器 ...平台-浏览器-动态、路由器、升级

我尝试更新 CLI 和 Angular，但没有成功。 util.js 中的代码如下所示：

function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define("@angular/compiler/src/util", ["require", "exports"], factory);
    }
}

【问题讨论】：

标签： angular typescript angular6

【解决方案1】：

我收到此错误并发现： https://fluin.io/blog/critical-dependency-cannot-be-statically-extracted，作者表明他收到了同样的警告。然而，我没有使用 Angular Elements，但我知道它可能与同一个问题有关，所以我继续检查我是否在任何导入中使用了 @angular/compiler/src/core。

我确实这样做了。修复就像删除导入行一样简单，在我的例子中是：

import { ViewEncapsulation } from '@angular/compiler/src/core';

然后编辑器自动导入如下：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

希望对你有帮助。

【讨论】：

谢谢！这是我一直在寻找的解决方案。
也谢谢你。不仅仅是这个模块，检查你的进口是否有恶意进口。
就是这样。解决了 Angular 7 中的问题。谢谢。
这帮助我在另一个文件上找到了类似问题的根源
在我的例子中，在 Angular 7 上，Visual Studio Code 自动完成了从 @angular/compiler/src/core 导入 ViewEncapsulation，给出了这个错误。解决了，谢谢

【解决方案2】：

我遇到了这个错误（如标题所示）和其他几个错误，因为我试图实现一个 3rd 方库。

简而言之，如果您遇到这些错误，请尝试查看您的 3rd 方库。就我而言，它是来自 Scanbot.io 的条形码扫描库。

【讨论】：

没关系。我找到了真正的原因。以下导入在我的一个组件中：import { Content } from '@angular/compiler/src/render3/r3_ast'; 删除它后，几个错误消失了。这是在导入一些样板代码以支持 Scandit.io SDK 时自动解决的依赖项。

【解决方案3】：

在您的应用中搜索导入。

您很有可能错误地导入了类似于 from '@angular/compiler/foo' 的内容。

【讨论】：

【解决方案4】：

如果您从 src 路径导入，则会引发此警告

从

更改组件导入语句

import { ChangeDetectionStrategy, ViewEncapsulation } from '@angular/compiler/src/core';

到

import {  ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core';

【讨论】：

【解决方案5】：

这次导入发生在我身上：

import { Message } from '@angular/compiler/src/i18n/i18n_ast';

我有一个消息界面，但自动填充导入功能默认为上述功能。

【讨论】：

你能解决这个错误吗？如果是，如何？
是的，确保你没有从那里导入。您应该从根目录导入。

【解决方案6】：

当我从 protractor 而不是 @angular/core 错误地导入 EventEmitter 时，我遇到了同样的错误。

将import { EventEmitter } from 'protractor'; 更改为import { EventEmitter } from '@angular/core'; 修复了它。

【讨论】：

【解决方案7】：

我发现了一个类似的问题：

./node_modules/@angular/compiler/src/util.js:10:24-31 - 警告：关键依赖：require 函数的使用方式无法静态提取依赖项

我记得使用 stringify 而不是 JSON.stringify 并且这个自动导入（使用 vs 代码）为：

import { stringify } from '@angular/compiler/src/util';

我删除了这个自动导入并将代码更正为 JSON.stringify。

【讨论】：