title: Solving circular dependencies with RouterModule
body: <p>I am boostrapping an Angular application. I am trying to follow the <a href="https://angular.io/guide/styleguide" rel="nofollow noreferrer">official styleguide</a>. More specifically, I need to understand how modules work.</p>
  
  <p>Let's take this simple site map :</p>
  
  <pre><code>├── Home page
  ├── Profile page
  │   ├── Preferences
  │   ├── Change password
  </code></pre>
  
  <p>I want to structure the app with a "Core" module, a "Shared" module and a "Routing" module and 1 module for each part of the application ("Home" and "Profile" in this example) as follows :</p>
  
  <pre><code>├── CoreModule
  ├── SharedModule
  ├── RoutingModule
  ├── HomeModule
  │   ├── Home Component
  ├── ProfileModule
  │   ├── ProfileComponent
  │   ├── PreferencesComponent
  │   ├── ChangePasswordComponent
  </code></pre>
  
  <p><strong>Problem</strong> : </p>
  
  <ol>
  <li><p><code>RoutingModule</code> needs to know about <code>ProfileComponent</code>. So <code>RoutingModule</code> imports <code>ProfileModule</code>.</p></li>
  <li><p>In <code>ProfileComponent</code>, I need some <code>&lt;a [routerLink]="..."&gt;</code> in order to enable navigation to sub components. So <code>ProfileModule</code> needs to import <code>RoutingModule</code>.</p></li>
  </ol>
  
  <p>Hence, <strong>I get a circular dependency</strong>. How do I solve this circular dependency?</p>
  
  <p><strong>EDIT</strong> : for future googlers, there is a <a href="https://angular.io/guide/lazy-loading-ngmodules" rel="nofollow noreferrer">good example</a> in the <code>NgModules</code> part of the official documentation.</p>