Angulaire 6 / 7 "le résultat d’une dépendance est une expression"

Question

Je suis en train de créer un Angulaires 6 de la bibliothèque et de l'utiliser dans Angulaire 6 app. J'ai bouilli vers le bas à un nombre minimal de cas de test. (Mise à jour: depuis Angulaire 7 est sorti, j'ai essayé aussi, d'ailleurs.)

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

Une application appelée "espace de travail" héberge une bibliothèque appelés "widgets". Une autre application appelée "produit" est le seul. Tout à ce point, c'est bien.

Maintenant, nous allons essayer d'utiliser le "widgets" de la bibliothèque dans le "produit" de l'application. Ouvrir le fichier product/src/app/app.module.ts qui a été générée par la CLI. Ajouter deux lignes, comme illustré ci-dessous.

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 { }

Après cette modification, lorsque j'exécute ng build depuis le répertoire du produit, je reçois des avertissements de 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

Quel est "le résultat d'une dépendance est une expression" veut dire? Ce que je fais mal?

Answer 1

Le principal problème n'est pas pourquoi vous obtenez que les mises en garde. La façon dont vous accédez à la bibliothèque n'est pas un moyen idéal. Voyons-en un peu mieux d'une approche à l'Aide Angulaire 7] avec vos propres étapes de l'échantillon, qui ne causera pas de cette question en premier lieu.

---

Étape 1: [le Même que le vôtre]

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

---

Étape 2: Créer .tgz fichier de bibliothèque

cd ../workspace/dist/widgets/
npm pack
cp widgets-0.0.1.tgz ../../../product/

---

Étape 3: Ajouter des "widgets" de la bibliothèque dans le paquet.json

Ouvrez package.json fichier product du projet, et en vertu de l' devDependencies ajoutez la ligne suivante:

"widgets": "file:./widgets-0.0.1.tgz",

L'étape 2 et l'Étape 3 si vous avez de la bibliothèque locale. Sinon, si votre bibliothèque est emballé et publier dans mnp référentiel, alors vous n'avez pas besoin d' file: mot-clé. Vous pouvez simplement vous parler de la version à l'instar d'autres dépendances.

---

Étape 4: Installer nouvellement ajout d'une bibliothèque

Exécutez npm install du produit du projet.

---

Étape 5: Utilisation de la bibliothèque

Modifier app.module.ts le fichier:

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 { }

---

Étape 6: construction de projet

Maintenant, exécutez ng build du produit du projet. Il sera exécuté avec succès.

Answer 2

J'ai rencontré le même avertissement à propos de "le résultat d'une dépendance est une expression" référencement fesm5.js dans une nouvelle Angulaire 7 cli généré projet.

Ce projet a une référence à un local mnp paquet avec un chemin d'accès relatif commençant par file://../ qui semblait à cause de l'avertissement.

Après quelques recherches, j'ai trouvé cette Github problème qui explique comment nous pouvons fixer dans Angulaire 6+ cli généré apps.

Ce qui a fonctionné pour moi a été l'ouverture de l' angular.json le fichier dans le client dossier racine du projet (pas de la bibliothèque partagée) et de trouver ce chemin:

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

et ajouter la clé:

"preserveSymlinks": true

avec tout le reste du fichier omis voici les parties pertinentes:

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

Après l'ajout de cette je obtenir normale ng build sans mise en garde. Espérons que ça aide!

Answer 3

Cette erreur vient quand un JS dépendance est exprimée à l'aide d'une expression plutôt qu'une chaîne fixe - par exemple, require('horse' + variable) ou require(function() { return 'horse'+variable }). Il est probable que quelque chose d'être importée par votre WidgetsModule de l'importation d'une bibliothèque qui est en train de faire que sous forme d'un besoin.

Webpack s'en plaint car cela signifie qu'il doit inclure tous les fichiers dans un dossier, plutôt que d'être en mesure d'analyser statiquement quels sont les fichiers à inclure. Il faudra encore travailler, mais en fonction de la discussion sur ce Webpack problème , il ne devrait pas être ignorée, et la dépendance en question devrait être remaniée.

Je suis tombé sur cette erreur dans le processus de mise à niveau Angulaire à partir de la v5 à la v6 sur un projet récemment, et si je me souviens bien, il s'en alla une fois que j'ai mis à jour tous les autres dépendances ainsi qu'à leurs dernières versions - je ne peux pas dire lequel la dépendance est à l'origine du problème, et malheureusement je n'ai pas commis entre de voir l'erreur et de le corriger donc je ne peux pas analyser ce changement exact adressé à l'erreur.

Il semble que de nombreuses personnes ayant des problèmes similaires si - voir, par exemple, https://github.com/angular/angular/issues/20357

Pour effacer l'avertissement (sans résoudre le problème sous-jacent), vous pouvez suivre ce processus, en ajoutant:

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

... pour le webpack de configuration. Cependant, dans la dernière Angulaire de la CLI, vous ne pouvez pas modifier manuellement le webpack de configuration (le vieux - ng eject de commande qui est utilisé pour permettre à ce qui a été supprimé), donc je ne crois pas que vous pouvez fixer l'avertissement à ce moment.

Tous de qui est la conclusion que vous devez les auteurs de l'Angulaire de la CLI pour masquer cette erreur généré par le webpack de configuration qu'il utilise en interne, ou les auteurs de l'Angulaire de changer la façon dont le core.js n'ses importations.

Answer 4

C’est ce `` qui est à l’origine d’un tel avertissement. Je ne sais pas la raison, mais il semble que c’est la source de l’avertissement.