title: How do I overwrite an existing component in angular?
body: <p>I am trying to overwrite an existing component in angular. </p>
  
  <p>My original component is:</p>
  
  <pre><code>@Component({
    selector: 'app-orginal',
    templateUrl: './orginal.component.html',
    styleUrls: ['./orginal.component.css']
  })
  export class OrginalComponent implements OnInit {
  }
  </code></pre>
  
  <p>in the app.component.html I use the original component like that:</p>
  
  <pre><code>&lt;app-orginal&gt;&lt;/app-orginal&gt;
  </code></pre>
  
  <p>What you would like to do is overwrite the original component with the mock component.</p>
  
  <p>This is my mock component:</p>
  
  <pre><code>@Component({
    selector: 'app-mock-of-orginal',
    templateUrl: './mock-of-orginal.component.html',
    styleUrls: ['./mock-of-orginal.component.css']
  })
  export class MockOfOrginalComponent implements OnInit {
  }
  </code></pre>
  
  <p>Related to this answer <a href="https://stackoverflow.com/a/49327712/7717382">https://stackoverflow.com/a/49327712/7717382</a> I tried to use this solution in my app.module.ts:</p>
  
  <pre><code>@NgModule({
      declarations: [
          AppComponent,
          OrginalComponent,
          MockOfOrginalComponent
      ],
      imports: [
          BrowserModule,
          HttpClientModule,
          RouterModule.forRoot([
              {path: 'app-mock-of-orginal', component: MockOfOrginalComponent},
              {path: 'app-orginal', redirectTo: 'app-mock-of-orginal', pathMatch: 'full'},
          ]),
      ],
      providers: [],
      bootstrap: [AppComponent]
  })
  export class AppModule {
  }
  </code></pre>
  
  <p>But it does not work. What did I do wrong?</p>
  
  <p>Here is my git-hub project: <a href="https://github.com/annalen/overwrite-component" rel="noreferrer">https://github.com/annalen/overwrite-component</a></p>
  
  <p>Thanks for the help.</p>