CODEWITHSUNDEEP
node.jsangulartypescript
Jordi 45454
Jordi 45454

Reputation: 295

Angular2 - load AppComponent in the "/" without any other component (Heroes Tutorial)

To ask my question I'll use as example the official angular.io Heroes tutorial.

(It is the result of the point 6.Routing - Tutorial).

When you do the npm start on the console, the HTML of AppComponent is loaded, but /dashboard is also loaded by default (When the URL is http://localhost:3000 it is automatically redirected to http://localhost:3000/dashboard).

My question is: When you introduce http://localhost:3000, Is possible to only load HTML AppComponent and don't redirect automatically to dashboard?

I have tried to remove from app.routing.ts

{
  path: '',
  redirectTo: '/dashboard',
  pathMatch: 'full'
},

but then I get may errors like EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: ''.

The official plunker is: https://angular.io/resources/live-examples/toh-5/ts/plnkr.html.

Thanks!.

Upvotes: 0

Views: 159

Answers (2)

Alex Beugnet
Alex Beugnet

Reputation: 4071

This is only because of your router. If you manage correctly your application, you can make it load a component first, and then choose what you load in your router-outlet. Here you only need to create a route with a component to load, instead of a redirecting to another URL route.

Basically, for angular, the URL start after http://localhost:3000/ and then by default the route path is '' unless you tell the router to navigate to a specific url.

You need to do something like that : 

{ path: '', component: DashboardComponent },

EDIT after plunkr :

Change these code parts in the plunkr to see what you expect I believe.

in app.component.ts

<nav>
  <a routerLink="/" routerLinkActive="active">Dashboard</a>
  <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
</nav>

in app.routing.ts

const appRoutes: Routes = [
  {
    path: '',
    component: DashboardComponent
  },
  {
    path: 'detail/:id',
    component: HeroDetailComponent
  },
  {
    path: 'heroes',
    component: HeroesComponent
  }
];

As I said in my first answer, when you start your app you will get to this url : "http://localhost:3000/". Your first component will be loaded with no url attached to it, that's why the path is empty. 

{
  path: '',
  redirectTo: '/dashboard',
  pathMatch: 'full'
},

Your first piece of code tells the router to redirect on the url "/dashboard" when you are on the "/" url. I only changed it to directly load the component Dashboard with no url.

{
  path: '',
  component: DashboardComponent
},

Upvotes: 0

micronyks
micronyks

Reputation: 55443

Thats because router-outlet is used in AppComponent. When you run your app, AppComponent comes into picture and because it has router-outlet, it requires at least one default view. In your case it is dashboard.

You tried to remove it and so you removed default set route. Default route needs to be present. If you remove it, angular router will throw an error.

router-outlet cannot be empty. You have to provide one view anyhow.

So with AppComponent html view, you will also have some other view in router-outlet.

So what you can do is

1) remove roter-outlet from AppComponent.

2) from AppComponent Code try to navigate to dashboard route. Somewhere in code, lets say in any buttons click event eg. this.router.navigate['/dashboard']

Upvotes: 0

Related Questions