Dynamic Angular Routes and External Content Sources

Question

I have a pattern or design question regarding how best to approach a problem; Ill simplify my thoughts so I dont cloud the question:

I have a simple two component, two vertical column Angular app as follows:

<div class="container-fluid">
  <div class="row">
      <div class="col-3">
            <app-sidemenu></app-sidemenu>
      </div>
      <div class="col-9">
            <app-content></app-content>
            <router-outlet></router-outlet>
      </div>
    <div class="col"></div>
  </div>
</div>

This whole system needs to be dynamic for scaling purposes so nothing can be static as far as content goes.

For example: The links in the side menu are being dynamically generated from a list of externally hosted .html files stored on GitHub for versioning purposes.

As you can see below, I only have a single route from the side menu elements to the content component:

const routes: Routes = [
  {path: 'page:/id', component: ContentComponent}
];

Here is what I need help with:

Scenario:

I have 10 .html files externally hosted on GitHub. I need to route each menu link to each .html file and have the content of each file display in the Content Component when each menu item is clicked.

More simply described: each menu item loads the content from an externally hosted .html file into the content component.

Ive read many different options that only partially describe what Im trying to do so I really want to know if this is possible (it seems easy when I describe it) and, if so, where would I begin.

Im not looking for a quick code solution, but really a point in the right direction so I can solve this on my own and validation that Im not wasting time if there is a better way.

Could you give an example of what the route would look like ? — Nicolas, Jan 28 '20 at 15:46
Thats the part Im having trouble with. Ideally, each path would link to an external file like: path: github.com/username/file.html and load it to: component: ContentComponent — DataGuy, Jan 28 '20 at 16:57
I'm not sure about using path for that, since it can be easily confused. You'd be better off using GET parameters and urlencode your urls. You could then retrieve this url and fetch the appropriate template. Your url would look something like this: `youapp.com/pages?url=https%3A%2F%2Fexample.com%2Fsome%2Ffile.html` — Nicolas, Jan 28 '20 at 17:01

score 0 · Answer 1 · answered Jan 28 '20 at 16:06

0

If i understood correctly, you need a redirect for your external web page/application through angular routes. If is this your problem, there are no "correctly" solution. This because the routes in angular can't replaced with an external link. You can create a method who calls external Url like this.

<a href="https://angular.io">Go to Angular website</a>

But this is not a solution for you.

What you can do is a weird solution that works, you need to route N component for N external link. Then in every OnInit() method use this:

window.location.replace("WebPage_Url")

Don't use HREF cause didnt work in chrome.

Every route should be like this:

    const appRoutes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'Link1',
    component: Link1Component
  },
  {
    path: 'Link2',
    component: Link2Component
  }

Now if you go to localhost://xxxx/link1 this will be redirect to your web page.

Hope this will be usefull.

answered Jan 28 '20 at 16:06

Oznerol

1
1

If Im understanding you correctly, routes cannot link to URLs. Does that include internal or local files as well? Just curious if the GitHub external storage requirement was causing the limitation or if Angular might not be the right choice (ie. paths are just names that link to components). If the latter is correct, any suggestions on other frameworks is appreciated. Im trying to stay serverless, if possible. – DataGuy Jan 28 '20 at 16:36
Yes you cant route URLs. About local file, it depedens, for example if you want to use a static Json (or video,music Js file), you can create and put inside Assets folder, then you can use whenever you want with correct path, i don't understand whitch file do you mean. I think this is a restrict of Angular, cause this route are "an optional service that presents a particular component view for a given URL". Check this for more info > https://v7.angular.io/guide/router Check this for more info: https://stackoverflow.com/questions/34338440/how-to-redirect-to-an-external-url-in-angular2 – Oznerol Jan 29 '20 at 09:07

Dynamic Angular Routes and External Content Sources

1 Answers1