CODEWITHSUNDEEP
angulartypescriptroutes
Renê Silva Lima
Renê Silva Lima

Reputation: 2815

Route content is not being displayed

I have a route on my application called home and there's some content on it. The problem is this content is not being showed, it just shows the menu that is in app.component. I feel like I'm missing something silly, can someone help me? This is the code:

THis is Home.component:

import {Component} from '@angular/core';

    @Component({
      moduleId: module.id,
      selector: 'home',
      templateUrl: `home.component.html`
    })

    export class HomeComponent{}

App.routing.ts:

import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {HomeComponent} from './home.component'


const appRoutes: Routes = [
    {
        path:'',
        redirectTo: '/',
        pathMatch: 'full'
    },
    {
        path: 'home',
        component: HomeComponent
    },
]

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app.module.ts:

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

import { AppComponent }  from './app.component';
import {HomeComponent} from './home.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, HomeComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

and theres index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="css/meu-css.css">
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <base href="/">
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>

Upvotes: 0

Views: 35

Answers (1)

Joo Beck
Joo Beck

Reputation: 1913

I'd need to see your app.component to be certain, but if I had to make a guess I would say you probably don't have

<router-outlet></router-outlet>

in the template for your app.component. router-outlet tells the router where to draw the component determined by your path.

Upvotes: 1

Related Questions