Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Proposal: pre/post-commands for Angular CLI #16308

Closed
lacolaco opened this issue Nov 28, 2019 · 2 comments

Comments

@lacolaco
Copy link
Contributor

@lacolaco lacolaco commented Nov 28, 2019

馃殌 Feature request

Command (mark with an x)

  • All commands

Description

This idea is inspired by npm-scripts. I'd like to introduce a feature that allows us to define a prebuild script in angular.json.
That is useful and powerful for solving build process issues like this:

#4318

Currently, Angular CLI doesn't have hooks on its commands. To execute preprocessing scripts like code-generation before ng build, developers have to do it manually.

In general, ng build is often aliased as npm run build. And for production build, often ng build --prod is aliased as a different command like npm run build:prod. Then my package.json becomes like below;

{
  "scripts": {
    "build": "ng build",
    "build:prod": "ng build --prod"
  }
}

In that case, for adding preprocess script, I have to add it into each scripts like this;

{
  "scripts": {
    "build": "npm run codegen && ng build",
    "build:prod": "npm run codegen && ng build --prod",
    "codegen": "..."
  }
}

I can use pre- hook of npm-scripts, however, a problem is there are two build scripts. It brings a lot of scripts in package.json.

{
  "scripts": {
    "prebuild": "npm run codegen",
    "build": "ng build",
    "prebuild:prod": "npm run prebuild",
    "build:prod": "ng build --prod",
    "codegen": "..."
  }
}

This problem can be more serious in a workspace having multiple projects. Each build commands have to take project identifier and often these are separated as different npm-scripts.

{
  "scripts": {
    "build:appA": "ng build appA",
    "build:appA:prod": "ng build appA --prod",
    "build:appB": "ng build appB",
    "build:appB:prod": "ng build appB --prod",
  }
}

Too many npm-scripts are hard to maintain. So I'd like to propose Angular CLI's command hook feature.

Describe the solution you'd like

CLI command hook is a mechanism to execute a script before/after running CLI's command. It is not only for ng build but all command.

With the hook, pre-build code-generation is able to be configured in angular.json like below;

{
  "projects": {
    "appA": {
      "architect": {
        "build": {
          "hooks": {
            "pre": "npm run codegen"
          },
          "configurations": {
             "production": {
                "hooks": {
                   "pre": "npm run codegen:prod",
                 }
              }
           }
        }
      }
    }
  }
}

Once configuring this, it can work with --prod or any --configurations because each configuration can have its own hooks option to override.
And any architect commands can be configured as well as build. Each architect author doesn't have to know about that.

Each hook script will be executed at the location of angular.json. The initial CWD is the workspace root.

@alan-agius4

This comment has been minimized.

Copy link
Collaborator

@alan-agius4 alan-agius4 commented Nov 28, 2019

This overlaps with this feature request #11787

Maybe you can add the details there?

@alan-agius4

This comment has been minimized.

Copy link
Collaborator

@alan-agius4 alan-agius4 commented Nov 28, 2019

Thanks @lacolaco

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can鈥檛 perform that action at this time.