Loading a resin element from a custom package

My problem is that observable and posted variables from polymer elements are not working . More precisely, they don't work if I imported items from the package . They display correctly, but they don't respond if their value has changed.
If I load the same item directly from the main project everything works fine!

I have posted full project on github.com and added README -> here

So this is what I did:

I have created a package containing a polymer element. The package is called foo_package and my poly element uses foo.html and foo.dart. It's called poly-foo .

Foo_package structure

Now I create a new project and prepare everything for the use of polymer elements. In yaml I add dependency on my package

pubspec.yaml

[...]
dependencies:
  foo_package: 
    path: D:\User\UserName\dart\foo_package
[...]

      

        
        
        
      

    

Now I import the foo.html file into my html file

<link rel="import" href="packages/foo_package/foo.html">

      

        
        
        
      

    

and implement your own tag

<poly-foo></poly-foo>

      

        
        
        
      

    

Finally, I run my main file and everything looks good. My element displays the way I want it.
But observable and published variables don't work.

What am I doing wrong?


<b> foo.html

<link rel="import" href="../../packages/polymer/polymer.html">
<polymer-element name="poly-foo"> 
  <template>

    Counter:{{counter}}
    <button on-click="{{increment}}">Up!</button>

  <script type="application/dart" src="foo.dart"></script>
  </template>  
</polymer-element>

      

        
        
        
      

    

foo.dart

import 'dart:html';
import 'package:polymer/polymer.dart';

@CustomTag('poly-foo')
class PolyFoo extends PolymerElement {
  @observable int counter = 0;

  PolyFoo.created() : super.created();

  void increment(Event e, var detail, Node target) {
    counter = counter + 1;
  }
}