Angular-cli: Always uses dev environment config after eject

Created on 15 Mar 2017  路  17Comments  路  Source: angular/angular-cli

Bug Report or Feature Request (mark with an x)

  • [x] bug report
  • [ ] feature request

Versions.

```@angular/cli: 1.0.0-rc.2 (e)
node: 6.9.5
os: win32 x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/cli: 1.0.0-rc.2
@angular/compiler-cli: 2.4.9

Windows 7


### Repro steps.
1. Generate new app
2. Edit `environment.ts` with a new property with a unique string value

uniqueProp: "my-dev-prop"

3. [_Not really necessary since it's already included in main.ts_] Import the environment config in any `.ts` file, for example in `app.module.ts`

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

  1. run ng eject --prod --e prod
  2. run npm run build
  3. run a search through files in dist/ looking for unique value specified in step 2

Desired functionality.

To have production environment configuration used when building.
(or given above mentioned repro steps to not find the specified string value)

Mention any other details that might be useful.

I'm running the commands from Git Bash.

angulacli

Most helpful comment

Hi @harouny

The workaround i am using is two part, one for dev and one for build, but they work side by side.

first in the webpack config under resolve i add an alias for enviroment like:
resolve: { extensions: ['.ts', '.js', '.scss'], alias: { environment: helpers.environment(options.ENV), } }
helpers.environment(options.ENV) just returns the path to my enviroment file eg ./src/environments/dev/index.ts

then in the tsconfig.json i update the paths node like:
"paths": { "environment": [ "./environments" ] }

lastly i have updated the imports to be: import { environment } from 'environment';
rather then: import {environment} from '../environments/environment';

i have changed the file name from environment.ts to index.ts for simplisity,
hope this makes sense

All 17 comments

@sodper I believe the arguments you are using are incorrect, try using:
ng eject -e prod
or
ng eject --environment prod

it worked for me.

I just tried the repro steps with both ng eject -e prod and ng eject --environment prod and I still get the same results. Are you running the same versions as I am?

@filipesilva I don't agree with you that this is a duplicate of #4907. The issue I'm having is that the webpack config generated by ng eject --environment=prod doesn't use the environment.prod.ts, even though it's declared in the AOT plugin like so:

hostReplacementPaths: {
  'environments/environment.ts': 'environments/environment.prod.ts'
}

Have you tried to reproduce the issue with the above stated repro steps?

Apologies, I misunderstood. Reopening.

@sodper My cli version is rc2. The only difference is that I'm on a mac.

I am facing the same problem. Is there a workaround?

Same issue here. Seems that the AoT Plugin is broken. Or do we miss something in the Webpack configuration?

Error is in WebpackCompilerHost used by AoT Plugin.
While replacing 'environments\environment.ts' with 'environments\environment.prod.ts' in writeFile, file path is normalizing to Windows-style by utilite path, e. g. 'environments\environment.ts' transforms to something like 'C:gittest-appsrcenvironmentsenvironment.ts'. But later, when compiler is looking for environment file, it is looking for unix-style path, e. g. 'C:/git/test-app/src/environments/environment.ts'.
File paths does not match and compiler uses original environment file instead of replacement.

@TheLegion thanks :) any workaround?

Hi @harouny

The workaround i am using is two part, one for dev and one for build, but they work side by side.

first in the webpack config under resolve i add an alias for enviroment like:
resolve: { extensions: ['.ts', '.js', '.scss'], alias: { environment: helpers.environment(options.ENV), } }
helpers.environment(options.ENV) just returns the path to my enviroment file eg ./src/environments/dev/index.ts

then in the tsconfig.json i update the paths node like:
"paths": { "environment": [ "./environments" ] }

lastly i have updated the imports to be: import { environment } from 'environment';
rather then: import {environment} from '../environments/environment';

i have changed the file name from environment.ts to index.ts for simplisity,
hope this makes sense

any news?

@carl09 what is helpers.?

@kotmatpockuh A sample content of helpers can be found here.

My workaround:

// use this before AngularCompilerPlugin in your webpack.prod.js
new webpack.NormalModuleReplacementPlugin(/\.\.\/environments\/environment/, '../environments/environment.prod')

It doesn't works for 100% of the cases, my imports logs true or false correctly in console.log, but some cases seems that it is ignored.

eject functionality is no longer available in the latest version (6.0+). For custom webpack configurations the following unofficial add-on is a suggested solution: https://github.com/manfredsteyer/ngx-build-plus

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

brtnshrdr picture brtnshrdr  路  3Comments

hareeshav picture hareeshav  路  3Comments

IngvarKofoed picture IngvarKofoed  路  3Comments

naveedahmed1 picture naveedahmed1  路  3Comments

jmurphzyo picture jmurphzyo  路  3Comments