Угловой 6/7 "результатом зависимости является выражение"

Я пытаюсь создать библиотеку 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

Приложение под названием "рабочая область" содержит библиотеку под названием "виджеты". Другое приложение под названием "продукт" стоит отдельно. Все к этому моменту хорошо.

Теперь давайте попробуем использовать библиотеку "widgets" в приложении "product". Откройте файл 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 { }

После этого изменения, когда я запускаю 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

Что означает "результатом зависимости является выражение"? Что я делаю неправильно?

Ответ 1

Эта ошибка возникает, когда зависимость JS выражается с использованием выражения, а не фиксированной строки - например, require('horse' + variable) или require(function() { return 'horse'+variable }). Вероятно, что-то, импортируемое вашим WidgetsModule, импортирует библиотеку, которая выполняет эту форму требования.

Webpack жалуется на это, потому что это означает, что он должен включать все файлы в папку, а не иметь возможность статически анализировать, какие файлы включать. Он все еще будет работать, но в соответствии с обсуждением этой проблемы Webpack, его не следует игнорировать и рефакторинг рассматриваемой зависимости.

Я столкнулся с этой ошибкой, когда недавно обновлял Angular с v5 до v6 в проекте, и, если я правильно помню, она исчезла, как только я обновил все остальные зависимости до их последних версий - я не могу сказать, какие Однако проблема была вызвана зависимостью, и, к сожалению, я не согласился увидеть ошибку и исправить ее, поэтому не могу проанализировать, какое именно изменение вызвало ошибку.

Похоже, что у многих людей возникают похожие проблемы - см., Например, https://github.com/angular/angular/issues/20357.

Чтобы удалить предупреждение (без устранения основной проблемы), вы должны выполнить этот процесс, добавив:

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

... к конфигурации веб-пакета. Однако в последней версии Angular CLI вы не можете вручную редактировать конфигурацию веб-пакета (старая команда ng eject которая использовала это, была удалена), поэтому я не верю, что вы можете исправить предупреждение в это время.

Все это делает вывод о том, что авторам Angular CLI понадобится скрыть эту ошибку с помощью созданной конфигурации веб-пакета, которую он использует для внутреннего использования, или авторам Angular, чтобы изменить способ импорта core.js.

Ответ 2

Я столкнулся с тем же предупреждением о том, что "результатом зависимости является выражение", ссылающееся на fesm5.js в новом проекте, созданном на Angular 7 cli.

Этот конкретный проект имеет ссылку на локальный пакет npm с относительным путем, начинающимся с file://../ который, казалось, вызвал предупреждение.

После некоторых исследований я обнаружил эту проблему с Github, которая объясняет, как мы можем исправить ее в приложениях, созданных в Angular 6+.

Мне удалось открыть файл angular.json в корневой папке проекта клиента (не в общей библиотеке) и найти этот путь:

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

и добавьте ключ:

"preserveSymlinks": true

со всем остальным файлом опущены здесь соответствующие части:

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

После добавления я получаю нормальную ng build без предупреждений. Надеюсь, это поможет!

Ответ 3

Такое предупреждение вызывает BrowserModule. Я не знаю причины, но кажется, что это источник предупреждения.