`Planning the layout of an Angular application with distinct sections`

I've been working on breaking down my Angular app into separate sections and I have a few queries about how to proceed:

auth
    login (only public page in the entire system, after login users are directed to either the admin or user portal based on specific variables)

admin-portal
    layout (admin portal layout) -component
    dashboard (admin portal dashboard) -component
    users (user management in admin portal) -component

user-portal
    layout (user portal layout) -component
    dashboard (user portal dashboard) -component
    projects (project management in user portal) -component
  1. Should I create separate modules for each section with their own routes?
  2. Can I have components with the same name (e.g. dashboard.component) in multiple modules?
  3. In my routing plan, I intend to set up admin-portal and user-portal as parent routes with their own AuthGuards, and then define child routes within them.
angulartypescript

Answer №1

Indeed, breaking down an Angular application into separate sections, also known as features, and creating a "feature module" for each of them is a common practice.

As recommended in the feedback ... assigning unique names to your components is a superior approach in terms of design. It leads to a clearer understanding when reviewing the code.

Absolutely, you have the ability to implement guards for your routes and set up child routes.

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

Incorporate a loading message for data retrieval within Fusion Chart on Angular 8

Is there a way to show a message before Fusion Chart loads data without using the render function on the component side? I have successfully created my charts with the following code: <fusioncharts width="100%" height="600" [type]="metric.type" [dataS ...

angularfusioncharts

What is the method for including an input field beside the y-axis label in Chart.js?

I'm struggling to implement a live poll using Chart.js where users can select their option by checking a checkbox next to the y-axis label. My initial attempt was unsuccessful as placing the input boxes outside of the canvas led to alignment issues wi ...

javascriptangularchart.js

Using Typescript and webpack to detect variables that are defined in the browser but not in Node environment

My goal is to create a package that can be used on both servers and clients with minimal modifications required. Some libraries are available in Node but not in a browser, while others are accessible in a browser but not in Node. For instance, when utili ...

javascriptnode.jstypescriptwebpacklocal-storage

Issue TS2322: The specified type ' ~lib/array/Array<~lib/string/String> | null' cannot be assigned to type '~lib/array/Array<~lib/string/String>'

An array of strings (holder.positions) is stored in Holder. The main purpose of this function is to add the ID of the position parameter to the array. Below is the function used: function updateHolder(holder: Holder, position: Position): void { if(hol ...

typescriptassemblyscript

Is there a way to create fresh instances of a class using Injector rather than utilizing a singleton pattern?

In my Angular application, I am working with two injectable classes. @Injectable() class B {} @Injectable() class A { constructor(b:B) { } } My goal is to make class A a Singleton and class B a Transient. I recently discovered that I can utilize Ref ...

angulardependency-injection

When testing, the @Input() variable that is inherited and initialized in the child constructor will be null during ngOnInit

I am currently working on testing Angular components using jest. I encountered an issue where a component initializes a variable in its constructor that becomes null during ngOnInit when the component is tested, but remains as expected when the application ...

angularjestjs

Error in Typescript: The type 'Element' does not have a property named 'contains'

Hey there, I'm currently listening for a focus event on an HTML dialog and attempting to validate if the currently focused element is part of my "dialog" class. Check out the code snippet below: $(document).ready(() => { document.addEventListe ...

javascriptjqueryhtmltypescript

Tips for incorporating a hashbang into a JavaScript file that is executable without compromising browser compatibility

Is it possible to run code like this in both Node.js and the browser? #! /usr/local/bin/node console.log("Hello world") I have a script that I currently run locally in Node.js, but now I want to also execute it in the browser without having to modify it ...

javascriptnode.jsbashtypescript

Creating a custom dropdown filter in ag-grid-angular

I am currently integrating 'ag-grid-angular' into my project. https://i.sstatic.net/9jcy2.png As for the filter display, I would like to replace the search box with a drop-down menu. Furthermore, I aim to populate this drop-down with unique ele ...

angularag-gridag-grid-angular

Placeholder for a constructor property method

Currently, I am in the process of writing unit tests for a function that utilizes the twilio-node package to send SMS messages. The specific function I am focusing on testing, both for arguments passed and number of times called, is Twilio.prototype.messag ...

typescriptmocha.jstwiliosinonchai

Angular: The Ultimate Guide to Reloading a Specific Section of HTML (Form/Div/Table)

On my create operation page, I have a form with two fields. When I reload the page using window.reload in code, I can see updates in the form. However, I want to trigger a refresh on the form by clicking a button. I need help writing a function that can r ...

javascripthtmlangulartypescriptng-bootstrap

Oops! The Element Type provided is not valid - it should be a string

I have a desire to transition from using Victory Native to Victory Native XL. However, I am encountering an error message saying Render Error Element type is invalid. import * as React from "react"; import { View } from "react-native"; ...

typescriptreact-nativevictory-native

Error encountered when attempting to pass i18next instance to I18nextProvider

Issue: Error message: Type 'Promise' is missing certain properties from type 'i18n': t, init, loadResources, use, and more.ts(2740) index.d.ts(344, 3): The expected type is derived from the property 'i18n' declared within ty ...

reactjstypescripti18nextreact-i18next

Angular2 recursive template navigation

Is it possible to create a recursive template in Angular 2 without using ng-include? It's puzzling why this feature seems to be missing in Angular 2... HTML: <div ng-app="app" ng-controller='AppCtrl'> <script type="text/ng-templat ...

javascriptrecursionangular

Tips for effectively importing specific Bootstrap components in Angular without disrupting the package

Issue overview: In my Angular project, I am using Bootstrap v5.2 and aiming to optimize the package size and loading time by selectively importing only the necessary Bootstrap components. However, when attempting to import individual components like butto ...

angularimportsassbootstrap-5

Using .map() with a union type of string[] or string[][] results in a syntax error

interface Props { data: string[] | string[][]; } function Component({ data }: Props) { return data.map(v => v); } map() is causing an error: The expression is not callable. Each member of the union type '((callbackfn: (value: string, in ...

typescriptunion-types

Angular button press

Recently, I started learning Angular and came across a challenge that I need help with. Here is the scenario: <button *ngIf="entryControlEnabled && !gateOpen" class="bottomButton red" (click)="openGate()">Open</button> <button *ngIf ...

javascriptangulartypescript

TypeScript does not automatically determine the type of a passed generic parameter

I am currently working on defining flexible types for my api responses, but I am struggling to find the right approach for type conversion using TypeScript 4.5.4. My goal is to parse the response and determine the type that will be used later in the code. ...

typescripttypescript-generics

Issue detected with XMLHttpRequest - "The requested resource does not have the 'Access-Control-Allow-Origin' header."

Currently, I am working on the frontend development of an application using Angular 2. My focus is on loading an image from a third-party site via XMLHttpRequest. The code I have implemented for this task is as follows: loadFile(fileUrl) { const ...

javascriptrestangularhttpxmlhttprequest

Combining an Angular application within a Spring application and encountering a TypeError on a JSP page

I am currently working on integrating an Angular app into an existing Spring application. I have included the code for integration below. While it functions correctly on some JSP pages, it fails on others. Please see the description and rendered element in ...

angularjsptypeerrorangular-routing