title: Error with an Observable in model with Angular dynamic component loading
body: <p>I have a dynamic component that I've been using for a while. Now I want to add an "Observable" into its model so that I can trigger a change from outside the component. So I have a service (external to the component) that has:</p>
  
  <pre><code>  public menuToggleSubject = new Subject&lt;any&gt;();
    public menuToggleSubjectTrigger: Observable&lt;any&gt; = this.menuToggleSubject.asObservable();
  
    public toggleMenu() {
      this.menuToggleSubject.next();
    }
  </code></pre>
  
  <p>In my model for the component I have:</p>
  
  <pre><code>export class LayoutHeader {
      constructor(public sideNavToggleSubjectTrigger: Observable&lt;any&gt;
      ) {}
  </code></pre>
  
  <p>Then, in the component where I'm loading the dynamic component, I have:</p>
  
  <pre><code>this.item = { sideNavToggleSubjectTrigger: this.siteService.menuToggleSubjectTrigger };
  </code></pre>
  
  <p>However, I get the following error:</p>
  
  <blockquote>
    <p>error TS2322: Type '{ (<strong>removed</strong>): ({ component: typeof (<strong>removed</strong>) is
    not assignable to type 'LayoutHeader'. Types of property
    'sideNavToggleSubjectTrigger' are incompatible.    Type
    'Observable' is not assignable to type 'Observable'. Two
    different types with this name exist, but they are unrelated. Property
    'source' is protected in type 'Observable' but public in type
    'Observable'.</p>
  </blockquote>
  
  <p>Note: I did remove some text above that was not relevant (as I removed other members of my LayoutHeader class for clarity). I think the main error/problem is that the two definitions of Observable do not match. But I don't know why.</p>