cli - Angular 6/7 "el resultado de una dependencia es una expresión"

webpack 3 angular 2

Question

Estoy intentando crear una biblioteca de Angular 6 y utilizarla en una aplicación de Angular 6. Lo he reducido a un caso de prueba mínimo. (Actualización: dado que Angular 7 está fuera, también lo he intentado).

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

Una aplicación llamada "área de trabajo" aloja una biblioteca llamada "widgets". Otra aplicación llamada "producto" está solo. Todo a este punto está bien.

Ahora intentemos usar la biblioteca de "widgets" en la aplicación "producto". Abra el archivo product/src/app/app.module.ts que fue generado por el CLI. Agrega dos líneas como se muestra a continuación.

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

Después de ese cambio, cuando ejecuto ng build desde el directorio del producto, recibo advertencias 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

¿Qué significa "el resultado de una dependencia es una expresión"? ¿Qué estoy haciendo mal?

Answer 1

El principal problema no es por qué está recibiendo esas advertencias. La forma en que está accediendo a la biblioteca no es una forma ideal. Veamos un enfoque un poco mejor [Uso de Angular 7] con sus propios pasos de muestra, que no causarán ese problema en primer lugar.

Paso 1: [Igual que el tuyo]

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

Paso 2: Crea el archivo de biblioteca .tgz

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

Paso 3: Agrega la biblioteca de "widgets" en package.json

Abra el archivo package.json del proyecto de product y, bajo devDependencies agregue la siguiente línea:

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

Los pasos 2 y 3 son necesarios si tiene la biblioteca localmente. De lo contrario, si su biblioteca está empaquetada y se publica en el repositorio npm, entonces no necesita file: keyword. Solo puedes mencionar la versión como otras dependencias.

Paso 4: Instalar la biblioteca recién agregada

Ejecute npm install en el proyecto de producto.

Paso 5: Usa la biblioteca

Modificar el archivo 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 { }

Paso 6: Construir proyecto de producto

Ahora, ejecute ng build en proyecto de producto. Se ejecutará con éxito.

Answer 2

Encontré la misma advertencia sobre "el resultado de una dependencia es una expresión" que hace referencia a fesm5.js en un nuevo proyecto generado por Angular 7 cli.

Este proyecto en particular tiene una referencia a un paquete npm local con una ruta relativa que comienza con el file://../ que parece causar la advertencia.

Después de algunas investigaciones, encontré este problema de Github que explica cómo podemos solucionarlo en las aplicaciones generadas por Angular 6+ cli.

Lo que me funcionó fue abrir el archivo angular.json en la carpeta raíz del proyecto del cliente (no en la biblioteca compartida) y encontrar esta ruta:

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

y añadir la clave:

"preserveSymlinks": true

Con todo el resto del archivo omitido aquí están las partes relevantes:

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

Después de agregar esto obtengo una ng build normal sin advertencias. ¡Espero que ayude!

Answer 3

Es el BrowserModule que está causando dicha advertencia. No sé la razón, pero parece que es la fuente de la advertencia.

Answer 4

Este error aparece cuando se expresa una dependencia JS utilizando una expresión en lugar de una cadena fija, por ejemplo, require(''horse'' + variable) o require(function() { return ''horse''+variable }) . Es probable que algo que esté siendo importado por su WidgetsModule sea importar una biblioteca que está haciendo esa forma de un requerimiento.

Webpack se queja de esto porque significa que tiene que incluir todos los archivos en una carpeta, en lugar de poder analizar de forma estática qué archivos incluir. Seguirá funcionando, pero de acuerdo con la discusión sobre este tema del paquete web , no se debe ignorar y la dependencia en cuestión se debe rediseñar.

Encontré este error cuando estaba en el proceso de actualizar Angular de v5 a v6 en un proyecto recientemente, y si recuerdo bien, desapareció una vez que actualicé todas las otras dependencias también a sus últimas versiones. No puedo decir cuál. Sin embargo, la dependencia estaba causando el problema, y ​​desafortunadamente no cometí entre ver el error y arreglarlo, así que no puedo analizar qué cambio exacto solucionó el error.

Sin embargo, parece que muchas personas tienen problemas similares; consulte, por ejemplo, https://github.com/angular/angular/issues/20357

Para borrar la advertencia (sin solucionar el problema subyacente), debe seguir este proceso y agregar:

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

... a la configuración del webpack. Sin embargo, en la CLI angular más reciente, no puede editar manualmente la configuración del paquete web (el antiguo comando ng eject eject que solía permitir esto se ha eliminado), por lo que no creo que pueda corregir la advertencia en este momento.

Todo lo cual concluye que necesitaría que los autores de la CLI angular para enmascarar este error a través de la configuración de paquete web generado que usa internamente, o los autores de Angular para cambiar la forma en que core.js realiza sus importaciones.