<p dir="auto"><strong>I'm submitting a ...</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Service's method can't access the service attribute when called from a child component of ChildModule with <code class="notranslate">this</code> if the service is declared in the providers array of AppModule and ChildModule.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
An error need to spawn to warning the duplicated declaration of the service. Because without this error I searched for 3 days where was the problem in my service /or/ my component trying everything but nothing was working, then I just removed the service from my ChildModule and it was working fine.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
I tried to make a <a href="http://plnkr.co/edit/kRyrAZm3jG0OIffqiZ3x?p=preview" rel="nofollow">Plunker</a>, but I can't manage to setup the router on it, so it's not representative because it seems we need to load the sub-module with the router loadChildren method.</p>
<p dir="auto">You can see the code issuing this problem on my Github here (protected branch): <a href="https://github.com/SherlockStd/ME4N-Starter/tree/this-error/src/app">https://github.com/SherlockStd/ME4N-Starter/tree/this-error/src/app</a></p>
<p dir="auto">Here is the main structure of the files:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="src/
├── app.component.html
├── app.component.ts
├── app.module.ts &lt;== provide AuthenticationService
├── app.routes.ts &lt;== load authentication.module with router.loadChildren()
│
├── +authentication/
│   ├── authentication.component.html
│   ├── authentication.component.ts
│   ├── authentication.module.ts &lt;== provide AuthenticationService
│   ├── authentication.routes.ts &lt;== expose a route to login component
│   └── login
│       ├── login.component.html
│       └── login.component.ts &lt;== using service's methods here don't work
│
└── shared/
    └── services/
        ├── authentication.service.ts
        └── base.service.ts"><pre class="notranslate"><code class="notranslate">src/
├── app.component.html
├── app.component.ts
├── app.module.ts &lt;== provide AuthenticationService
├── app.routes.ts &lt;== load authentication.module with router.loadChildren()
│
├── +authentication/
│   ├── authentication.component.html
│   ├── authentication.component.ts
│   ├── authentication.module.ts &lt;== provide AuthenticationService
│   ├── authentication.routes.ts &lt;== expose a route to login component
│   └── login
│       ├── login.component.html
│       └── login.component.ts &lt;== using service's methods here don't work
│
└── shared/
    └── services/
        ├── authentication.service.ts
        └── base.service.ts
</code></pre></div>
<p dir="auto">What I mean by <code class="notranslate">login.component.ts &lt;== using service's methods here don't work</code> is that the service is unable to set his own attributes, it can read them but can't write.</p>
<p dir="auto">If we provide <code class="notranslate">AuthenticationService</code> only in <code class="notranslate">app.module.ts</code>, instead of both <code class="notranslate">app.module.ts</code> and <code class="notranslate">authentication.module.ts</code> (), the problem is solved.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
If something like this break the context, we need to display an error explaining why.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Ubuntu 16.10, VSCode, yarn 0.23.4</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 4.1.1</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]</p>
</li>
</ul>

<ul dir="auto">
<li>
<p dir="auto"><strong>Language:</strong> TypeScript 2.3.2 compiling to ES5 (with AoT for prod)</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> 7.10.0</p>
</li>
</ul>
<p dir="auto">We would like to implement bare bones change detection so that we can unblock ourselves for other parts of the system and work on them in parallel.</p>
<p dir="auto"><a href="https://github.com/mhevery/angular/blob/master/modules/change_detection/src/watch_group.js">https://github.com/mhevery/angular/blob/master/modules/change_detection/src/watch_group.js</a><br>
<a href="https://github.com/mhevery/angular/blob/master/modules/change_detection/src/record.js">https://github.com/mhevery/angular/blob/master/modules/change_detection/src/record.js</a></p>
<p dir="auto">I would love to get a very simple change detection going which can only watch simple properties such as <code class="notranslate">foo</code> or <code class="notranslate">bar</code> ie no (<code class="notranslate">foo.bar</code> or <code class="notranslate">foo().bar</code> or anything of that sort)</p>
<p dir="auto">We should be able to implement this without the need for parser.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="class Person {
  var age;
}

var person = new Person();
var pwg = new ProtoWatchGroup();
pwg.watch('age');
var wg = pwg.instantiate();
wg.setContext(person);
var cd = new ChangeDetection(wg);
cd.detectChanges();"><pre class="notranslate"><code class="notranslate">class Person {
  var age;
}

var person = new Person();
var pwg = new ProtoWatchGroup();
pwg.watch('age');
var wg = pwg.instantiate();
wg.setContext(person);
var cd = new ChangeDetection(wg);
cd.detectChanges();
</code></pre></div>
<p dir="auto">Make this test pass: </p><div class="Box Box--condensed my-2">
  <div class="Box-header f6">
    <p class="mb-0 text-bold">
      <a href="https://github.com/angular/angular/blob/69210e4fde38433b4aa6c66e7c4e0e0093171df3/modules/change_detection/test/change_detection_spec.js#L9">angular/modules/change_detection/test/change_detection_spec.js</a>
    </p>
    <p class="mb-0 color-fg-muted">
         Line 9
      in
      <a data-pjax="true" class="commit-tease-sha" href="/angular/angular/commit/69210e4fde38433b4aa6c66e7c4e0e0093171df3">69210e4</a>
    </p>
  </div>
  <div itemprop="text" class="Box-body p-0 blob-wrapper blob-wrapper-embedded data">
    <table class="highlight tab-size mb-0 js-file-line-container" data-tab-size="8" data-paste-markdown-skip="">

        <tbody><tr class="border-0">
          <td id="L9" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="9"></td>
          <td id="LC9" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-en">it</span><span class="pl-kos">(</span><span class="pl-s">'should do simple watching'</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> </td>
        </tr>
    </tbody></table>
  </div>
</div>
<p></p>