CODEWITHSUNDEEP
angularangular-cli
mrshickadance
mrshickadance

Reputation: 1251

angular-cli run command after ng build

I am wondering how to extend ng build to run tasks after it has finished.

At the moment, my end goal is to copy my 'package.json' to the dist folder.

Something like this if I was using plain npm:

"postbuild": "cpx ./package.json ./dist/",

I know in the angular-cli.json I can use "assets" to copy static files, but it does not work for files outside of src. So, I'm wondering if I can do the copy task after ng build completes.

Upvotes: 34

Views: 37972

Answers (3)

Jurugi
Jurugi

Reputation: 11

I found it useful to have a 'traditional' setup. I kept my PHP files, and an .htaccess file in src/includes folder. Then after 2), it will copy those files into your dist/appname/* directory. That way you can keep everything maintained in one area.

  1. Then in angular.json under assets add: "src/includes" (this deploys the folder alongside your files). You can deploy this way, but I removed it.

  2. I changed these lines under package.json->scripts: "build": "ng build --configuration production --aot" and "postbuild": "robocopy .\src\includes .\dist\calendarapp". <-- and be sure to put the name of the app, which is defined on top of the same file as $name; funny that it is so shit you can't place name or $variables without installing another tool, so I decided not to do that.

Using 2), you can run 'npm run build', then it will run 'postbuild' automatically afterward.

result:

                           5    C:\Repos\x\calendarapp\src\includes\
        *EXTRA Dir        -1    C:\Repos\x\calendarapp\dist\calendarapp\
100%        New File                 273        .htaccess
100%        New File                 883        addEvent.php
100%        New File                 670        deleteEvent.php
100%        New File                 547        getEvents.php
100%        New File                3643        MySQL.php

Then I realized, I don't need the files deployed in dist/appname/includes/, So in this case I removed 1).

But it is useful to know when other people make bad tools or redo things what it is actually doing. For some it can take hours, for me it is annoying but took few minutes. So if you have to deploy a folder, or place files alongside, you can do that. It is an example, an expert spend a few minutes of time doing 'this shit', learning why other peopels' broken shit did not work, when otherwise, if you don't use these hyped toolsets and use raw javascript, it would just work rather confidently. Basically most other 'newer' languages and tools suffer from this problem and also lack support.

I also found almost every angular 'build' suffers this shit problem, you usually have to copy or modify 'something' after doing it anyway.

--

Angular is 'fairly complete', much better than incomplete junk like vue, or react, but I still find it suffers that problem where novices think it has too much usefulness.

The only 'perk' I see in the whole thing is if you know it that 'reuses' a lot of code, then ability to place/reuse components may actually be useful.

Upvotes: 1

pegaltier
pegaltier

Reputation: 559

You can execute any custom script before or after any npm script. This is called 'hooks' and it is included in npm. In your case you can execute a 'post' hook but keep in mind that it is also possible to execute 'pre' hook.

define these 3 scripts in your package.json: 

"hello": "echo execute hello",
"prehello": "echo execute prehello",
"posthello": "echo execute posthello"

You can find many more useful information about that here: https://www.marcusoft.net/2015/08/pre-and-post-hooks-for-npm-scripting.html

Upvotes: 12

Alexander Ciesielski
Alexander Ciesielski

Reputation: 10834

Define an npm script 

"build":" "ng build"

and add the postbuild script, too. 

"postbuild": "cpx ./package.json ./dist/",

This way the copy script gets called after you run npm run build.

Upvotes: 49

Related Questions