Angular-cli: How to get `dist` directory with `ng serve`

[MurhafSousli]

Hello guys,

I'm trying to integrate angular-cli in a wordpress theme for development.

I got apachi server working locally and I was thinking about using ng serve --proxy-config proxy.conf.json to enable live reload on localhost/wordpress instead of localhost:4200 with this proxy.conf.json:

{
  "/api": {
    "target": "http://localhost/wordpress",
    "secure": false
  }
}

The problem here is that ng serve doesn't produce dist directory that wordpress requires.
To sum up, the theme environment requires two things:

• live reload
• dist folder

and the cli's commands offer:

| | Live Reload | Dist directory |
| ------------- |:-------------:|:-----:|
| ng serve | :heavy_check_mark: | :x: |
| ng build | :x: | :heavy_check_mark: |

Is there a flag I add to a command to get both features at once, or if not what can be a possible solution?

Thanks in advance.

[Meligy]

No.

ng serve does not write to dist by design. Under the hood it uses Webpack Dev Server, which does not write to disk.

ng build does not do any server serving.

In my slightly similar situation (hosting under my own server, IIS), I use ng build --watch.

No live reload, you have to refresh the page yourself, but at least you get automatic changes compilation. But no proxy also. You'd be using your Apache and maybe creating a filesystem link from theme dir to dist or so.

[MurhafSousli]

@Meligy If you do ng serve --aot you will get the dist, but still not the ideal solution for me

[therealkevinard]

Maybe the same effect could be reached by running two terminal threads with ng build --prod --watch and ng serve? Live reload on localhost:4200, with trust that the same is pushed to dist by watch?

I'm spitballing. Haven't done this myself, but it makes sense.

[filipesilva]

Closing as answered by @Meligy.

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