how to deploy angular5 application to sub directory

Question

My angular application is hosted in server in which the application url is http://xyz.domain.in (Example Url). Now I created sub directory inside it to host another application. But when i try to access the path like http://xyz.domain.in/subfolder , getting this in console.

Error: Cannot match any routes. URL Segment: 'subfolder'

Base href of the application in subfolder is

<base href="./subfolder">

How to accomplish this?

Possible duplicate of [Develop Angular App in Sub-Directory](https://stackoverflow.com/questions/42742152/develop-angular-app-in-sub-directory) — Eliya Cohen, Jun 22 '18 at 12:55

score 41 · Answer 1 · answered Jun 22 '18 at 13:01

41

You have to specify the path of your subfolder when launching a build :

ng build --base-href=/subfolder/

answered Jun 22 '18 at 13:01

Artory

845
7
13

score 10 · Answer 2 · answered Aug 06 '20 at 21:57

10

do not need to mention the subfolder name, if you are depolying at subfoler you need to mention only href="./"

answered Aug 06 '20 at 21:57

harish kushwaha

111
1
3

This seems to work, so to me this looks like a useful answer. **To the person who downvoted this:** please explain why an answer might not be a viable option in your opinion or tell the person who posted it what you think is missing in the comment section below the post.. do not just give it a random downvote. – Johannes Aug 28 '20 at 12:10
This works for me too. Probably the best answer here. Thanks! – Tom - Lunabee.com Oct 01 '20 at 13:23
maybe the user could write a more complete answer, explaing that you have to change the tag to in index.html file, but yes, it works very well. – Murilo Góes de Almeida Oct 09 '20 at 15:50

score 1 · Answer 3 · answered Sep 01 '20 at 05:40

1

build into subfolder:

ng build --prod --output-path="dist/subfolder" --deployUrl="subfolder/"

https://floyk.com/en/wall/status/BX

answered Sep 01 '20 at 05:40

Igor Simic

510
4
4

score 0 · Answer 4 · answered Jun 22 '18 at 12:34

0

You need to add pathMatch to your routes like so:

{path: 'url', component: YourComponent, pathMatch: 'subfolder'},

answered Jun 22 '18 at 12:34

Eliya Cohen

10,716
13
59
116

This would not solve the issue. The issue experienced is from serving multiple apps over a single domain and the angular app living in a subdirectory on the server. See answer below – mr.pribesh Nov 18 '21 at 01:52

score -1 · Answer 5 · answered Nov 18 '21 at 02:04

To properly setup an Angular app on a subdirectory:

Update the angular.json to include the baseHref property under the build options. ie:

...
build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "baseHref": "/subdirectory1/subdirectory2",

Update the index.html base href:

<base href="/subdirectory1/subdirectory2">

Ensure useHash is NOT set in your app routing module's ExtraOption (since the default is false)
Update image and style links. any absolute image links should be made relative

ex. FROM: src="/assets/img/pic.jpg" TO: src="assets/img/pic.jpg"

scss ex.

FROM: background-image: url('/assets/img/pic.jpg TO: background-image: url('../../../assets/img/pic.jpg

how to deploy angular5 application to sub directory

5 Answers5