CODEWITHSUNDEEP
angularroutescomponents
Compiler v2
Compiler v2

Reputation: 3605

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

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.sstatic.net/TNOT5.png

Upvotes: 1

Views: 5097

Answers (2)

Compiler v2
Compiler v2

Reputation: 3605

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!

Upvotes: 0

favdev
favdev

Reputation: 99

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}

Upvotes: 1

Related Questions