Angular code smell "Either remove this import or add it as a dependency." when using an interface I wrote. How can I make my code compliant?

Question

I'm new to UI development so forgive me if this isn't angular. I'm using Angular 8 and typescript here. Anyways I created a pop-up modal that I wan't to use throughout my website. It looks great but when I plug it into my components like this

import { IPopUpOptions, IPopUpButton } from 'src/app/modals/pop-up-modal/pop-up-options-interface';

My SonarQube CI/CD pipeline says "Either remove this import or add it as a dependency. Dependencies should be explicitly listed in the package.json file. Importing a module that is not declared as a dependency makes it an implicit one and is bound to create problems." What does this mean? How can I use my pop-up properly so that it abides by this rule?

Answer 1

Try adding './' to your import path: './src/app/modals/pop-...'. Without that, it might be seen as a dependency import (i.e., from node_modules) rather than a file system import.