Angular-cli: ng eject brakes environment file

[stevermeister]

Version - @angular/cli: 1.0.0-beta.32.3 [2.0.0] (e)

Am I correct, that I can't use environment file replacement(that is configured in angular-cli.json) after I switch to webpack (ng eject)?

UPD: added stack discussion - http://stackoverflow.com/questions/42387864/angular-cli-environment-file-replacement-is-broken-after-switch-to-webpack-wit

[filipesilva]

That is correct. Once you eject, you're on your own.

[stevermeister]

@filipesilva
I guess you did not get the point:
1) I configured angular-cli
2) I made ng eject
3) environment file replacement is broken

is it expected to get broken webpack config after doing ng eject?

[filipesilva]

Once you use eject, you're not using the CLI as a build system anymore. Whatever is in .angular-cli.json is irrelevant for builds.

Can you walk me through it though? What commands do you run? What makes you say environment file replacement is broken?

[stevermeister]

I configured different environment files (for dev, staging and production) in ".angular-cli.json" and after ng eject it was broken, so I had to make fix in webpack, but it would be nice if angular-cli does this migration out of box.

you can see here http://stackoverflow.com/q/42387864/274500 detailed description of the issue and also my fix for it.

[filipesilva]

I'm sorry but I just have no idea what you mean by 'it was broken'. I've read your stack overflow post and it says pretty much the same.

I have to ask again: What commands do you run? What makes you say environment file replacement is broken?

[stevermeister]

it does not replace environments/environment.ts to environments/environment.prod.ts for example

[filipesilva]

Ok. And how are you trying to replace it? Are you doing ng build? Or are you doing npm start? The only command you've told me so far is ng eject, and that command does not do builds so I don't know what you're doing to try and use the environment files.

[stevermeister]

Sorry that my feedback was not clear enough.
I'm doing npm start and npm run build and expect environments/environment.ts file_path to be replaced based on environment. It didn't happen. May be I'm doing something wrong, but I found only one place in webpack config - hostReplacementPaths and it was not configured to replace to environments/environment.prod.ts or also live in my case to environments/environment.dev.ts and environments/environment.dev.ts like it was configured for angular-cli before ng eject

[filipesilva]

Ok, I think I understand what the problem is.

So, when you do ng eject, you can pass onto it options - the same options you would pass onto ng build. Then it will generate a webpack config that matches those options. You can use to to get the same build as you would have with ng build.

When you run ng eject with no arguments, you get a webpack config that uses the environment.ts. If you were to run ng eject --environment=prod, you would get a webpack config that uses environment.prod.ts.

Practically speaking what this means is that ng eject only generates one webpack config that then you will have to customize. It's not meant to be as full featured as the CLI, nor is it meant to extend the CLI. It's just meant as an escape button.

This is also what I mean by "Once you eject, you're on your own.". We don't really provide support for ejected projects... it's nearly impossible to figure out what's wrong with them after users customize it.

So once you eject, it is up to you to customize it as you want/need. But for all intents and purposes you are foregoing the CLI build system and getting a static webpack config instead.

[stevermeister]

ng eject --environment=prod

Yes, it's clear thank you.
So the plan was to generate separate config for each environment.

But why during ng eject command not to take in account environments options in .angular-cli.json? Like you do we assets for example. It will be pretty convenient, don't you think so?

[filipesilva]

That line of reasoning (customizing the build via webpack but still having the CLI functionality) was discussed at length in https://github.com/angular/angular-cli/issues/1656.

On a more practical note, what you are requesting (using the envs from CLI config in ejected webpack) is just not a very worthwhile feature for us to spend time on. It would be convenient, yes... but it's also quite easy to do yourself. And not everyone cares about the environment files as much as you either, so it wouldn't affect everyone but rather a fraction of the users that eject.

Thus it has a trivial workaround and is low impact. So for the CLI project itself it is better to spend that time and effort elsewhere.

[stevermeister]

ok, I see. thank you for your answer!

[Kunepro]

@filipesilva After I have ejected the CLI, if I want to go back to use the default CLI can I simply delete the webpack.config file, remove the "ejected:true" from angular-cli.json and adjust the commands inside package.json and I'll be redeemed from my sins?
Or there's some hidden magic that makes it a one way process?

One more:
You said the ejected webpack config doesn't include all the CLI features?
I guess this goes beyond the difference in the commands you run from package.json and the environment files?

Practically speaking what this means is that ng eject only generates one webpack config that then you will have to customize. It's not meant to be as full featured as the CLI, nor is it meant to extend the CLI. It's just meant as an escape button.

I was hoping to use the CLI features + some customised PostCSS plugins, and my idea was to merge my configuration with the new ejected webpack every time I decide to update the CLI. So that I would have an updated and full featured CLI with only the burden of having to merge my own customisation every time. I understand that this won't happen?
So there's no plan to support custom PostCSS personal configurations at all?

[askdesigners]

Seems like that's the price you pay for magic :D

[deepak1725]

@Kunepro Changing ejected:false in

.angular.cli.json

will reverse the ng-eject

[odahcam]

So, just one more question: what the key hostReplacementPaths: { "environments\\environment.ts": "environments\\environment.prod.ts" } in AngularCompilerPlugin does? 😕 Wasn't it meant to replace the environment imports?

[viniciuslagedo]

In my case, it worked when I change prefix of environments. Like above:
From:
"environments\\environment.ts": "environments\\environment.prod.ts"
To:
"..\\environments\\environment.ts": "..\\environments\\environment.prod.ts"

[FARHANE]

The file environment.prod.ts is not used after ng eject --prod
npm run build always take environment.ts for my case.
I do

new AngularCompilerPlugin({
      "mainPath": "main.ts",
      "platform": 0,
      "hostReplacementPaths": {
        "..\\environenvironments\\environment.ts": "..\\environments\\environment.prod.ts"
      },
      "sourceMap": false,
      "tsConfigPath": "src\\tsconfig.app.json",
      "compilerOptions": {}
    })

but not working

[angular-automatic-lock-bot[bot]]

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._}