What steps can I take to avoid cross-project contamination within an Angular workspace?

Imagine having a project structured like this:

projects
|-app1
|-app2
|-common
node_modules
pakcage.json
tsconfig.json
angular.json
... (other root files)

Currently, in a file within app1, you can have an import statement like this: 

import { Repository } from '../../../app2/src/app/query/repository';
Although it functions correctly and builds successfully, avoiding such imports is preferred to maintain a clean project structure. Is there a way to configure angular/typescript to generate an error during serve/build if cross-project imports are used?

angulartypescriptangular-cliangular-workspace-configuration

Answer №1

I have successfully resolved this issue by utilizing the import-blacklist property within the tslint.json file. Here is how it appears in my particular case:

{
  "extends": "../../tslint.json",
  "rules": {
    "no-output-native": false,
    "import-blacklist": [true,
      [".*the-other-project.*"]
    ]
  }
}

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

After installing the latest version of Node.js, the stability of the Ionic environment

After updating nodejs from v8.1 to v12, my ionic environment is experiencing instability. Any suggestions on what needs to be updated? [abc]$ ionic cordova emulate android When running ng run app:ionic-cordova-build --platform=android, an unhandled exce ...

node.jsangularcordovaionic-framework

Preserve the checkbox state upon refreshing the page

I am facing an issue with keeping the checkbox state saved after a page reload. Currently, I have stored my unchecked checkboxes in localStorage, but I am unsure about what steps to take next. In simple terms, I want the checkbox to remain unchecked when I ...

reactjstypescriptcheckbox

Validating Angular Forms within a NgFor loop

Consider the scenario where there is a form implemented as shown below: <form #form="ngForm"> <div *ngFor="let action of member_plan.actions"> <div class="container"> <h4 class="text-sm-center black mb-3">{{ ...

javascripthtmlangularforms

Having trouble utilizing the ng-Command in Angular?

Currently, I am attempting to set up Angular in a vagrant-box environment. npm install -g @angular/cli Unfortunately, I encounter an error while trying to use the client: The program 'ng' is currently not installed. You can install it by typin ...

node.jsangularnpmangular-cli

Tips for incorporating a mesh into Forge Viewer v6 with Typescript

Is there a way to add meshes to Forge Viewer v6 using Type script? I've tried various methods that worked with v4, but I'm encountering issues now. private wallGeometry: THREE.BoxBufferGeometry; drawWalls() { ...

typescriptthree.jsautodesk-forgeautodesk-viewerautodesk

Strategies for Safely Assigning Firestore Data to an Object Without Losing Null Values

I am dealing with a class setup as follows: export class Car{ color=''; topSpeed=0; wheels = 4; } Within my Firestore database, there exists a document titled "car" with values: color:red topSpeed:230 (note that the 'wheels&a ...

angulartypescriptfirebasegoogle-cloud-firestore

Displaying varying values of an object using TypeScript's console log trick

While using Angular version 8 with RJXS library, I encountered a peculiar issue when attempting to log an object variable: Object { carName: "Sorbonne", age: "20", type: "C1" } ​ carName: "BB" ​ age: "23&quo ...

angulartypescriptrxjs

limit the data types of values within an object using Typescript

When working with typescript, how can I define the type signature for a plain old javascript object that allows any key, but restricts the values to strings only? For example, {a:"foo"} and {b:"bar"} are considered valid values, while {a:[1,2,3]} and {b:3} ...

typescripttypes

Unit testing in Angular ensures that a property is always defined and never undefined

I'm struggling to understand why this basic test isn't functioning properly. BannerComponent is not supposed to display a welcome message upon construction Expected 'welcome' to be undefined. // Component @Component({ selector: &ap ...

angularunit-testing

Issue with merging JSON in Angular using RxJS

Seeking assistance with combining two JSON objects in an Angular application. JSON Object 1: { "level1": { "level2": { "level31": "Text 1", "level32": "Text 2", "leve ...

javascriptjsonangular

Interacting Angular 4 Modules communicate with one another

If I have two modules, one for Customers and one for Orders, structured like this: /customers /customers-list.component.html /customers-list.component.ts /customers-details.component.html /customers-details.component.ts /customers-crea ...

angularcircular-dependency

The data path "" should not include any extra properties, specifically rebaseRootRelativeCssUrls

I recently started using Angular and encountered an issue while trying to update some packages. Despite my efforts to find a solution, I haven't come across any helpful answers yet. Here is the Error => Schema validation failed with the following ...

npmangular-cliangular10

Tips for presenting dummy content in an Angular application with HTML

I have created a mock service file and I would like to display it in my HTML, but I'm not quite sure how to make it display correctly. Any help or suggestions would be greatly appreciated. <div class="container2"> <div class=" ...

htmlangulartypescriptmockingdisplay

Combining different types and "currying" or partial application APIs in a unique way

Here is an interface that I am working with: interface IFactory<T> extends Function { (...args: any[]): (((...args: any[]) => T)|T); } After implementing the following code snippet, an error occurred: ts] Type '((...args: any[]) => ...

typescript

Flag is activated to retrieve the data from the @Input source

@Input() config= []; flag = false; I need to change the flag to true only when I receive data in the config from the @input. Where should I do this? The data in the config is delayed and I am unable to access it in ngOnInit but can get it in ngOnChanges. ...

javascriptangulartypescript

The optimal time to register for events within the Vue lifecycle

Currently, I am developing a Vue2 component using vue-component that includes a subcomponent. Here is an example: <note :bus="bus" :itemId="selectedId"></note> The subcomponent contains the following code snippet: <textarea v-model="text" ...

typescriptvue.jsvuejs2vue-component

Incompatibility issues between NestJS and socket.io package

After diligently following the documentation, I attempted to install and work with socket.io on nestjs. However, I encountered multiple issues when installing packages. Despite trying different methods to update the package, nothing seemed to resolve the i ...

typescriptsocketsnestjs

Difficulty accessing files with Angular deployment in Nginx through Docker

Recently, I delved into the world of Docker and Nginx in an attempt to deploy my angular application. Unfortunately, I encountered a perplexing issue. Upon executing the command: npm run build, I noticed that my index.html contained script references as f ...

angulardockernginx

The function res.status is not defined

Currently, I am in the process of integrating my upcoming app with Google Sheets. I have relocated the function that manages the post request to "app/api/sheets" as per the recommended documentation. import type { NextApiRequest, NextApiResponse } from &ap ...

typescriptnext.jsgoogle-api

What is the process for importing an untyped Leaflet plugin into an Angular application?

I am trying to incorporate the leaflet plugin leaflet-mapwithlabels into my angular project. However, the library does not provide an option for NPM installation. After following some guides, I attempted adding the JS file directly to the node-modules in i ...

javascriptangulartypescriptleaflet