Hosting Angular app in subdirectory

Support
,
1

Right now I am hosting an angular app which is B2C website using netlify and it’s working fine. Now I have new requirements where I have to host static pages that covers B2B details. Now I have a common landing page for B2B and B2C site from where I will redirect B2C angular app or B2B static pages.

Now my folder structure looks like

./public
  -index.html
  -about.html
  ....
  /angular-app
   -index.html
   ......

I can build the app using netlify.toml configurations also I can see static landing page but not able to redirect to angular app’s index.html which is the entry point of my angular app.

In summary, using netlify I want to load static landing page on example.com and I want to see angular app on example.cpm/app.

Any help appreciated!

2

hi @raut.rahul109 - what do your build settings look like in the netlify dashboard?

You should be able to point netlify to the right place irregardless of which framework/ssg you use.

Let us know if this does/doesn’t help.

3

I do forgot to mention in the question, my static pages and angular app are two different repositories. I want to clone angular directory as submodules. Sorry that was the biggest issue I am facing right now and I didn’t mention it in the question. First I have to solve that, then I think above link will solve my other issues.

4

hmm, you might be able to accomplish this with a monorepo:

Which basically means that you have one large repo with several different parts of a project.

There may be an angular specific way to achieve this - I will pass this along to our angular expert as well.

5

Hey @raut.rahul109! Just wanted to chime in and say that there is also the option to pre-render your Angular application with Scully (GitHub - scullyio/scully: The Static Site Generator for Angular apps) or Angular Universal, so that your whole site is just static content. Otherwise, @perry’s suggestion for monorepo or your idea of a submodule would be good (here’s a great article on submodules from my friend Christophe too: Mastering Git submodules. Hair-pulling. Helpless rage… | by Christophe Porteneuve | Medium)

1 Like
6

Yes monorepo is one solution, but I don’t want to be falling into that rabbit hole. I want those repositories different for maintenance purpose. Submodule is very easy way to solve it without any cost.

Hosting static pages in angular is easy, just add it as assets. But landing page can not be served from assets as it will look like example.com/home and not example.com.

The only option remaining is incorporate that landing page into angular app as component/s. In my case it will need more efforts/cost that I can not bare now.

Thanks for the help till now. :slight_smile:

7

Thanks @tzmanics for replying! You introduced two new tools to me.

My head is just trying to getting over the ML algorithm to figure out User’s behaviour without feeding the data.

E.g. I am on a travel site for flight search and there are millions of possibilities that user can search for destinations and that data is changed in milliseconds. How can I fetch all those results at the build time?
I am curious :face_with_monocle:

8

You’ll probably not be able to render your whole app. Maybe do something more hybrid, where most of your app is pre-rendered but still have javascript to load any dynamic content.

9

@perry Do you have anything on submodules and netlify?

10

hi there, we have plenty of forum posts on submodules:

https://answers.netlify.com/search?q=submodule

Here is our docs page on submodules: Repository permissions and linking | Netlify Docs