Combining Angular 5, Node.js with Express, and sharing a models folder using TypeScript is a common setup in full-stack web applications. Here's a step-by-step guide on how to achieve this:

  1. Setting up the Angular 5 Project:

    Use the Angular CLI to create a new Angular 5 project:

    bash
    ng new angular-app

    This will create a new Angular project named angular-app.

  2. Setting up the Node.js + Express Server:

    Create a new folder for your server, initialize a package.json file, and install the necessary dependencies:

    bash
    mkdir server cd server npm init -y npm install express body-parser cors --save
  3. Shared Models Folder:

    Create a new folder named shared in the root of your project. Inside the shared folder, create TypeScript model files that you want to share between the Angular app and the Node.js server. For example, create a file named user.model.ts with the following content:

    typescript
    // shared/user.model.ts export interface User { id: number; name: string; email: string; }
  4. Configuring TypeScript Compiler Options:

    In both the Angular app and the server, you need to ensure that the TypeScript compiler includes the shared folder for type checking and compilation.

    In the tsconfig.json file of the Angular app (located in the root of your Angular project), add the following paths mapping under compilerOptions:

    json
    { "compilerOptions": { "paths": { "@shared/*": ["../shared/*"] } } }

    In the tsconfig.json file of the server (located in the root of your server folder), add the following paths mapping under compilerOptions:

    json
    { "compilerOptions": { "paths": { "@shared/*": ["../shared/*"] } } }
  5. Using Shared Models:

    Now you can import the shared models in your Angular components and services and the server code:

    In the Angular app, for example, in a component or service:

    typescript
    // app.component.ts import { Component } from '@angular/core'; import { User } from '@shared/user.model'; // Importing the shared model @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { user: User = { id: 1, name: 'John Doe', email: 'john@example.com' }; }

    In the Node.js + Express server, for example, in a route handler:

    typescript
    // server/routes/users.ts import { Router } from 'express'; import { User } from '@shared/user.model'; // Importing the shared model const router = Router(); router.get('/users', (req, res) => { const user: User = { id: 1, name: 'John Doe', email: 'john@example.com' }; res.json(user); }); export default router;
  6. Compile and Run the Angular and Node.js Applications:

    To compile the Angular app and run it, use the following commands:

    bash
    ng serve

    To run the Node.js + Express server, create a new entry file (e.g., server.ts) and add the following code:

    typescript
    // server.ts import express from 'express'; import usersRouter from './server/routes/users'; const app = express(); const port = 3000; app.use('/api', usersRouter); // Mount the usersRouter to handle /api/users app.listen(port, () => { console.log(`Server running on http://localhost:${port}`); });

    Compile and run the server:

    bash
    tsc server.ts node server.js

    Now, your Angular app and Node.js server should be working together, sharing models from the shared folder.

Have questions or queries?
Get in Touch