WebpackDevMiddleware and adding command line arguments (i.e. enviornment files) #485

New Issue

fergalmoran · 2025-08-09T17:16:28Z

fergalmoran commented

2025-08-09 17:16:28 +00:00

Originally created by @jrmcdona on 8/20/2017

Hello,
So I am trying to add in webpack support for Environments like you can do with the Angular-cli out of the box.

I will have a mocked enviornment file and additional dev environment without mocks.

I have updated my webpack Aot plugin to do a hostReplacementPaths of the environment default file by replacing with the file based on the environment I specifiy in the build command.

Is this where I need to use WebpackDevMiddlewareOptions EnvironmentVariables to add all of the command link arguments?

Sample command.

"build:devMocked": "webpack --env.target=devMocked --progress --color"

This builds fine and also runs fine with dotnet run.

However, If i use F5 the webpack middleware doesn't know what env/env.target is (the parameter I specified in the command line). See short snipped of the AOT file today where I pass env to the function from the command and it will subsequently error.

function getAotPluginClient(platform, aot, env) {
  const environmentFiles = {
    dev: "./Client/environments/environment.dev.ts",
    devMocked: "./Client/environments/environment.devMocked.ts",
    stage: "./Client/environments/environment.stage.ts",
    prod: "./Client/environments/environment.prod.ts"
  };
    console.log(env);
    console.log(env.target);
   //const envFile = environmentFiles[JSON.stringify(env.target)];

  var aotPlugin = new AotPlugin({
    tsConfigPath: aot ? aotTsconfigs[platform] : tsconfigs[platform],
    skipCodeGeneration: !aot,
    hostReplacementPaths: {
      "../Client/environments/environment.ts": '../Client/environments/environment.devMocked.ts'
    },
    exclude: []
  });

The error:

Exception has occurred: CLR/System.AggregateException
An exception of type 'System.AggregateException' occurred in System.Private.CoreLib.ni.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 	 System.Exception : Call to Node module failed with error: TypeError: Cannot read property 'target' of undefined
    at getAotPluginClient (c:\Users\v-jormc\Source\Repos\Xbox.Ambassadors\Microsoft.Ambassadors\Microsoft.Ambassadors.Web.Client\webpack\webpack.aot.js:31:18)
    at module.exports (c:\Users\v-

Thanks

*Originally created by @jrmcdona on 8/20/2017* Hello, So I am trying to add in webpack support for Environments like you can do with the Angular-cli out of the box. I will have a mocked enviornment file and additional dev environment without mocks. I have updated my webpack Aot plugin to do a hostReplacementPaths of the environment default file by replacing with the file based on the environment I specifiy in the build command. **Is this where I need to use WebpackDevMiddlewareOptions EnvironmentVariables to add all of the command link arguments?** Sample command. "build:devMocked": "webpack --env.target=devMocked --progress --color" This builds fine and also runs fine with dotnet run. However, If i use F5 the webpack middleware doesn't know what env/env.target is (the parameter I specified in the command line). See short snipped of the AOT file today where I pass env to the function from the command and it will subsequently error. ``` function getAotPluginClient(platform, aot, env) { const environmentFiles = { dev: "./Client/environments/environment.dev.ts", devMocked: "./Client/environments/environment.devMocked.ts", stage: "./Client/environments/environment.stage.ts", prod: "./Client/environments/environment.prod.ts" }; console.log(env); console.log(env.target); //const envFile = environmentFiles[JSON.stringify(env.target)]; var aotPlugin = new AotPlugin({ tsConfigPath: aot ? aotTsconfigs[platform] : tsconfigs[platform], skipCodeGeneration: !aot, hostReplacementPaths: { "../Client/environments/environment.ts": '../Client/environments/environment.devMocked.ts' }, exclude: [] }); ``` The error: ``` Exception has occurred: CLR/System.AggregateException An exception of type 'System.AggregateException' occurred in System.Private.CoreLib.ni.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 System.Exception : Call to Node module failed with error: TypeError: Cannot read property 'target' of undefined at getAotPluginClient (c:\Users\v-jormc\Source\Repos\Xbox.Ambassadors\Microsoft.Ambassadors\Microsoft.Ambassadors.Web.Client\webpack\webpack.aot.js:31:18) at module.exports (c:\Users\v- ``` Thanks

fergalmoran closed this issue

2025-08-09 17:16:28 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#485