How to serve static directory from "ng serve"

Question

Can I ask if there are any similar config for webpack dev server config like this:

devServer : {     historyApiFallback : true,     stats : 'minimal',     contentBase: helpers.root('../src/static'),   } 

I want to serve static files from static directory like how the webpack dev server is serving files. Thanks

Answer 1

Yes there sure is.

Look in the root of your Angular app for a file called angular.json. There's an entry called "assets". Add your static directories here. Anything under them will be served directly via ng serve. And when you go live, all of these files will be copied to the /dist directory so they'll be served in a production environment also.

"projects": {   "YourCoolProject": {       "root": "",       ...       "architect": {         "build": {           "builder": "@angular-devkit/build-angular:browser",           "options": {             "outputPath": "dist",             ...             "assets": [               "src/assets",                "myOtherStaticFiles"   /* <-- Add *your* directory(s) here */             ],             "styles": [             ... 

p.s. Yes, I know you can't really comment JSON. Give me a break.

Answer 2

Yes you can. In angular.json, you can use entries named assets. Whatever file or directory you include in assets value array, will be served via ng serve. Whatever you add in projects/<your-project>/architect/build/options/assets, will be served in all build configurations and included in dist directory of production build.

If you want something to be available only during development or testing, you can use Build Configurations. By default, you have a section projects/<your-project>/architect/build/configurations/production. So, you could add your own section, such as ../build/configurations/dev (perhaps initially copying whatever is in production section). Then, you can add assets entry there. These assets won't be available in production configuration.

To launch ng serve to specific configuration, you use --configuration argument. For example, to match dev configuration:

ng serve --configuration=dev 

---

Disclaimer: Didn't test above - just reading the manual :-)