Как правильно прописать пути в angular routing к angular версии 8.2.14?

Question

Виктория Кабишова @Parsifal31017

Программист

Как правильно прописать пути в angular routing к angular версии 8.2.14?

Вот что у меня есть:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { MainComponent } from './Component/fb/Main';
import { UsersComponent } from './Component/fb/Users';
import { Users1Component } from './Component/fb/Users1';
import { CompanyComponent } from './Component/fb/Company';
import { Company1Component } from './Component/fb/Company1';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';


@NgModule({
  imports: [
      BrowserModule,
      NgbModule,
      ReactiveFormsModule,
      RouterModule.forRoot([
        { path: '', component: MainComponent },

      ]),
  ],
  declarations: [
    AppComponent, 
    MainComponent,
    UsersComponent,
    Users1Component,
    CompanyComponent,
    Company1Component,
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Я застопарилась на прописании путей. Использую https://angular.io/start/routing#routing.

Вот Component которые у меня есть:

import { Component } from '@angular/core';
import {FormControl, Validators} from '@angular/forms';

@Component({
  selector: 'app-company1',
  templateUrl: './Company1.html',
  styleUrls: ['./Company1.css']
})

export class Company1Component {
  images = [944, 1011, 984].map((n) => `https://picsum.photos/id/${n}/900/500`);

  ctrl = new FormControl(null, Validators.required);

  toggle() {
    if (this.ctrl.disabled) {
      this.ctrl.enable();
    } else {
      this.ctrl.disable();
    }
  }
}

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

@Component({
  selector: 'app-users',
  templateUrl: './Users.html',
  styleUrls: ['./Users.css']
})


export class UsersComponent {}

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-users1',
  templateUrl: './Users1.html',
  styleUrls: ['./Users1.css']
})

export class Users1Component {
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    address: new FormGroup({
      street: new FormControl(''),
      city: new FormControl(''),
      state: new FormControl(''),
      zip: new FormControl('')
    })
  });
}

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

@Component({
  selector: 'app-users1',
  templateUrl: './Company.html',
  styleUrls: ['./Company.css']
})

export class CompanyComponent {
}

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

@Component({
    selector: 'app-main',
    templateUrl: './Main.html',
    styleUrls: ['./Main.css'],
    encapsulation: ViewEncapsulation.None,
  styles: [`
    .dark-modal .modal-content {
      background-color: #292b2c;
      color: white;
    }
    .dark-modal .close {
      color: white;
    }
    .light-blue-backdrop {
      background-color: #5cb3fd;
    }
  `]
  })

export class MainComponent {

}