1

I am developing using standard localhost:4200. But I also want to see how a build works. For that I have modified angular.json file. The change looks like this:

"outputPath": "D:/a_root/dist",

Where a_root is the application root folder where all the back end files are and web.config is. So, in order to not to mess backend and frontend files I want to place all frontend files into a subfolder /dist. What I am trying to do is this. There is a file index.html that is in my project. I am changing base tag to this:

<base href="/dist">

Then I build the app:

ng build --watch=true

and get dist folder in the correct location. Then I copy index.file from the dist folder into a_root to run the app.

Index.file looks like this:

<head>
  <base href="/dist/">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="shortcut icon" href="assets/favicon.ico">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" 
   rel="stylesheet"/>
  <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body class="app" style="overflow-y: hidden;">
   <script src="runtime.js"></script><script src="polyfills-es5.js" nomodule></script><script 
   src="polyfills.js"></script><script src="styles.js"></script>
   <script src="scripts.js"></script><script src="vendor.js"></script>
   <script src="main.js"></script>
 </body>
</html>

When running it as localhost/a_root/index.html I am getting script errors right away because they are not referenced properly. But even prefacing them with dist/ helps to load scripts but not helping to run the app. It fails loading first ts component.

What am I doing wrong here?

Thanks

Improve this question
4
  • did you try changing these settings using CLI commands, for example, changing folder, base, etc Commented Nov 16, 2019 at 20:51
  • I am showing all commands I am using. What exactly do you have in mind? Commented Nov 16, 2019 at 21:50
  • Here are errors: GET localhost:8011/polyfills.js net::ERR_ABORTED 404 (Not Found) 16:38:25.620 index.html:37 GET localhost:8011/styles.js net::ERR_ABORTED 404 (Not Found) 16:38:25.621 index.html:37 GET localhost:8011/vendor.js net::ERR_ABORTED 404 (Not Found) 16:38:25.621 index.html:37 GET localhost:8011/scripts.js net::ERR_ABORTED 404 (Not Found) 16:38:25.622 index.html:37 GET localhost:8011/main.js net::ERR_ABORTED 404 (Not Found) 16:38:25.637 index.html:37 GET localhost:8011/vendor.js net::ERR_ABORTED 404 (Not Found) Commented Nov 16, 2019 at 22:39
  • And there was the command: ng build --watch=true --baseHref=dist --outputPath=D:\a_root\dist. After the build was done I copied dist/index.html to a_root and ran it from there. Basically the same as I had before. Commented Nov 16, 2019 at 22:41

1 Answer 1

Reset to default
1

You need to certainly update the paths in index.html, by prefixing all of the referenced .js, .css and any other files with /a_root/dist/, if your dist folder is at /a_root/dist in relation to the domain root, e.g.:

<script src="/a_root/dist/runtime.js"></script>
<script src="/a_root/dist/polyfills-es5.js" nomodule></script>
<script src="/a_root/dist/polyfills.js"></script>
<script src="/a_root/dist/styles.js"></script>
<script src="/a_root/dist/scripts.js"></script>
<script src="/a_root/dist/vendor.js"></script>
<script src="/a_root/dist/main.js"></script>

After that, you should probably update <base href="/dist/"> to be <base href="/a_root/"> in your index.html, since that's where your index.html file is located in relation to the domain root. <base href=""> makes sure relative URLs (route paths) work correctly in a sub-folder.

Ideally thought, e.g. in production, you wouldn't mix back-end and front-end code in the same folder.

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

11 Comments

I like your idea about not mixing two contents. But let me ask you this.Won't two different locations be creating a CORS issue?
Seems like I am getting it working. Now when I navigate to localhost/a_root/index.html I am proprly getting the login page and url shows: localhost/dist/login. So, it will always show dist in the address bar?
@Mark that will indeed cause CORS errors, but that issue is easily solvable by property configuring your web server (depending on which one you are using). That is how majority of architectures with SPAs work.
@Mark did you update <base href>? But yeah, if you are serving your index.html from http://localhost/a_root/index.html, then the '/a_root/' part will always show up once you update <base url>. If you just want a clean http://localhost:8080 (with a different port), then you can just serve the angular site from the dist folder. So your back-end will be at http://localhost:80, and angular http://localhost:8080. In production, they would run each at their domain. If you only have one domain, and don't want ports to show up, then you either do sub-folder, or mix files/folders.
Ok, all I did was I ran this command: ng build --watch=true --baseHref=/dist/ --outputPath=D:\a_root\dist. Then I copied dist/index.html into a_root. Ran it and started loading the app for the first time. So, what else do you think do I need to do?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.