webpack - reconoce - instalar angular 5

angular-cli: el reemplazo del archivo de entorno se rompe después de cambiar al paquete web(con `ng eyect`)

Question

Decidí usar la configuración de paquete web extendido para angular-cli, así que ejecuté el comando ng eject .

Parece que todo está funcionando, excepto el reemplazo del archivo de entorno, que se especifica en angular-cli.json:

"environmentSource": "environments/environment.ts",
  "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }

Ahora no hay ningún reemplazo y siempre usa el archivo "environments / environment.ts".

¿Hay alguna manera de hacerlo funcionar sin cambios significativos para la configuración del paquete web?

También creó un problema para el proyecto angular-cli github.

Answer 1

Bueno .. Tuve que escribir mi propia solución

Y dentro de webpack cambié config para el plugin AotPlugin :

hostReplacementPaths: {
  ''environments/environment.ts'': environmentFiles[NODE_ENV]
}

y, por supuesto, archivos de environmentFiles especificados:

const environmentFiles = {
  ''development'': ''environments/environment.dev.ts'',
  ''staging'': ''environments/environment.stag.ts'',
  ''production'': ''environments/environment.prod.ts''
};

Answer 2

Actualización 5/24/2017

Descubrí que estaba obteniendo un error durante el modo de vigilancia de npm start debido al intercambio de archivos de entorno similar a este problema con angular-cli

cualquier recompilación durante el inicio npm generaría este error

ERROR in ./src/environments/environment
Module build failed: Error: ENOENT: no such file or directory, open ''C:/dev/(...)/src/environments/environment''
 @ ./src/main.ts 4:0-57
 @ multi (webpack)-dev-server/client?http://localhost:4200 ./src/main.ts

Pude omitir el intercambio de entorno para compilaciones ''locales'' actualizando el AotPlugin de la siguiente manera.

new AotPlugin({
  "mainPath": "main.ts",
  "hostReplacementPaths": isLocal? {} : {
    "./environments/environment": `${envFile}`
  },
  "exclude": [],
  "tsConfigPath": "src//tsconfig.app.json",
  "skipCodeGeneration": !isAot
})

publicación original

Publicando esto aquí para cualquier otra persona que tenga problemas para hacer que esto funcione.

Utilicé una variación de la técnica por Stepan, pero no se reemplazarían rutas de host. Estoy en Windows, así que probé barra inclinada, barra invertida, barra escapada, etc.

No fue hasta que coincidí con mi declaración de importación real que el hostReplacementPath realmente hizo el reemplazo.

En mi archivo main.ts tengo esta declaración de importación

import { environment } from ''./environments/environment'';

Finalmente funcionó cuando utilicé esa ruta exacta en mi archivo webpack.config.js como se ve a continuación. (Nota: también usé interpolación de cadenas en el valor de la cadena de entorno).

const environmentFiles = {
  ''dev'': ''environments/environment.dev.ts'',
  ''stage'': ''environments/environment.stage.ts'',
  ''prod'': ''environments/environment.prod.ts''
};

module.exports = function(env) {
  const isAot = env.aot || false;
  const isZip = env.zip || false;

  const isLocal = env.target === ''local'';
  const envFile = environmentFiles[env.target];

// ... code omitted for brevity

new AotPlugin({
  "mainPath": "main.ts",
  "hostReplacementPaths": {
    "./environments/environment": `${envFile}`
  },
  "exclude": [],
  "tsConfigPath": "src//tsconfig.app.json",
  "skipCodeGeneration": !isAot
})

Finalmente, para completar, aquí está mi script npm real

"build-prod-aot": "rimraf dist && webpack --env.target=prod --env.zip --env.aot --colors",