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?

just try to build your production build using this command. ng build --base-href /myapp/ — Farhat Zaman
– Farhat Zaman, Commented Oct 8, 2019 at 5:26

Abhishek Rathore · Accepted Answer · 2019-10-08 05:04:34Z

3

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.

answered Oct 8, 2019 at 5:04

Abhishek Rathore

1,2061 gold badge13 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Taimoor Tahir · Accepted Answer · 2019-10-08 05:13:31Z

1

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: [],
}

answered Oct 8, 2019 at 5:13

Taimoor Tahir

4404 silver badges6 bronze badges

Comments

Matthias · Accepted Answer · 2019-10-08 08:52:00Z

0

Looks like i just did not add the slashes correctly:

ng build --base-href /myapp/

and so it worked.

answered Oct 8, 2019 at 8:52

Matthias

3,5764 gold badges30 silver badges47 bronze badges

Collectives™ on Stack Overflow

using angular cli to build application

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related