Runtime error when sharing code between client/server in Node.js app
<p>I have a Node.js project with this basic folder structure:</p>
<pre><code>├── project
    ├── client
        ├── app
            ├── assets
            │   └── css
            └── components
                ├── about
                ├── categories
                ├── home
                ├── navbar
                └── posts

    ├── common
        ├── model
        └── util
    ├── server
        ├── api
        ├── model (deprecated for ../common/model)
        ├── conf
        └── db
</code></pre>
<p><code>server</code> is an Express API, <code>client</code> is an Angular2 App using this API. I use Gulp to build a <code>dist</code> folder which is being deployed to AWS Elastic Beanstalk.</p>
<p><strong>Important:</strong> In <code>dist</code>, <em>Client</em> lives in <code>app</code> folder, while <em>Server</em> is in the root.</p>
<p>Everything was working fine until I decided to share some code between <em>Server</em> and <em>Client</em> (<em>that's the point in Node.js I thought...</em>). I've created a <code>common</code> folder in project's root with, among others, a post model (<code>/project/common/model/post.ts</code>)</p>
<p>In <em>Server</em>'s <code>/project/server/server.ts</code> I replaced:</p>
<pre><code>import {Post} from './model/post'
</code></pre>
<p>for:</p>
<pre><code>import {Post} from '../common/model/post'
</code></pre>
<p>And it works.</p>
<hr />
<p>But in <em>Client</em>'s <code>/project/client/app/components/posts/post-list.component.ts</code> I replaced:</p>
<pre><code>import {Post} from './post'; // Model was in the same folder here...
</code></pre>
<p>for:</p>
<pre><code>import {Post} from '../../../../common/model/post';
</code></pre>
<p>and it compiles fine but then, when I try to reach <em>Client</em> in my browser, I get:</p>
<blockquote>
<p>zone.js:101 GET <a href="http://127.0.0.1:3000/common/model/post" rel="nofollow noreferrer">http://127.0.0.1:3000/common/model/post</a> 404 (Not Found)</p>
<p>(index):24 Error: Error: XHR error (404 Not Found) loading <a href="http://127.0.0.1:3000/common/model/post" rel="nofollow noreferrer">http://127.0.0.1:3000/common/model/post</a></p>
</blockquote>
<p>I've checked and my Gulp's build task is correctly moving the compiled (transpiled) common files to <code>dist/common</code>.</p>
<p>Any hint on how to proceed to solve this? Thank you so much!</p>