Estoy tratando de inyectar variables en mi código a través de definePlugin de Webpack.
Y después de leer numerosas publicaciones, nada parece funcionar. tengo la sensacion de que me falta algo...
La configuración de mi paquete web es:
webpack = require('webpack'); module.exports = { plugins: [ new webpack.DefinePlugin({ $TEST: JSON.stringify(true), $ENV: { ENVIRONMENT: JSON.stringify(process.env.ENVIRONMENT) || 'localhost', API_URL: JSON.stringify(process.env.API_URL) } }) ] };
Creé el archivo typing.d.ts
para declarar variables:
declare let $ENV: Env; declare let $TEST: boolean; interface Env { ENVIRONMENT: string; API_URL: string; }
entonces estoy tratando de registrar variables en mi archivo main.ts:
console.log('Test ' + $TEST); console.log('Environment :', $ENV.ENVIRONMENT);
Pero recibo el siguiente error cuando ejecuto el comando 'ng serve'
Estoy usando :
¿Alguien tiene alguna idea para arreglarlo por favor?
Esto solo funcionará para ng build
, para ng serve
necesitaremos agregar otro constructor angular personalizado a nuestro angular.json:
"serve": { "builder": "@angular-builders/custom-webpack:dev-server", "options": { "browserTarget": "app:build" }, "configurations": { "production": { "browserTarget": "app:build:production" }, "ci": { "progress": false } } },
Importante, algunas otras publicaciones mencionan el uso de @angular-builders/dev-server:generic
builder.
Pero este está en desuso (ver migración de constructores angulares )
@angular-builders/dev-server:generic ha quedado obsoleto. Utilice @angular-builders/custom-webpack:dev-server en su lugar.