web-dev-qa-db-ja.com

Angular 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

「ワークスペース」と呼ばれるアプリは、「ウィジェット」と呼ばれるライブラリをホストします。 「製品」と呼ばれる別のアプリは単独で使用できます。これまでのすべては問題ありません。

次に、「製品」アプリで「ウィジェット」ライブラリを使用してみましょう。 CLIによって生成されたproduct/src/app/app.module.tsファイルを開きます。以下に示すように2行追加します。

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

「依存関係の結果は式です」とはどういう意味ですか？私は何を間違えていますか？

angulartypescriptwebpackangular-cli
43
Patrick McElhaney

主な問題は、その警告が表示される理由ではありません。ライブラリにアクセスする方法は理想的な方法ではありません。独自のサンプル手順で少し良いアプローチ[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に「ウィジェット」ライブラリを追加する

productプロジェクトのpackage.jsonファイルを開き、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を実行します。正常に実行されます。

Angular Product Project Build

19
Saddam Pojee

このエラーは、固定文字列ではなく式を使用してJS依存関係が表現されている場合に発生します（たとえば、require('horse' + variable)またはrequire(function() { return 'horse'+variable })）。 WidgetsModuleによってインポートされているものが、その形式のrequireを実行しているライブラリをインポートしている可能性があります。

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

... webpack構成に。ただし、最新のAngular CLIでは、webpackの構成を手動で編集することはできません（これを許可するために使用されていた古いng ejectコマンドは削除されました）。この時点で警告。

これらはすべて、Angular CLIの作成者が内部で使用する生成されたWebパック構成を通じてこのエラーをマスクするか、またはAngularの作成者が方法を変更する必要があると結論付けます。 core.jsはインポートを行います。

18
Mark Hughes

新しいAngular 7 cli生成プロジェクトでfesm5.jsを参照する「依存関係の結果は式です」という同じ警告が発生しました。

この特定のプロジェクトには、file://../で始まる相対パスを持つローカルnpmパッケージへの参照があり、これが警告の原因と思われました。

いくつかの調査の後、 このGithubの問題 が見つかりました。これは、Angular 6+のcli生成アプリでそれを修正する方法を説明しています。

私のために働いたのは、クライアントプロジェクトのルートフォルダ（共有ライブラリではない）でangular.jsonファイルを開き、このパスを見つけることでした：

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

キーを追加します。

"preserveSymlinks": true

ここではファイルの残りの部分をすべて省略して、関連する部分を示しています。

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

これを追加した後、警告なしで通常のng buildを取得します。お役に立てば幸いです！

17
H Dog

そのような警告を引き起こしているのはBrowserModuleです。理由はわかりませんが、それが警告の原因であるようです。

5
Amr ElAdawy