Split login.component and app.component

Question

I am trying to create a login page that quite diffirent from main application layout so I try to seperate login.component from app.component I also use bodyclass property to set class attribute of body element I also want to hear any experience that handle this and say my way is wrong or fine.

Here how my index.html, login.component.ts and app.component.ts files looks;

login.component.ts

import { Component } from '@angular/core';
import {Auth} from '../auth/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: [
  '../../assets/css/colors/cyan.css'
  ]
})
export class LoginComponent {
  bodyclass = 'body-login-class';   
  constructor(private auth:Auth){}
}

app.component.ts

import { Component } from '@angular/core';
import {Auth} from './auth/auth.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css',
  'assets/css/colors/default.css',
...
      ]
    })
    export class AppComponent {
      bodyclass = 'body-general-class';
      constructor(private auth:Auth){}
    }

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>AngTs19December</title>
  <base href="/">
    <script src="http://cdn.auth0.com/js/lock/10.2/lock.min.js"></script>
</head>
<body [class]="bodyclass">
  <app-root>Loading...</app-root>
<app-login></app-login>
        <!-- Global Plugin JavaScript -->
...
</body>
</html>

I never come across any example like useage

app-root and app-login

in same file, so it bothers me.. anyway here is the error I face when I run this.

and last; routes.ts Login page must be the page welcomes user always it they are signed in

import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {AuthGuard} from './auth/auth.guard';
import {HomeComponent} from './home/home.component';
import {LoginComponent} from './login/login.component';
const appRoutes: Routes=[
    {
        path:'home',
        component:HomeComponent,
        canActivate:[AuthGuard]
    },
    {
        path:'',
        component:LoginComponent
    }
];

export const appRoutingProviders: any[] = [];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

AVJT82 · Accepted Answer · 2016-12-19 23:18:11Z

2

You can't have <app-root></app-root> and <app-login></app-login> both on index page.

Change app.component.ts file:

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

@Component({
    selector: 'app-root',
    template: `
        <router-outlet></router-outlet>
    `
})

export class AppComponent { }

The important part there is there is <router-outlet></router-outlet.

In the index file, remove <app-login></app-login>

According to your routes, let's say if you use localhost:3000, is when user navigates to localhost:3000 the login page (LoginComponent) is shown. From there you can route user to HomeComponent if credentials are correct.

edited Dec 19, 2016 at 23:18

answered Dec 19, 2016 at 22:31

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AVJT82 Over a year ago

Have you checked the routing documentation on Angular site? angular.io/docs/ts/latest/tutorial/toh-pt5.html

TyForHelpDude Over a year ago

actually yes, and I have changed my app, I think I solved this issue so I accpt(can you also up the post :) ty) your answer also you can check this post : stackoverflow.com/questions/41231728/…

Collectives™ on Stack Overflow

Split login.component and app.component

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related