Why does Angular ^17 have problems with my modules, services, etc

Question

Perhaps it was already somewhere in the themes. But I couldn't find a similar question. And the question is why Angular can't find modules and services. I create through "ng g", it seems that everything should be tightened. But it gives you an error or a warning.

The service itself has several methods (functions):

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

@Injectable({
  providedIn: 'root'
})
export class NameServices{...}

How do I import it into a component:

import {NameServices} from '../../@core/utils/NameServices.service';

Problems that arise in the console:

▲ [WARNING] Import "NameServices" will always be undefined because the file "src/app/@core/utils/NameServices.service.ts" has no exports [import-is-undefined]

    src/app/pages/home/home.component.ts:5:9:
      5 │ import {NameServices} from '../../@core/utils/NameServi...
        ╵          ~~~~~~~~~~~~~~~~~~~~~~~


X [ERROR] TS1490: File appears to be binary. [plugin angular-compiler]

    src/app/@core/utils/NameServices.service.ts:0:0:
      0 │
        ╵ ^


X [ERROR] TS2306: File '*:/Projects/client/src/app/@core/utils/NameServices.service.ts' is not a module. [plugin angular-compiler]

    src/app/pages/home/home.component.ts:7:38:
      7 │ ...rvices} from '../../@core/utils/NameServices.service';

I've already tried to change a lot of things. And in tsconfig, I prescribed the paths manually, changed the "module" versions, and so on, which usually causes many problems.

Perhaps it is necessary to tighten dependencies in App.module.ts?

(It seems to be working. But I'm tired of this dirt in the console.)

PS: tsconfig.json

{
  "compileOnSave": false,
  "include": ["./src/app/@core/**/*"],
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": false,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [
      "ES2022",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

Answer 1

import {
  NameServices
} from '../../@core/utils/NameServices.service';

@Component({
  selector: 'your-component',
  standalone: true,
  imports: [
    NameServices
  ],
  templateUrl: './your.component.html',
  styleUrl: './your.component.scss',
})

export class YourComponent {

  constructor(private nameServices: NameServices) {}

}