Enviornment.ts toggling and correct usage of WebpackDevMiddlewareOptions EnvironmentVariables #1322
Description
I have added a parameter to my webpack commands so that I can swap out the Remote API endpoints. I am flipping between mocked data files and staging endpoints, and I wanted people on the team to be able to do that locally while developing.
webpack --env.target=staging --progress --color
webpack --env.target=mocked --progress --color
In webpack I do the hostreplacement (this all seems to be worknig just fine):
const environmentFiles = {
dev: "./ClientApp/src/environments/environment.dev.ts",
devMocked: "./ClientApp/src/environments/environment.devMocked.ts",
staging: "./ClientApp/src/environments/environment.staging.ts",
prod: "./ClientApp/src/environments/environment.prod.ts"
};
console.log(env.target)
const envFile = environmentFiles[env.target];
new AotPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/src/app.module.browser#AppModule'),
exclude: ['./**/*.server.ts'],
"hostReplacementPaths": {
"./ClientApp/src/environments/environment": `${envFile}`
},
// Set flag to false to allow AOT
"skipCodeGeneration": true
})
My issue is when I run VS Code [Development] Launch Web I get a NodeServices error of target is undefined. So It does not like my env.target from the code sample above.
I added the EnvironmentVariables but this does not work. I am using this wrong? I can comment out the whole UseWebpackDevMiddleware code block and let the code use the manual webpack build I created from the command line, but then I lose HMR. Which I absolutely don't want to lose.
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
HotModuleReplacement = true,
EnvironmentVariables = new Dictionary<string, string>()
{
{ "target", "staging" }
}
});
I still get the error, full error is below.
Exception has occurred: CLR/System.AggregateException
An exception of type 'System.AggregateException' occurred in System.Private.CoreLib.dll but was not handled in user code: 'One or more errors occurred.'
Inner exceptions found, see $exception in variables window for more details.
Innermost exception Microsoft.AspNetCore.NodeServices.HostingModels.NodeInvocationException : Cannot read property 'target' of undefined
TypeError: Cannot read property 'target' of undefined
at module.exports (c:\Users\v-jormc\Source\Repos\Xbox.Ambassadors\Microsoft.Ambassadors\Microsoft.Ambassadors.Web.Client\webpack.config.js:19:22)
at createWebpackDevServer (c:\Users\v-jormc\Source\Repos\Xbox.Ambassadors\Microsoft.Ambassadors\Microsoft.Ambassadors.Web.Client\node_modules\aspnet-webpack\WebpackDevMiddleware.js:194:31)
at createWebpackDevServer (C:\Users\v-jormc\AppData\Local\Temp\104gtbeg.vbc:74:50)
at C:\Users\v-jormc\AppData\Local\Temp\2we2pffu.pst:114:19
at IncomingMessage.<anonymous> (C:\Users\v-jormc\AppData\Local\Temp\2we2pffu.pst:133:38)
at emitNone (events.js:105:13)
at IncomingMessage.emit (events.js:207:7)
at endReadableNT (_stream_readable.js:1045:12)
at _combinedTickCallback (internal/process/next_tick.js:138:11)
at process._tickCallback (internal/process/next_tick.js:180:9)
Update: Is EnviornmentVariables meant to do what is being talked about in this thread in regards to the EnvParameter? Or are we still needing something else to achieve what I am trying to do?
#816