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

Question

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

Я пытаюсь создать библиотеку Angular 6 и использовать ее в приложении Angular 6. Я свел его к минимальному тесту.

ng new workspace 
ng new product 
cd workspace 
ng generate library widgets 
ng build --prod widgets
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

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

52

angular typescript webpack angular-cli

Источник

user437 31 июл '18 в 13:30

3 ответа

Другие вопросы по тегам angular typescript webpack angular-cli

user213050 02 ноя '18 в 17:45 2018-11-02 17:45 · Answer 1 · 2018-11-02 17:45

Я столкнулся с тем же предупреждением о том, что "результатом зависимости является выражение" 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 без предупреждений. Надеюсь, это поможет!

user10699402 15 дек '18 в 14:22 2018-12-15 14:22 · Answer 2 · 2018-12-15 14:22

Главная проблема не в том, почему вы получаете эти предупреждения. То, как вы получаете доступ к библиотеке, не является идеальным способом. Давайте рассмотрим немного лучший подход [Использование Angular 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

открыто 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 в продуктовый проект. Это будет успешно работать.

user789529 31 июл '18 в 15:09 2018-07-31 15:09 · Answer 3 · 2018-07-31 15:09

Эта ошибка возникает, когда зависимость 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.

user5079380 01 авг '18 в 15:17 2018-08-01 15:17 · Answer 4 · 2018-08-01 15:17

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

5

Источник

user5079380 01 авг '18 в 15:17