Dart analyzer in webstorm shows the message - unused import

Question

Please help! Dart analyzer in webstorm shows the message - unused import. I can't understand the reason and fix it. The image contains the file content - app_component.dart

On this line ( import 'src/click_me2_component.dart'; ) in the file lib/app_component.dart I get a message - info: Unused import: 'src/click_me2_component.dart'. (unused_import at [angular_app] lib\\app_component.dart:1)

Image - app_component.dart

lib/app_component.dart

import 'src/click_me2_component.dart';
import 'package:angular/angular.dart';


@Component(
  selector: 'my-app',
  template: '''<h1>Hello {{name}}</h1>
  <click-me2></click-me2>''',
)
class AppComponent {
  var name = 'Angular';
}

lib/src/click_me2_component.dart

import 'package:angular/angular.dart';

@Component(
  selector: 'click-me2',
  template: '''
    <h1>No! .. Click me!</h1>
  ''',
)
class ClickMe2Component {
  String clickMessage = '';
  int _clicks = 1;

}

analysis_options.yaml

   analyzer:
  exclude: [build/**]
  errors:
    uri_has_not_been_generated: ignore
  plugins:
    - angular


linter: rules: - cancel_subscriptions - hash_and_equals - iterable_contains_unrelated_type - list_remove_unrelated_type - test_types_in_equals - unnecessary_const - unnecessary_new - unrelated_type_equality_checks - valid_regexps

Answer 1

Thing is that click_me2_component.dart is not used indeed as app_component.dart does not have anything from click_me2_component.dart used.

As I see you are trying to use "click-me2" component from click_me2_component.dart . In order to do that right you also need to add appropriate directive annotation, otherwise it will not work:

@Component(
  selector: 'my-app',
  template: '''<h1>Hello {{name}}</h1>
  <click-me2></click-me2>''',
  directives: [
    ClickMe2Component,
  ],
)
class AppComponent {}

After you add directive referencing ClickMe2Component , you will notice that click_me2_component.dart is not unused anymore ;)