-1

I'm using Angular 4 and I've received project from my friend, and when I run a command:

ng-serve -o some view is opened, that view/template is in project called:

main-screen.component.html

And here is whole component:

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

@Component({
  selector: 'app-main-screen',
  templateUrl: './main-screen.component.html',
  styleUrls: ['./main-screen.component.css']
})
export class MainScreenComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

I saw that conent from main-screen.component.html is loaded when app is runned - because I edited it to make sure that's right template, but I don't know where is set that main-screen.component.html will be shown when app is runned, because I would like to show another template for example main-screen-blue.component.html

Thanks!

Cheers!

billy_56
  • 649
  • 3
  • 11
  • 27

2 Answers2

0

Go to app.module.ts in your src directory and locate:

@ngModule({
  bootstrap: [AppComponent]
})

The find the import statement of your AppComponent (can be named differently), just find the bootstrap property and you will find which component gets initialized on app load.

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

The above tells that the first component to load is app.component in the same directory in which you find app.module. This component will have a templateUrl located in the @Component decorator which will tell you the location of the template.

Mac_W
  • 2,927
  • 6
  • 17
  • 30
0

Routing between components and deciding which component to show on startUp is quite easy.

Create a separate module as app-routing.module.ts and there give the routes for your app like

const routes: Routes = [
{ path: '', component: MainScreenComponent }] //this shows the page on startup

The detailed explanation for routings can be found on Angular Routing

BlizZard
  • 587
  • 5
  • 22