关键依赖项：require函数的使用方式无法静态提取依赖项，导致问题。

Question

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

“警告：在./node_modules/@angular/compiler/src/util.js中，关键依赖项是：使用require函数的方式无法静态提取依赖项。 ℹ️ ｢wdm｣: 编译时出现警告。”

“Angular版本：”

“Angular CLI: 6.0.8 Node: 8.11.3 OS: darwin x64 Angular: 6.0.9 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router, upgrade”

“我尝试更新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);
    }
}

- Aman

Answer 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';

- Jorge Solis

---

谢谢你也一样。这不仅仅是这个模块的问题，检查一下你的导入是否有不合适的导入。 - user1059939

完成了。在 Angular 7 中解决了问题。谢谢。 - JRoppert

这帮助我找到了另一个文件中类似问题的源头。 - Jahrenski

你，先生，是一个传奇。 - user3024827

在我的 Angular 7 项目中，使用 Visual Studio Code 自动补全时，引入 @angular/compiler/src/core 中的 ViewEncapsulation 出现了错误。解决方法是手动引入正确路径下的 ViewEncapsulation 模块。感谢您的帮助。 - Luca De Nardi

Answer 2

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

将import { EventEmitter } from 'protractor';更改为import { EventEmitter } from '@angular/core';即可解决问题。

- mimo

Answer 3

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

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

我想起之前使用了 stringify 代替 JSON.stringify，而这个操作被自动导入（使用 vs code）为:

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

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

- CJM

Answer 4

搜索应用程序的导入。

很可能是您错误地导入了类似于from '@angular/compiler/foo'的东西。

- Yuri

Answer 5

如果你从src路径导入，这个警告会被抛出。

将组件导入语句更改为：

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

to

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

- Raghu Pyaram

Answer 6

补充一下，类似的情况也可能是从Angular导入了某些内容。我的情况如下：

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

我不小心打成了throw error()而不是throw Error()，导入后触发了警告。

- sfaust

---

它就像魔法一样顺利地运行了！非常感谢。 - Jasmin Akther Suma

Answer 7

我遇到了这个错误（标题中显示），以及其他几个错误，因为我试图实现一个第三方库。

所以简单地说，如果您遇到这些错误，请尝试查看您的第三方库。在我的情况下，它是来自Scanbot.io的条形码扫描库。

- Post Impatica

---

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

Answer 8

我也遇到了这个导入问题：

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

我有一个Message接口，但是自动填充导入功能默认为上面的那个。

- wcjord

---

你能解决这个错误吗？如果可以，怎么做？ - midnightgamer

确保不要从那里导入。应该从根目录导入。 - wcjord

@wcjord，您能否提供导入Angular 14中Message的代码片段？ - Alok Patel

抱歉 @AlokPatel，我已经有一段时间没有碰过这段代码了！ - wcjord