Two component.ts files point towards same component.html file

I’m trying to split my functions inside my first.component.ts file to another second.component.ts file make it more readable.

I am pointing to the same component.html file from both ts files like this:

first.component.ts

@Component({
  selector: 'first-component',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss'],
})

second.component.ts

@Component({
  selector: 'second-component',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss'],
})

By doing this, I get errors that functions that are in the second component are missing in the first component and that other way around. This is because when I use the functions in the HTML they check for them in both of the .ts files.

What can I do to prevent this?

>Solution :

Those are two separate components.

Just because you declare the same template does NOT mean it merges them into a single one.

If you want to split your code for more readability, then use the Anguar features to do so : services, directives, pipelines, Input/Output …