what is ng eject actually for?

[waratah]

Bug Report or Feature Request (mark with an x)

• bug report -> please search issues before submitting

Versions.

documentation issue..

Repro steps.

Read ng eject and tell me what it is actually for. I have no idea why I need this command and what it actually does. There is an assumption I know what eject is.

The log given by the failure.

https://github.com/angular/angular-cli/wiki/eject

Desired functionality.

As a developer I understand the purpose of this command.

Mention any other details that might be useful.

[dave11mj]

Are you asking what is for or suggesting the docs be updated to describe better what it does ? xD

If its the former ng eject simply means you need to do something a lot more advance or custom with webpack than what the cli provides for commands like ng build and ng serve .. So it generates a webpack.config.js based on the configurations that the cli uses, so that you can then customize it further. However, that also means that you'll be able to use certain commands like ng build and ng serve ... Let me know if that makes a bit sense. ^^

[waratah]

@dave11mj

Yes you are spot on, needs a bit more documentation. Thanks for clarifying the question. Let me see if I understand the purpose and propose a doc update:

If you want to use additional features of webpack that the CLI does not directly support. Use the `ng eject` command to create a webpack.config.js to add the extra features that the CLI does not directly support.

All existing commands of the CLI will continue to work unaffected but the effect of the commands may be altered by your changes to the webpack.config.js file. (??)

[dave11mj]

It does give you additional webpack features but only because if you eject building and dev server become your complete responsibility, meaning you lose the support of any updates that may come to ng build and ng serve. If I were to describe it in a more documentation language it would be something like:

Relinquishes support for ng build and ng serve commands by exporting all webpack configurations into a webpack.config.js and updating package.json to reflect new dependencies. This action cannot be undone.

Another alternative would be:

Exports all webpack configurations into a webpack.config.js and updates package.json to reflect new dependencies. This action disables ng build, ng serve and cannot be easily undone.

[tytskyi]

@waratah eject makes the build configuration to be part of your app and not part of cli itself

[klanglie]

I am new to angular-cli and am used to tinkering with webpack configuration manually. I like all of the commands ng provides. However, if I need to modify webpack by using ng eject, can I undo this later somehow? One of my scenarios is, and maybe this is a separate issue, is that I am trying to serve a .json file from the root of the application but I am receiving a 404. I thought that maybe if I ran ng eject, I could somehow manually add this file to the build?

[dave11mj]

@PivotalAnimal you could theoretically undo ng eject by setting "ejected" boolean on .angular-cli.json back to false and making your package.json scripts for npm run build and npm run start point back to ng serve and ng build ..

However, if you are trying to load a json you might not need to eject your application. You could place it under assets directory, and try loading it using Angular HTTP ..

Another option to load a JSON is to add a snippet like this one on typings.d.ts

// Allows importing json files in Typescript
declare module "*.json" {
    const value: any;
    export default value;
}

Then you'll be able to use bring the data into your .ts files using imports like import aboutBiographyData from './about-biography.json';.. Note since you'd importing them directly into the file it'll increase your bundle size and not take advantage of ajax requests.

[ribizli]

My problem with the eject feature is that you cannot really continue development with it and build for production in the same time. You need to specify in advance which environment you are targeting, need AOT or JIT, etc.
It would be a nice feature to support multiple (named) ejects for development, production, etc. I mean you could issue the eject command several times, outing into different [name].webpack.config.js files. build and start could be suffixed by the name of the eject.

Update: a workaround I use is that I do eject for dev, rename the webpack.config.js file, revert the package.json, and do eject again for prod with AOT.

[larssn]

I'm pretty confused, I've run ng eject, and gotten the webpack config. Do I need to do another eject to get AoT support?

(Have same requirement as comment below)

[ribizli]

I need some additional webpack config (e.g. loader or plugin) and continue development (watching without AOT) and also make prod (e.g. aot and env stuff) releases.

[compleatguru]

@dave11mj , I refer to your example about using typings.d.ts for json files.
Could you give an example how I can import a jsx or tsx file into angular4 or angular2 without the need to cli eject?

[ohcibi]

First off: I totally see no point for ng eject at all. Simply make ng build/serve parse a webpack configuration in the projects file tree and use that configuration. With ember-cli I can simply put my broccoli/rollup config into .ember-cli-build.js and this should be possible with angular-cli too.

But the eject command has another fundamental problem: It unnecessarily couples 2 abstract features of angular-cli

1. A wrapper for webpack
2. Tools for development (e.g. ng generate)

Beside the fact that I am forced to ultimately opt out from ng build/serve when I just want to configure something for webpack (that ng does not support yet) I am also forced to opt out from ng generate which should have nothing to do at all with webpack. This appears as a design flaw to me. Except for I am missing something here.

[rantiev]

If you write documentation, you have to think whether other people will understand you. So as a noob i try to read about "ng eject" and what I see? Oh, it ejects app. And what does this "eject" mean? Really generates new webpack config based on provided options? I would think it stops application which was started with ng serve or anything like that.

[l770943527]

Hi, i am new to angular-cli and here is my scenario: I need to scan files local then generate some log files in app build stage, so I plan to write a custom webpack plugin to do this, can I use 'ng- eject' to load my custom webpack plugin ? Thanks !