Having trouble with declaring an upgraded AngularJS component in the App Module of Angular 2?

Check out this Gist

I am currently working on a project that involves running AngularJS and Angular together, utilizing the UpgradeModule. I have successfully "upgraded" an AngularJS component (angular.component) for use in our Angular components (@Component) following the guidelines provided on the Angular 1.x upgrade page.

However, I encountered an issue when trying to declare this "upgraded" component in the AppModule declarations: [] array. An error message pops up saying unknown element 'tooltip'.

To resolve this issue, I removed the declaration from the AppModule and instead declared it within the @NgModule of the component where the upgraded component will be utilized. Surprisingly, this fixed the problem.

If you have a moment, please take a look at the code snippet in the Gist linked above to get a better understanding of the situation.

Answer №1

There is no issue with the behavior at hand.

  • In order to utilize the components, they should be declared within the module where they are intended for use.

  • If you wish to utilize the component across multiple modules, create a SharedModule and include the component in both the declarations and exports of the SharedModule.

  • Import the SharedModule in any other modules where you want to make use of this particular component.

To learn more about shared modules, refer to the Angular2 Docs.

Additionally, there is a useful tutorial on NgModules that may provide further assistance.

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

Troubleshooting webpack encore issues with importing enums from node_modules

I am faced with a challenge of utilizing an enum from a library I created in a different project. The library is developed using Vue and typescript, bundled with rollup. On the other hand, the project is built with Symfony, with the front end also using Vu ...

Issue with Firebase functions not functioning correctly when deployed

Describing the issue I'm facing: I am currently working on setting up a Firebase function that uses Express to act as an intermediary between a user's browser and the Notion API. I have put together some code for basic functionality, which can be ...

Bring Jest into everyday script

Can Jest be imported into a file that is not intended to run as a test and does not include any test cases (such as a support module for tests)? ...

Designing a personalized user template for a feature in Angular 2

My component currently has a default template: import {Component} from 'angular2/core'; @Component({ selector: 'my-component', template: ` <div class="container"> ...

Tips on transferring component changes from one page to another

I have a select-option control that appears on multiple pages, so I created a single page to contain the select-option and then included that page in other pages. The issue I am facing is that when I use this component on page 1 and update the selected val ...

Can you explain the distinction between 'extends' and 'implements' in TypeScript programming?

Curious to understand the similarities and differences between a Man and a Child. class Individual { name: string; age: number; } class Child extends Individual {} class Man implements Individual {} ...

Ways to customize the OverridableComponent interface within Material-UI

Is there a way to effectively use the Container component with styled-components incorporating ContainerProps, while still being able to pass the component prop that belongs to the OverridableComponent interface? Currently, I am encountering an error when ...

Looking to transform a psql query into typeorm syntax

I am in search of data on a daily, weekly, or monthly basis. I utilized the date_trunc() function to generate such records. Although I was successful in creating a psql query, I am unfamiliar with typeorm stack and need guidance on converting it into typeo ...

How does Angular detect when the controller's data grows over time in order to update the user interface?

Imagine a scenario where the page is initially loaded without any data for the controller to return: var data={}; function updateDataController($scope) { $scope.resultsToDisplay = data; } However, as the user interacts with the page in various ways, ...

Ways to set a default value for Subject RxJS observable

Currently working on developing an Angular 2 application where I need to enable the reordering of columns in a List by clicking on the title, similar to how data-tables work. I came across some examples in the Angularfire 2 documentation which gave me an i ...

Exploring the Scope of a Directive within an HTML Element's Event Handler

I devised a custom Directive for utilizing an element as a 'dropzone' with native HTML Drag & Drop functionality. Custom Directive Source Code import { Directive, ElementRef, OnInit, Output, EventEmitter, ViewChild } from '@angular/co ...

List the attributes that have different values

One of the functions I currently have incorporates lodash to compare two objects and determine if they are identical. private checkForChanges(): boolean { if (_.isEqual(this.definitionDetails, this.originalDetails) === true) { return false; ...

Having trouble with Angular2 + Webpack DefinePlugin integration?

Attempting to launch the Angular2 app following the tutorial on angular.io has been quite the journey for me. Angular2 with Webpack Tutorial on angular.io The installation process went smoothly, despite a few minor obstacles, considering I'm using U ...

Utilizing Bootstrap-Table with Ionic Angular for dynamic table functionality

I am looking to incorporate Bootstrap Table into my Ionic project. It seems like a user-friendly and highly responsive option for Hybrid Web Apps. Additionally, I am in the process of transitioning my Angular project to Ionic, which already utilizes Bootst ...

TypeError: Unable to access the 'classify' property of an object that has not been defined (please save the ml5.js model first)

In my React app, I have set up ml5.js to train a model by clicking on one button and make predictions with another. However, I encounter an error when trying to test the model for the second time: TypeError: Cannot read property 'classify' of und ...

When using Angular2, the form is being mistakenly submitted instead of triggering the desired onSubmit() method

I am working on a component that includes the following elements: Template <div class="hide" id="login-contents"> <form *ngIf="!current_user" role="form" (ngSubmit)="onSubmit()" #loginForm="ngForm"> <div class="form-group"> ...

Guide on verifying the snack bar's visibility and performing an action in e2e test using Protractor

Currently, I am conducting e2e testing using Protractor and encountering an issue with the snack bar feature. Here is a screenshot of the functioning app: Demo The dilemma lies in verifying the visibility of the snackbar on the page and how to execute the ...

Encountering a Compilation Issue in Angular 4

After executing npm install bootstrap@next in my new Angular project, I encountered a compilation error. As a beginner with Angular, I'm seeking assistance on this issue. Compilation Error: ./node_modules/ansi-html/index.js Module build failed: ...

Deep Dive into TypeScript String Literal Types

Trying to find a solution for implementing TSDocs with a string literal type declaration in TypeScript. For instance: type InputType = /** Comment should also appear for num1 */ 'num1' | /** Would like the TSDoc to be visible for num2 as well ...

position the tooltip within the ample available space of a container in an angular environment

In my editor, users can create a banner and freely drag elements within it. Each element has a tooltip that should appear on hover, positioned on the side of the element with the most space (top, left, bottom, right). The tooltip should never extend outsid ...