title: Angular 6 Convert an Application to Library
body: <p>I have an Angular 6 app that handles routes like 'page-not-found', 'error', 'unauthorized.'</p>
  
  <p>This how my routes look: </p>
  
  <pre><code>const appRoutes: Routes = [
    { path:'page-not-found', component: NotFoundPageComponent },
    { path: 'unauthorized', component: UnAuthorizedPageComponent },
    { path: 'error', component: ErrorPageComponent },
    { path: '**', component: NotFoundPageComponent },
    ];
  </code></pre>
  
  <p>All the components have simple html template like below: </p>
  
  <pre><code> &lt;p&gt;Page Not Found. Please report this error to system administrator &lt;/p&gt;
   &lt;p&gt;Unauthorized. Please report this error to system administrator&lt;/p&gt;
   &lt;p&gt;Error. Please report this error to system administrator&lt;/p&gt;
  </code></pre>
  
  <p>Everything is working fine with <code>ng serve</code> I want to use these routes in multiple applications, Hence I am looking to convert this to a module or library which i can import in many application, something like below</p>
  
  <pre><code>import { NotFoundPageComponent } from 'routing-lib';
  </code></pre>
  
  <p>In my original application, I created a library with <code>ng g library routing-lib</code> . But I don't how to tie my app to the library. 
  This is how my project structure looks.</p>
  
  <p><a href="https://i.stack.imgur.com/l6RlW.png" rel="noreferrer"><img src="https://i.stack.imgur.com/l6RlW.png" alt="enter image description here"></a></p>
  
  <p>Any suggestions or pointers? </p>