Angular2 application build, but file not found while loading the css, js folders

Question

I have an angular2 application which uses nodejs server api's. I build the app using nd b, which created the files in dist folder. Where can I specify the production url for the production build, so that all the css, js files loads properly.

And also, whether I need apache server to host these build. Or Can I use node server itself to host it?

Index.html:

<!doctype html>
<html>
<head>
  <base href="/">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="assets/styles/css/custom.css"/>
  <script src="assets/vendor/pace/pace.js"></script>
</head>
<body>
  <app-root>
    <div class="loading"></div>
  </app-root>
</body>
</html>

Thanks

Jijo Cleetus · Accepted Answer · 2017-02-15 16:57:41Z

8

By analyzing your html file i am seeing an issue with the <base>tag.

You need to provide ./ instead of /which is wrong. Corrected html document is given below.

<!doctype html>
<html>
<head>
  <base href="./"> <!-- use ./ instead of / -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SHEPHERD SHIELD</title>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="assets/styles/css/custom.css"/>
  <script src="assets/vendor/pace/pace.js"></script>
</head>
<body>
  <app-root>
    <div class="loading"></div>
  </app-root>
</body>
</html>

answered Feb 15, 2017 at 16:57

Jijo Cleetus

2,8671 gold badge13 silver badges19 bronze badges

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

1 Comment

Jijo Cleetus Over a year ago

Yes, @KrutikJayswal. i was answering the question and didn't noticed the onscreen execution pane

Jijo Cleetus · Accepted Answer · 2017-02-15 08:28:57Z

2

For development and testing purpose you can specify the urls for the css from the dist folder. If you are going for production, then you can copy the minified version of css and js files and put them in style and js folders for example, also set the urls in the html file from these folders.

answered Feb 15, 2017 at 8:28

Jijo Cleetus

2,8671 gold badge13 silver badges19 bronze badges

7 Comments

Sanjay Kumar N S Over a year ago

I have successfully build the angular2 app, but I want to host it in a /var/www/v1 ie, ip/v1 (ip: 00.00.0.0), Where can I specify the host url : localhost/testproject in the environment file? ng g command build the files in dist folder, but when I am copying those files into /var/www/v1, it is showing, unable to load js, css files ie trying to load from localhost/styles/custom.css, actually it is existing in localhost/v1/styles/custom.css. I hope this is due the lag of url specification somewhere.

Jijo Cleetus Over a year ago

Are you able to check the Network tab in the developer tab of your browser.

Sanjay Kumar N S Over a year ago

Yes. What I have to check

Sanjay Kumar N S Over a year ago

The js, css files are trying to load from localhost, not from localhost/v1.

Jijo Cleetus Over a year ago

Please share your html file details

|

Collectives™ on Stack Overflow

Angular2 application build, but file not found while loading the css, js folders

2 Answers 2

1 Comment

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related