Using modules imported from external directories in typescript

My project structure is as follows:

workspace
|- thegame
 |- node_modules
 | package.json
 | bs-config.json
 |- src
  | tsconfig.json
  |- app
   | game.model.ts (<--  I want to import game-engine here)
|- game-engine
 |- dist (generated after local build)
 | package.json
 | tsconfig.json
 |- lib
  | index.ts (the main engine module)

I am running an Angular2 application in the "thegame" directory using "npm start".

What do I need to add to the thegame/src/tsconfig.json so that I can import Engine from 'game-engine' in game.model.ts?

import { Engine } from 'game-engine';

I have attempted to symlink "game-engine" to "thegame/node_modules", but when I run the project with lite-server, it returns "404 GET /game-engine"

I want to develop the engine separately from the web application. Any suggestions on how to achieve this would be appreciated.

This project is based on Angular 2 Quickstart available at https://github.com/angular/quickstart

angulartypescript

Answer №1

If you are utilizing an Angular Quick Start package that relies on SystemJS and NPM, and considering the directory layout you have outlined, here are the necessary steps to follow.

Begin by launching a terminal in workspace/thegame and executing the following command:

npm install --save ../game-engine

This command instructs npm to install the package from the specified disk location as a standard dependency for your thegame application.

Next, we need to inform SystemJS about the location of the newly added dependency. Unlike a recursive directory search, SystemJS utilizes explicit configuration to discover dependencies. Although this is advantageous, manual setup is required when using NPM instead of tools like JSPM.

Luckily, this involves adding just one line to the systemjs.config.js file, which should be situated in the src subdirectory of your thegame folder based on the Quick Start guidelines.

Add the following line to the "map" property within the configuration object:

"game-engine": "npm:game-engine/dist/index.js"

Ultimately, your file will resemble:

SystemJS.config({
  paths: {
    "npm:": "node_modules/"
  },
  map: {
    "game-engine": "npm:game-engine/dist/index.js",
    "@angular/core": "npm:@angular/core/bundles/core.umd.js",
    // etc.
  }
  // etc.
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Module Z encountered an unforeseen issue with the import of value X while utilizing the --aot flag

My application experiences significant slowness while loading in the browser (not to mention on mobile, taking 10-15 seconds). Even after running ng build --prod, the performance remains an issue. Attempting to address this with Angular CLI beta 16, I tri ...

angularangular-cliangular2-mdl

Comparing numbers in Angular using Typescript

Hello! I'm encountering an issue with comparing two variables: console.log(simulation.population == 40000000); //true console.log(simulation.initialInfectedNumber == 5); //true console.log(simulation.population < simulation.initialInfectedNumber); ...

angulartypescriptcomparelogical-operators

What is the proper method for specifying the path to my index.tsx file within a React application?

After using npx create-react-app my-app --template typescript to generate my React app, I decided to reorganize the files by moving them to /src/client and relocating my Express backend to /src/server. However, upon running the relocated React app, I encou ...

reactjstypescript

There is an error in the test due to the undefined injected service in the service

While working with my code, I encountered an issue where I injected a service in the constructor using ServiceLocator.injector. During Unit Testing, I received an error message stating "TypeError: Cannot read 'environmentWeb' of undefined". The m ...

angularangular-test

Dealing with an unspecified parameter can be tricky - here's how you

Currently, I am in the process of developing an angular application. In this project, there is a specific scenario that needs to be handled where a parameter is undefined. Here's a snippet of my code: myImage() { console.log('test') ...

javascriptangulartypescriptundefined

Transforming date and timezone offset into an isoDate format using moment.js

When retrieving data from the API, I encounter Date, Time, and Offset values in separate columns. My goal is to obtain an ISO date while maintaining the original date and time values. const date = "2019-04-15" const time = "13:45" const ...

javascripttypescriptmomentjs

What steps should I take to resolve the issue of my endpoint failing to accept POST requests?

I am in the process of developing a customized API, with an endpoint that is specified as shown below: https://i.stack.imgur.com/sZTI8.png To handle the functionality for this endpoint, I have set up a Profiling Controller. Inside my controller directory ...

javascripttypescriptapiexpress

Issue with Angular 7 Select directive failing to select an option that is loaded asynchronously

Currently, I am facing an issue with a select element in my form. The options of this select are generated through an http request. The problem arises when I use *ngFor to set the options tag based on the received data. Even though the first option appears ...

angularasynchronousselect

Encountering Issues with Route Query Parameters in Nuxt/Vue Template using TypeScript

I am currently working on a Nuxt.js project with TypeScript and am facing an issue with route query parameters. The specific problem arises when TypeScript throws a type error related to a route query parameter called userType. The issue occurs when I att ...

javascripttypescriptvue.jsnuxt.jsvue-router

Tips on designing unique field validation decorators in NestJS using GraphQL

I'm currently developing a NestJS API using apollo-server-express and have created an InputType for appointments as shown below: @InputType() export class AppointmentInput { @Field(of => String) @IsNotEmpty() name: string; @Field(o ...

typescriptgraphqlnestjsapollo-server

"Error message: TypeORM DataSource encounters a password issue with the client

Here is the content of my data-source.ts file: import {DataSource} from "typeorm"; import path from "path"; import {User} from "./entity/User"; import { config } from "dotenv"; config(); export const AppDataSource ...

typescripttypeorm

Guide to correctly passing custom parameters along with the event object to an asynchronous form submission handler

Asking for guidance on defining and typing custom parameters alongside the native event object in an async onSubmitHandler for a form. The current implementation only receives the native event as a single parameter: const onSubmitHandler: FormEventHa ...

javascriptreactjstypescript

I'd like to know how to retrieve a total count of all the documents within a Firebase collection using Angular

My code currently fetches documents from a collection, but it's only bringing back 15 at a time (from what I can gather). This is causing an issue as I need to accurately determine the total number of documents in the collection for a program I'm ...

angulartypescriptfirebasegoogle-cloud-firestore

The constructor in a Typescript Angular controller fails to run

Once the following line of code is executed cockpit.controller('shell', shellCtrl); within my primary module, the shell controller gets registered with the Angular application's _invokeQueue. However, for some reason, the code inside t ...

angularjstypescript

Angular xlsx - combining multiple JSON data into a single spreadsheet

Currently, I am working on exporting data to Excel using js-xlsx and the function utils.json_to_sheet. However, I encountered an issue where I have another json object that needs to be exported to the same sheet right below the previous one. XLSX.utils.j ...

angularjs-xlsx

Enhance TypeScript in WebStorm: Update or Upgrade the bundled version

What is the best way to update or upgrade the default version? https://i.sstatic.net/hQFUd.png Important note: I prefer not to manually modify and switch to a custom version like: https://i.sstatic.net/wejP7.png ...

typescriptupgradewebstormupdates

What is the best way to incorporate multiple Bootstrap templates into an Angular project without causing conflicts between them?

When incorporating a bootstrap template into the admin interface, it is important to consider that its design may vary from the template used for visitors. Mixing multiple styles based on different templates can lead to conflicting styles and can potenti ...

javascriptcssangularbootstrap-4

What is the best approach for implementing line coverage for object literal in Typescript Mocha unit-tests?

Lead: I am a newcomer to using typescript and writing unit tests with Mocha and Chai. Question: Can anyone provide tips on achieving 100% line coverage in unit tests for an object literal that isn't within a class? I want to avoid going static if pos ...

node.jstypescriptunit-testingmocha.jschai

What is the best way to extract a variable value from the subscribe method and make it available for use in an Angular 10 service method's return statement using TypeScript?

getProductbyFilter(filter: filterDataModel): Observable<any> { this.stringtoArrayService.convertStringtoArray(some string input).subscribe(productUserResponse => { if (productUserResponse) { this.userProfileProduct = productUserResponse; ...

angulartypescriptrxjs

Utilizing RxJS and Firestore to dynamically link document ids to their corresponding documents

After storing a list of post IDs that the user has liked in my database, I am now trying to display the actual posts that they have liked. I am attempting to use RXJS to map the IDs to the corresponding posts. Currently, I have obtained the list of IDs i ...

angularrxjsgoogle-cloud-firestoreangularfire2