Angular is having trouble locating the module for my custom library

Trying to implement SSR in my angular application, but encountering an error when running npm run build:ssr.

I've created my own library named @asfc/shared, which is bundled in the dist folder.

ERROR in projects/asfc-web/src/environments/environment.ts:1:39 - error TS2307: Cannot find module '@asfc/shared' or its corresponding type declarations.

1 import { PageNotFoundComponent } from '@asfc/shared';
                                        ~~~~~~~~~~~~~~
......

I have included index.ts in the files section, but the error persists.

Here is my tsconfig.server.json:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "removeComments": false,
    "strict": false,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noImplicitAny": false,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "experimentalDecorators": true,
    "pretty": true,
    "declaration": true,
    "outDir": "../../dist/server",
    "lib": ["es2016", "DOM"],
    "types": [
      "node"
    ],
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "files": [
    "server.ts",
    "../../dist/asfc-shared/public_api.d.ts"
  ],
  "angularCompilerOptions": {
    "entryModule": "../../projects/asfc-web/src/app/app.server.module.ts#AppServerModule"
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

Dist Libs structure:

dist/asfc-shared
    ├── asfc-shared.d.ts
    ├── package.json
    ├── public_api.d.ts

Please assist with resolving this issue. Thank you.

angulartypescriptserver-side-renderingangular-universal

Answer №1

Consider implementing a path mapping in your tsconfig.json

  "compilerOptions": {
    
    ....
    
    "paths": {
      "@myapp/shared/*": [
        "../../dist/myapp-shared/*"
      ],

    }
  },

It seems like the dist folder has been excluded from your configuration, but it might not be the same directory as where your library is located.

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

Interface constructor concept

Trying to figure out how to dynamically add different types of components to a game object in TypeScript. After consulting the TypeScript documentation on interfaces, I discovered a unique approach for dealing with constructors in interfaces, which led me ...

typescript

retrieve information from Angular service

Is there a way for parent components to communicate with child components by injecting providers directly into the TypeScript file of each child component? I am trying to retrieve data using get and set methods, but I am unsure how to proceed. Any suggesti ...

angulartypescript

React: Retrieved information, yet unable to access the properties of the object

After successfully fetching data from an API call and seeing the results in console, I am facing issues with accessing object properties and displaying them. interface Data { data: [] isLoading: boolean } function About() { const [ dataUser, ...

reactjstypescriptpropertiesfetch

Leveraging a complete HTML string as a template embedded with CSS and JavaScript code

When my API returns an entire HTML page as a string, complete with inline and header CSS, as well as JavaScript, it looks like this: <script></script> <style></style> <div></div> . . . </html> This full HTML page ...

angular

Hear the Network Transformation - Ionic 2

Monitoring network changes and taking action in my Ionic 2 Mobile application has been a challenge. I have utilized the network module of Ionic for this purpose. $ ionic cordova plugin add cordova-plugin-network-information $ npm install --save @ionic-nat ...

angularcordovaionic2cordova-pluginsionic-native

Issue with manipulating element styles using jQuery in Angular2

My method of assigning IDs to elements dynamically using *ngFor looks like this: <div *ngFor="let section of questionsBySubCat" class="col-md-12"> <div class="subcat-container"> <h4 class="sub-cat">{{ section?.subcategory }}& ...

javascriptjqueryangulartypescript

Discovering if the array data is already present in Angular can be accomplished by using specific methods

Here is the snippet of code: data = [ { 'id': 'asdjxv', 'username': 'emma', }, { 'id': 'asqweja', 'username': 'adam', }, { ...

javascriptangulartypescript

Getting the version from package.json in Next.js can be easily achieved by accessing the `version

In my quest to retrieve the "version" from the package.json in a Next.js application, I encountered a roadblock. I attempted using process.env.npm_package_version, similar to how it is done in a Node application, but unfortunately, it returned undefined. ...

javascriptreactjstypescriptnext.js

Issue: Only one type can be named "Upload" within Apollo, Express, and Type-Graphql

I've encountered an issue while trying to execute a simple Mutation for uploading an image. The error I keep facing is: "Error: There can be only one type named 'Upload'." Here's the snippet of my code: import { FileUploadI, GraphQLUp ...

typescriptexpressapollo-servertypegraphql

Implementing cursor-based pagination in Next.js API Route with Prisma and leveraging the power of useSWRInfinite

I am working on implementing cursor-based pagination for a table of posts using Next.js API Route, Prisma, and useSWRInfinite. Currently, I am fetching the ten most recent posts with Prisma in a Next.js API Route and displaying them using useSWR, sorted b ...

typescriptnext.jspaginationprismaswr

How can I dynamically insert various FormGroup instances into a FormArray in Angular?

I am looking to dynamically populate the order array with multiple dishes. Each dish will be stored as a FormGroup in the form, such as pizza, salad, drink, or any other type of dish. Prior to adding any items, the form structure should resemble this: this ...

node.jsangulartypescript

Exploring the integration of client-side dependency variables during data fetching in Next.js 13

I have a new Next.js 13 application up and running, where I am working on integrating client and server-side components to improve user experience and overall app performance. While it is straightforward to fetch and display data using SSR during the initi ...

reactjsnext.jsserver-side-rendering

Converting JSON to TypeScript in an Angular project

Within my Angular project, I have an HTTP service that communicates with a web API to retrieve JSON data. However, there is a discrepancy in the naming convention between the key in the JSON response (e.g., "Property" in uppercase) and the corresponding pr ...

jsonangulartypescript

Creating a dynamic TypeScript signature that includes an optional argument

For some unknown reason, I am attempting to implement a reduce method on a subclass of Map: const nah = Symbol('not-an-arg'); class MapArray<A, B> extends Map<A, B> { reduce<T = [A, B]>(f: (prev: T, next: [A, B]) => any ...

typescripttypescript-generics

The ERR_ASSERTION error is thrown because the catch clause variable is not an instance of the Error class

For some reason, I am unable to set up the authentication, firestore, and cloud storage in my project as I keep getting this error message: [error] AssertionError [ERR_ASSERTION]: catch clause variable is not an Error instance at assertIsError (C:\Us ...

angularfirebaseionic-frameworkangularfire

Obtain data from a single module and incorporate it into a different one

In my Angular 2 application, I am dealing with two component files - home.ts and folder-selector.ts. Within the folder-selector.ts file, there is a variable named pathToNode. I am trying to figure out how to access this value from within the home.ts file ...

javascripthtmlangulartypescript

Apache ECharts is throwing an error due to incompatible types of the 'trigger' property

I am experimenting with setting up some options in this demonstration, and here is what I have managed to achieve so far. testOptions: EChartsOption = Object.assign( {}, { backgroundColor: 'red', tooltip: { trigger: ...

angulartypescriptechartsngx-echarts

Launching the MEAN stack application into production

After completing a web app at an enterprise level, utilizing Vue for the front end, Node for the backend, and MongoDB as the database, we faced the challenge of hosting them separately during development. However, this setup may not be suitable for product ...

node.jsangularexpressvue.js

What is the syntax for typing the router instance in Next.js?

I'm working on a password reset request form in my Next.js project. Here's the code I have: "use client"; import * as React from "react"; import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } fro ...

typescriptnext.jsrouter

Data types for keys and values in TypeScript

interface A { a?: number }; interface B { a?: string }; function replicate< Source extends object, Destination extends { [key in keyof Source]?: (1) } >( source: Source, key: keyof Source, destination: Destination, converter: ...

typescriptgenericstypestypescript3.0