Developing Angular applications with numerous projects and libraries in the build process

The other day I successfully deployed the initial version of our front-end application, but encountered some confusion during the build process setup. Many Angular apps do not utilize the workspace feature unless they are creating multiple standalone applications that share code through a library. This is typically done to separate the client UI from the back-office UI.

Recently, I came across a comprehensive article on Angular library projects which provided valuable insights:

However, I found that most articles lack clarity on the overall build process aside from focusing on the library project itself. To get everything running smoothly, I had to execute specific commands (incorporating them into a script in the package.json file):

ng build my-lib-project-name && ng build &ng build my-ui-project-name --output-hashing=all --configuration=demo

Following this, I copied the contents of dist/my-ui-project-name to the server for deployment (the actual build process also occurred on the cloud server).

One curious aspect was having to perform a second ng build just before building my main project that imports the library, otherwise the main project wouldn't recognize the library components. Interestingly, this wasn't required when using ng serve and only building the library.

Furthermore, I encountered an issue with the --prod flag where one of my components couldn't be located:

ERROR in : Cannot determine the module for class SideNavMenuItemComponent in <my_path_to_project>/projects/my-lib-project-name/src/lib/layout/sidebar/side-nav-menu/side-nav-menu-item.component.ts! Add SideNavMenuItemComponent to the NgModule to fix it.

This error only appeared during the --prod build and didn't occur without the flag or during ng serve since the component had been included in an NgModule.

All these challenges made me question if my current build process is optimal. Is there anyone with experience setting up a build process for a multi-project Angular app? Especially with effective environment management strategies?

At the moment, I've added some scripts to the main package.json file and the angular.json has default build configurations. Additionally, we plan to transition from Angular 7 to Angular 8 in the near future.

angulartypescriptbuildconfiguration

Answer №1

After some troubleshooting, I successfully solved this issue. It turns out the problem was related to incorrect imports. When importing components, services, or other elements from my library project, the correct syntax should be:

import {SomeService, ISomeInterface} from 'my-lib-project-name';

However, there were instances where my IDE (WebStorm) automatically generated imports with a lengthy and inaccurate path:

import {SomeService} from '../../../../../../../my-lib-project-name/src/lib/some-path/some-service.service';

While this approach worked fine during development using ng serve, it caused issues when building the project. When building, files are placed in a dist folder, rendering relative paths invalid.

To resolve this, I recommend performing a project-wide search for any occurrences of long, convoluted paths like '../../my-lib-project-name' and replacing them with simply 'my-lib-project-name'.

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

Error in Visual Studio when attempting to create a new Angular file without proper authorization

After setting up node, npm, and angular cli, I encountered an UnauthorizedAccess error when creating a new project in Visual Studio. Can someone please offer some assistance? Thank you, Please see the attached error image for reference ...

angularvisual-studio-code

Error encountered in Storybook: The value is not iterable (property Symbol(Symbol.iterator) cannot be read)

I recently created a React library using and opted for the React + TypeScript + Storybook template. You can find the entire codebase here → https://github.com/deadcoder0904/react-typical I encountered the following error: undefined is not iterable ( ...

javascriptreactjstypescriptiteratorstorybook

Angular: Step-by-step guide to controlling input field visibility with a toggle switch

// The property autoGenerate is declared in my .ts file autoGenerate: boolean; constructor(){ this.autoGenerate = true; } <div class="col-sm-4"> <div class="checkbox switcher"> <label>Invoice Number * <input t ...

angulardata-binding

Tips on showcasing an array as a matrix with a neat line property

I am currently developing an application using TypeScript, and utilizing a JSON array structured like this: data = [{"name":"dog", "line":1}, {"name":"cet", "line":1}, ...

htmljsonangulartypescript

Update the Angular material table with the set filtered results

Currently, I have a functioning Angular Material table with search capabilities. However, I am encountering an issue. The problem lies in the fact that when I navigate from 'route A' to 'route B' and pass a value to the search box in t ...

angularangular-material

Setting up Typescript with React 17 and Tailwind CSS version 2.0

I'm struggling to set up TailwindCSS 2.0 with the create-react-app --template typescript configuration and encountering errors. Even after following the instructions on the official TailwindCSS website for React at https://tailwindcss.com/docs/guides/ ...

reactjstypescriptnpmtailwind-css

What is the best way to simulate an ActivatedRouteSnapshot?

Currently, I am working on unit testing the code snippet below: ngOnInit() { this.router.events.subscribe((val) => { if (val instanceof ActivationEnd && val.snapshot) { this.selectedLanguageCode = val.snapshot.queryParams ...

angularunit-testing

Double invocation of ActivatedRoute.params.subscribe method observed

To extract URL parameters, I'm utilizing the ngOnInit() method where I've implemented the following snippet: this.activatedRoute.queryParams.subscribe(params => { console.log(params); // actual implementation here }); Yet, upon initi ...

node.jsangulartypescriptobservable

The setting of the custom user agent in the Chrome Extension Manifest Version 3 is not functioning correctly

We currently have an extension that consists of only two files: manifest.json and background.js Despite the browser (Chrome version 112) not reporting any errors, we are facing an issue where the user agent is not being set to 'my-custom-user-agent&a ...

javascripttypescriptgoogle-chrome-extensionchromiumchrome-extension-manifest-v3

Troubleshooting Angular Prerendering: How Conditional JavaScript Usage Can Lead to 'document is not defined' Error

Currently, I am utilizing Angular 15 in an attempt to pre-render a website for SEO optimization. It has come to my understanding that certain elements such as document and window are unavailable during pre-rendering since the code does not operate within a ...

angulartwitter-bootstrapbootstrap-5prerenderangular-ssr

Customize the filename and Task Bar name for your Electron app when using electron-packager

My application uses electron packager to build the app on Mac. Here is my package.json configuration: { "name": "desktop_v2" "productName": "desktop v2", "version": "1.0.0", "license": "MIT", "scripts": { "build": "node --max_o ...

javascriptangularnpmnpm-scriptselectron-packager

Import a Component Dynamically Using a Variable in AngularJS

I am attempting to dynamically load a component using a variable, but I keep running into an "Uncaught Error: Template parse errors". How can I achieve this successfully? <app-{{ this.plugin.component }}></app-{{ this.plugin.component }}> ...

angularjsangular

Issue encountered when attempting to assign an action() to each individual component

I'm facing an issue with the button component I've created. import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-button', template: ` <ion-button color="{{color}}" (click)="action()"&g ...

javascriptangularionic-framework

Launching npm using the command "npm run protractor" results in console errors being thrown upon completing the test

Recently, we made the decision to streamline the installation process of Protractor on local machines by specifying it in package.json rather than installing it individually with the -g flag. The addition we made looks something like this: "scripts": { ...

javascriptnode.jsangularprotractore2e-testing

Angular interceptors in sequence

I'm looking to implement a queue system in Angular. My goal is to store requests in an array and process them sequentially, moving on to the next request once the current one is successful. Below is the code I tried, but unfortunately it didn't ...

angulartypescriptrxjsqueueinterceptor

Navigating within components using code is an essential skill when working with Vue Router

I am currently developing a Quasar application powered by Vue 3 with vue-router version 4 All my routes are properly configured and function well when navigating from a component template using <router-link to="/route">Go to route</rout ...

typescriptvue.jsvue-routervuejs3

The issue at hand is that the Mongo Atlas model is in place, but for some reason,

https://i.sstatic.net/4m2KT.pngI recently delved into using Next.js and I am a newcomer to backend technologies. I have successfully established a connection with MongoDB Atlas using Mongoose, however, the user object data from the post request is not be ...

reactjstypescriptmongodbnext.jsmongodb-atlas

What is the best way to determine the number of queryClient instances that have been created?

Currently, I am managing a large project where the code utilizes useQueryClient in some sections to access the queryClient and in other sections, it uses new QueryClient(). This approach is necessary due to limitations such as being unable to invoke a Reac ...

javascriptreactjstypescriptreact-hooksreact-query

The code for filtering an array in Angular 9 seems to be failing to display the expected filtered items

Here is the JSON data: [ { "products": [ { "id": "1", "name": "Apple", "price": "free", "category": "Fruits" }, { And so on And this : [{ "categories": [ ...

jsonangulararray-filter

A step-by-step guide to resolving the TS2345 compilation error during your TypeScript upgrade from version 4.7 to 4.8

We encountered a compiling error after upgrading from TypeScript 4.7.4 to a newer version (specifically, 4.8.4). This error was not present in our codebase when using 4.7.4. To pinpoint the issue, I have extracted the error into a small code snippet. When ...

typescripttypescript-generics