2

I'm working for the first time with Angular4. I noticed that I have 2 ways to get bundle files:

  1. ng save --open
  2. ng build

With the 2' option I'm able to take the bundle files and move it in my PHP project hosted with my Apache server etc... There are no problems with this procedure but is very very boring when you have to develop something.

Speaking instead about ng serve I noticed that Angular CLI create a NodeJS server listening on port 4200. And this mode is perfect to develop because Angular reloads the bundle files after every changes plus a lot of other useful things.

But there is a big problem: using NodeJS server I'm not able to integrate the PHP business logic at the boot of the site.

I'll explain: if I use the ng bundle I can copy-paste these files in my localhost/MyPhpProject/public/js for example. Then these files are imported with my index.php and everything works.

Instead with ng serve, Angular will use the file /MyAngularProject/src/index.html that is (in my case) totally useless and contains only a Hello World div.

So my question is: there is a way I can "configure ng serve" in order to use localhost/MyPhpProject/index.php inside my Apache server?

Many thanks!!

suikoy
  • 2,229
  • 3
  • 19
  • 23
  • `ng serve` should only be used for development. `ng build` is used when deploying your app to your server. You are saying the ng build process is "very boring", do you mean the process is tedious to deploy your build to your server? – LLai Oct 23 '17 at 15:50
  • No I mean that is not really nice that every time I do a change on a .ts file I have to execute ng build. In addition without ng serve in chrome I have no webpack mapping and debugging becomes really complex. In short use ng build while you're developing a project in localhost, is not an acceptable solution.. – suikoy Oct 23 '17 at 20:55
  • Why not use `ng serve` for development. What problems are you running into? – LLai Oct 23 '17 at 20:56
  • because the produced html code is generated by php so it's not present in the index.html under Angular project. – suikoy Oct 24 '17 at 07:18

2 Answers2

3

The situation at issue is due the requirement to integrate Angular4 in an exiting php project where the html code of the page is produced by php and it's not possible to integrate it in the file index.html under Angular folder.

So in this context to develop I need a watch to recreate the bundle files at every change I make and these files must be written to the hard disk (and not in memory as in the case of ng serve).

The solution could be this: https://stackoverflow.com/a/40128281/1883129 using the command ng build --watch

suikoy
  • 2,229
  • 3
  • 19
  • 23
0

You should do it the other way round: Run the the webpack development server in your browser and proxy through the API calls to your PHP application.

See How run Angular2 (front-end) and Symfony3 (back-end API) together in development zone?

To "copy" the angular build to your target directory, use the --output-path option of ng build.

masterfloda
  • 2,908
  • 1
  • 16
  • 27