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?

Eugenie

Maybe 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. – Flashover

My hero @MikeJ! Write that as the answer so I can give you credit =] – Eugenie

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.

Flashover

what if we use @ as import? eg nx library? – Hydrophilous

@mikeJ Can you help with question ? from Weijing Jay Lin comment – Accumulator

@WeijingJayLin did you find solution for the same ? I', also facing similar problem ? – Exchequer

Answer 2

You can configure the rule with a whitelist property. https://community.sonarsource.com/t/javascript-typescript-false-positive-with-absolute-imports/33290

Feuillant