How to route a component to another without displaying the first? - Angular

Question

I have a problem when I load the first component and try to link it to other components, the first, initial component tends to stay along with the others. Basically, merged components.

I am now trying to code the first one, so it right away when it loads up, it will route to the main page.

If I were to load the main page first, then whenever I would go to another page from the main page, the main page would stay. Merging the main and the page I went to.

I feel as if Angular should do this automatically to stop this from happening.

Code

First component.

    <!-- Pesdo Example -->
    <a onload="anotherComponent">

Or if I could make routerLink somehow link to the other right away without clicking. I know onLoad is used for script.

Second

    <div class="background">

      <div class="logo">
        <img src="/images/logo.png" alt="Foo Logo">

        <br><br>
        <h1 class="title">Foo App</h1>
      </div>

      <div class="options">
        <h2>Foo</h2>
        <a><button class="button">Foo 1</button></a>
        <a><button class="button">Foo 2</button></a>
      </div>
    </div>



app.module.ts file

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';

    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { MainMenuComponent } from './main-menu/main-menu.component';
    import { NavComponent } from './nav/nav.component';

    @NgModule({
      declarations: [
        AppComponent,
        MainMenuComponent,
        NavComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }


Routes

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { MainMenuComponent } from './main-menu/main-menu.component';

    const routes: Routes = [
      { path: "main", component: MainMenuComponent },
    ];

app.component.html

    <app-nav></app-nav>

    <section>
      <router-outlet></router-outlet>
    </section>

Thanks!


EDIT: 

I can now load up the first component but now routerLink does not work to route to other components.

    <section>
      <router-outlet></router-outlet>
    </section>


const routes: Routes = [
  { path: "", pathMatch: "full",  redirectTo: "home"},
  { path: "Contact", pathMatch: "full", redirectTo: "contact" },
  { path: "Settings", pathMatch: "full", redirectTo: "settings" },

  { path: 'contact', component: MainFormComponent },
  { path: 'home', component: ListOfPeopleComponent },
  { path: 'settings', component: EditAPersonComponent },
];

Neither the names from BOTH PATHS work for router link.

<a routerLink="Settings"></a> <a routerLink="settings"></a> both do not work.



EDIT: My console outputs this.

[![enter image description here][1]][1]

Please copy and paste the link, I do now know why SO is displaying all this text as code. Thanks.

  [1]: https://i.stack.imgur.com/TNOT5.png

Can we see your app.module.ts + where your routes are defined? — favdev, May 14 '19 at 00:49
I've rolled back your edit. It is not appropriate to add (SOLVED) to the title or edit a solution into your question. If you've found that an answer below gave you the answer, then the proper way to indicate your problem has been solved is to accept the answer by checking the mark below that answer's score. If you've found another solution and want to share, write an answer and do so below in the space provided for that purpose - see [Can I answer my own question?](http://stackoverflow.com/help/self-answer). — Ken White, May 23 '19 at 00:36

score 1 · Answer 1 · answered May 14 '19 at 00:55

1

There should be a container component that has other components nested within it

app.component.ts

<div class="app-container">
  <router-outlet></router-outlet>
</div>

then based on the current route, <router-outlet> should show the component you want to show. You can redirect using the routes defined in your RouterModule

  { path: "", pathMatch: "full", redirectTo: "home" },
  { path: "home", component: HomeComponent },
  { path: "settings", component: SettingsComponent}

answered May 14 '19 at 00:55

favdev

99
5

This I already know. This answer doesn't help me. I added the code for you to see. – Compiler v2 May 14 '19 at 17:20
What do you mean by merging components? If you are looking for an automatic redirect to a specific component remove the `onload` code and add this line to your routes `{ path: "", pathMatch: "full", redirectTo: "main" }` – favdev May 15 '19 at 00:32
By merged components, I mean more than one component displays on the screen when only one should pop up. – Compiler v2 May 15 '19 at 00:38
Did you try my suggestion? – favdev May 15 '19 at 00:55
Yes, it works to load up the first component, but now routerLink does not work. It cannot route to other components. I will post my routes in my question. – Compiler v2 May 16 '19 at 22:40
I will put the console output in my answer. – Compiler v2 May 22 '19 at 15:58

score 0 · Accepted Answer · answered May 22 '19 at 23:10

0

I found the solution: ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

It seems that I just needed to put a / in my routerLink in front of the path reference.

The programmer's saying, "The more time you spend on a bug, the smaller it is." is true.

Thank you for trying everyone!

answered May 22 '19 at 23:10

Compiler v2

3,509
10
31
55

Glad you found a solution. If I can elaborate: according to the error you've posted, the route is checking 'mainMenu/settings' because it is nested within the parent route configuration of `app.module.ts` so the routerLink was relative and adding the `/` made it absolute. – favdev May 23 '19 at 04:47
Yes, indeed. That was the error. It was relative and the program could not find it because it was nested. Making it absolute was the solution to this as the browser could not find the relative path because it did not exist. – Compiler v2 May 23 '19 at 15:17

How to route a component to another without displaying the first? - Angular

2 Answers2