using angular cli to build application

Question

I am building my angular 8 application using angular cli

ng build

I copy over the file from the dist/myapp folder to the directory myapp on my webserver. When I access the application with my browser I get a couple of errors like this

polyfills-es2015.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

and in fact the browser is looking for "myserver.local/polyfills-es2015.js"

when I try to tell angular about base href like this

ng build --base href myapp/

my browser still gets 404-ed but this time because

myserver.local/myapp/myapp/polyfills-es2015.js is not found

What would be the correct way to deploy the app build with angular cli to some custom directory on the webserver?

Answer 1

You also have to change the base href in dist/index.html.

As of what I remember these were the steps I followed while angular dist deploying on server:

• Use ng build --prod to create the dist (distributable) for the Angular project. Copy dist in /var/www/html.
• Inside dist change index.html and change base href from “/” to “./”. This is the main issue, so make sure you do that.
• You also need to allow this folder to be accessible when trying to access through browser. Look for the config changes, I don't have them documented.

Answer 2

if you are making build using webpack, then you have to provide paths to dist folder like:

{
  mode: 'production',
  entry: './index.html',
  output: {
    filename: 'js/bundle.[hash].min.js',
    path: resolve(__dirname, '../../dist'),
    publicPath: '/',
  },
  devtool: 'source-map',
  plugins: [],
}

Answer 3

Looks like i just did not add the slashes correctly:

ng build --base-href /myapp/

and so it worked.