Exploring the power of Angular 10 components

Angular version 10 has left me feeling bewildered. Let's explore a few scenarios:

Scenario 1: If I create AComponent.ts/html/css without an A.module.ts, should I declare and export it in app.module.ts? Can another module 'B' use the 'A' selector or does 'B' need to import app.module.ts?

Scenario 2: Would it be better to create an A.module.ts that declares and exports AComponent, requiring B.module.ts to import A.Module? This approach could allow B.html to...something.

Scenario 3: Alternatively, could I directly reference AComponent from BComponent.ts with an Import AComponent statement, even if AComponent is not declared in any module? This would enable B.html to...something else.

Could someone offer some clarity on these scenarios? My Angular 10 application is behaving strangely, and I feel lost. Your guidance would be greatly appreciated.

Warm regards, Yogi

angulartypescriptmodule

Answer №1

Case 1:

ComponentModule

  • Declares/Exports: ComponentX

ModuleY

  • Declares: ComponentY

In order for ComponentY to utilize ComponentX, it must be accessible from ModuleY. This can be achieved by declaring it in ModuleY instead of ComponentModule as follows:

ComponentModule

  • Imports: ModuleY (If ComponentModule requires access to ComponentX/ComponentY) ModuleY
  • Declares: ComponentX/ComponentY

Alternatively, you can import ComponentModule into ModuleY, but this is not recommended as ComponentModule serves as the main module of the application and should not be imported into other modules.

Case 2:

ModuleA

  • Declares/Exports: ComponentX

ModuleB

  • Declares: ComponentY
  • Imports: ModuleA

This approach allows ComponentY to access ComponentX because ModuleB imports ModuleA, gaining access to all its exported components. This is a better solution compared to Case 1.

Case 3:

This scenario is unclear. Further explanation would be appreciated to provide better assistance.

General Principle

Any component declared in ModuleA can access all components declared within ModuleA or exported from other imported modules in ModuleA.

It is recommended to create a SharedModule where reusable components are declared and import this module wherever needed. For more information, refer to the documentation at https://angular.io/guide/sharing-ngmodules

Note that services function differently.

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

Issue 1068: Attribute not found within angular 2 (Ahead of Time Compilation)

I am currently learning Angular 2 and trying to create a "User Register" form. However, I encountered an error stating "Property does not exist on type" during Phone number validation. I am using both JIT and AOT compilers. With the JIT compiler, my user ...

javascriptvalidationangulartypescriptangular2-aot

What steps should I take to successfully launch an ASP.NET Core Angular Template without encountering any errors?

While working on a new ASP.NET Core 3.1 Angular Project using Visual Studio for Mac (v8.4.8) and running it in debug mode, I encountered an issue resulting in the following exception: "An unhandled exception occurred while processing the request Aggregat ...

angularasp.net-core

The type string[] cannot be assigned to type 'IntrinsicAttributes & string[]'

I'm attempting to pass the prop of todos just like in this codesandbox, but encountering an error: Type '{ todos: string[]; }' is not assignable to type 'IntrinsicAttributes & string[]'. Property 'todos' does not ex ...

javascriptreactjstypescript

Updating components in Angular4 when route changesHow to update components on route

How can I ensure my component updates when the route changes? Here is the code for my component : import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { ListService } from '.. ...

javascriptangularangular4-router

Oops! Looks like there's an issue with the route configuration for ''. Make sure to include one of the following: component, redirectTo, children, or loadChildren in order to validate the

I've been facing an issue while setting up a project with angular routing. The project is only displaying the contents of index.html and not app.component.html. Upon inspection, I noticed that the body tag just has <app-root></app-root> in ...

javascriptangularangularjs

Using the currency pipe with a dynamic variable in Angular 2

My application utilizes CurrencyPipe, The current implementation is functional, <div class="price">{{123 | currConvert | currency:'USD':true:'3.2-2'}}</div> Now, I need to dynamically pass the currency from a model varia ...

angulartypescriptcurrency-pipe

Navigate smoothly through Angular components without any page reloads

Here is a simplified version of my current setup: <app-header></app-header> <app-search></app-search> <router-outlet></router-outlet> <app-footer></app-footer> Within the router-outlet, I have two component ...

angularangular-router

Navigating through different components in Angular 4 using a service for routing

Encountering an issue while connecting my Angular 4 and REST application with a service. Here's the error message: compiler.es5.js:1694 Uncaught Error: Can't resolve all parameters for TypeaheadComponent: (?, [object Object], [object Object]). ...

angulartypescriptangular4-router

What is the best way to retrieve the data property of a Route in Angular?

Here is a snippet of code that I am working with: https://stackblitz.com/github/NickHodges/datademo The task at hand involves displaying data for a specific route on a web page. In the provided code, the path details are set up as follows: const routes ...

angular

Should I opt for the spread operator [...] or Array.from in Typescript?

After exploring TypeScript, I encountered an issue while creating a shorthand for querySelectorAll() export function selectAll(DOMElement: string, parent = document): Array<HTMLElement> | null { return [...parent.querySelectorAll(DOMElement)]; } ...

typescript

Automatically reloading clients after deployment with Angular 10 for enhanced user experience

As of now, my application is live with all the JavaScript files having a timestamp version. However, when I rebuild my Angular app, the JavaScript files will be updated with a new timestamp version. https://i.stack.imgur.com/M8MDN.png Is there a method t ...

angularangular10

ng-click is not triggering my function

I'm really struggling to understand how AngularJS and Typescript can work together efficiently. My main goal is to make a simple method call, but I seem to be stuck due to some constraints in the architecture I have chosen. I must have made a mistake ...

htmlangularjstypescript

The formatting directive fails to keep pace with speedy input

I am working on a feature to automatically format the input field as the user types, transforming the letters into valid initials in uppercase with dots in between. The formatting needs to happen in real-time as the user inputs characters, rather than aft ...

angularinputformattingdirectiveangular-directive

Maximize the benefits of using React with Typescript by utilizing assignable type for RefObject

I am currently working with React, Typescript, and Material UI. My goal is to pass a ref as a prop. Within WidgetDialog, I have the following: export interface WidgetDialogProps { .... ref?: React.RefObject<HTMLDivElement>; } .... <div d ...

reactjstypescriptmaterial-ui

The error message "better-sqlite3 TypeError: o.default is not a constructor" indicates that

As part of my vscode extension development in typescript, webpack, and better-sqlite3, I am attempting to create a database within the C:\Users\userName\AppData\Roaming\Code\User\globalStorage\ folder. However, when ...

typescriptsqlitebetter-sqlite3

Adjacent components

I have a query regarding the utilization of Angular. I aim to align the sentences side by side. These are two distinct components that I developed. I wish for recipe-list and recipes-details to function properly, with both statements displayed alongside ...

cssangular

Encountering the "ExpressionChangedAfterItHasBeenCheckedError" in Angular 2

As I try to fill in multiple rows within a table that I've created, the table gets populated successfully. However, an error message pops up: "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous valu ...

javascriptangulartypescript

Potential issue with Angular material autocomplete not displaying suggestions when using input.setValue()

After clicking on the input element, the autocomplete options are displayed. However, if I dynamically modify the input element's value, the autocomplete options do not appear. <mat-form-field> <input type="text" [formControl]="d ...

angularangular-materialangular-formsmat-autocomplete

developing a collection of Material UI text fields

My goal is to construct an accordion containing several textfield mui-components. I have developed a unique render function incorporating all the essential tags and syntax for creating a text field component. Now, I am looking to generate an array of text ...

reactjstypescriptmaterial-ui

An issue arises when using enums in TypeScript

Let's analyze this demonstration. Initially, an enum is created as follows: enum myEnum { a = 'a', b = 'b' } The next step involves creating a similar enum but with the addition of one more numeric value! This alteration is c ...

typescriptenums