"Troubleshooting Angular 2 Directives That Cause Errors

Hey there, I'm currently working on understanding ANGULAR 2 routing, but I've encountered an error that's causing some trouble. Here's the issue I'm facing:

app/app.component.ts(7,12): error TS2345: Argument of type '{ selector: string; templateUrl: string; directives: (typeof PeliculasListComponent | typeof Peli...' is not assignable to parameter of type '{ selector?: string; inputs?: string[]; outputs?: string[]; properties?: string[]; events?: strin...'. Types of property 'directives' are incompatible. Type '(typeof PeliculasListComponent | typeof PeliculasFooterComponent | typeof "C:/UwAmp/www/curso-ang...' is not assignable to type '(Type | any[])[]'. Type 'typeof PeliculasListComponent | typeof PeliculasFooterComponent | typeof "C:/UwAmp/www/curso-angu...' is not assignable to type 'Type | any[]'. Type 'typeof "C:/UwAmp/www/curso-angular/app/components/contacto.component"' is not assignable to type 'Type | any[]'. Type 'typeof "C:/UwAmp/www/curso-angular/app/components/contacto.component"' is not assignable to type 'any[]'. Property 'length' is missing in type 'typeof "C:/UwAmp/www/curso-angular/app/components/contacto.component"'. app/app.component.ts(16,14): error TS2345: Argument of type '({ path: string; name: string; component: typeof PeliculasListComponent; useAsDefault: boolean; }...' is not assignable to parameter of type 'RouteDefinition[]'. Type '{ path: string; name: string; component: typeof PeliculasListComponent; useAsDefault: boolean; } ...' is not assignable to type 'RouteDefinition'. Type '{ path: string; name: string; component: typeof "C:/UwAmp/www/curso-angular/app/components/contac...' is not assignable to type 'RouteDefinition'. Types of property 'component' are incompatible. Type 'typeof "C:/UwAmp/www/curso-angular/app/components/contacto.component"' is not assignable to type 'Type | ComponentDefinition'. Type 'typeof "C:/UwAmp/www/curso-angular/app/components/contacto.component"' is not assignable to type 'ComponentDefinition'. Property 'type' is missing in type 'typeof "C:/UwAmp/www/curso-angular/app/components/contacto.component"'.

I've pasted my code below:

import {Component} from "angular2/core";
import {PeliculasListComponent} from "./components/peliculas-list.component";
import {PeliculasFooterComponent} from "./components/peliculas-footer.component";
import ContactoComponent from "./components/contacto.component";

import {ROUTER_DIRECTIVES, RouteConfig, Router} from "angular2/router";
@Component({
    selector: "my-app",
    templateUrl: "app/views/peliculas.html",
    directives: [PeliculasListComponent,
                 PeliculasFooterComponent,
                 ContactoComponent, 
                 ROUTER_DIRECTIVES]
})

@RouteConfig([
    {path: "/peliculas", name:"Peliculas", component: PeliculasListComponent, useAsDefault: true},
    {path: "/contacto", name:"Contacto", component: ContactoComponent}*/
])

export class AppComponent{
    public titulo:string = "Peliculas con angular" ;

}   

If you have any suggestions on how to resolve this error, please let me know. Thanks a ton!

Answer №1

It seems that you are working with an outdated version of Angular, possibly a release candidate as mentioned in the comments. The latest documentation does not include a directives attribute in the component decorator.

If you need guidance, check out the resources available on https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html


To get started, refer to the guides on angular.io, which offer plenty of examples.

You can also begin by exploring the Angular seed project, which provides a well-configured environment:

https://github.com/angular/angular-seed

For comprehensive information on getting started with Angular, take a look at this guide directly from the Angular team:

https://angular.io/docs/ts/latest/guide/router.html

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

Is there a way to consolidate all the glyphicons into a single folder during the Angular 4 build process?

My CLI-created application is configured using the angular-cli.json file below: { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { "name": "lienholder" }, "apps": [ { "root": "src", "outDir": "dist" ...

How to perform a fetch on a local path in Next.js?

Is there a way to use the fetch method with a relative path like this: export async function getServerSideProps() { // Fetch data from local API const res = await fetch(`/api/get_all_prices`) const data = await res.json() // Pass data to th ...

Styling with CSS: The Art of Showcasing Initials or Images of Individuals

By following this elegant HTML and CSS example, I am able to showcase my initials over my photo. While this is wonderful, I would like the initials to be displayed only if the image does not exist; if the image is present, the person's initials shoul ...

Exploring Next JS: Effectively altering SVG attributes and incorporating new elements

I have integrated SVGR to load an SVG as a component in my latest Next.js 13 application: import CvSvg from './../../public/image.svg' export default function Home() { return ( <div className="flex flex-col min-h-screen" ...

Setting a default value for the dropdown in Angular is essential for ensuring a smooth

<select [(ngModel)]="detail.State" (ngModelChange) ="onStateChange()" class="form-control"> <option [ngValue]="null" disabled selected>Select State</option> <option * ...

How can I populate a mat-table in Angular 7 with data stored in an object?

At the moment, my code is set up to populate a table with data. In my component.ts file: import { HttpClient } from "@angular/common/http"; import { Component, OnInit } from "@angular/core"; import { FormBuilder, FormGroup, Validators } from "@angular/fo ...

Unusual Behavior of *ngIf and jQuery in Angular 5: A curious case

I'm encountering a strange issue when using the expand-collapse feature of Bootstrap 4 with *ngIf for expansion and collapse. I noticed that the jQuery doesn't work when *ngIf is used, but it works fine when *ngIf is removed. HTML: <div cla ...

Choose a specific div element from a collection of dynamically generated divs in Angular

I have been working on a code to dynamically generate div elements using the *ngFor directive. Here is what I have so far: <div *ngFor = "let item of Items"> <p>Item : {{item}} </p> </div> The challenge I encountered is that w ...

Transmitting an array through a query parameter from Angular 6 to PHP

Hey there! I'm currently in the process of setting up an Angular application to make a GET request to my PHP backend. The PHP code is set up to expect three parameters - two strings and an array of strings. For example, it would look something like th ...

String values not being set as default in Angular Material's mat-button-toggle-group

<div class="navigation"> <mat-button-toggle-group class="button-toggle" [(ngModel)]="langSelected" (change)="onToggleGroupChange($event)" [value]="langSelected"> <mat-button-toggle value=& ...

What is the best way to showcase a variable from a typescript file in an HTML file with Angular?

In my TypeScript file, I have the following function: ngOnInit() { if (sessionStorage['loyalPage']) { this.page = Number(sessionStorage['loyalPage']); } this.webService.getLoyalPlayers(this.pag ...

Creating a dynamic array in an Angular 2 service for real-time changes monitoring by a component

I am facing an issue where my NotificationsBellComponent is not receiving changes to the array in the service even though the _LocalStorageService is returning data correctly. Q) How can I ensure that my component receives updates when the service collect ...

Understanding the connection between two unions through TypeScript: expressing function return types

Within my codebase, I have two unions, A and B, each with a shared unique identifier referred to as key. The purpose of Union A is to serve as input for the function called foo, whereas Union B represents the result yielded by executing the function foo. ...

Unable to bring in the directive from the Angular library

I've created this custom Directive within my library: @Directive({ selector: '[layoutHeaderTitle]', standalone: true }) export class HeaderDirective { constructor( readonly tpl: TemplateRef<any>, private re ...

Converting a String variable to a String Literal Type in Typescript: A step-by-step guide

When working with Typescript, imagine I need to call a function that has the following signature- function foo(param: "TRUE"|"FALSE"|"NONE") Is there a way to achieve something like this- var str = runtimeString() if(str === "TRUE" | str === "FALSE" | s ...

Issue encountered during ng2-redux installation

While attempting to use the https://www.npmjs.com/package/ng2-redux link, I encountered an issue when running npm install redux ng2-redux --save. Here is the stacktrace of the error: npm ERR! Windows_NT 6.1.7601 npm ERR! argv "C:\\Program Files& ...

When it comes to TypeScript, it feels like my interface can accept anything I throw at it, and it struggles to grasp how I've implemented and imported redux-toolkit and styled components

My Current Struggle: Errors in Typescript are occurring seemingly at random. The interface in my index.tsx file doesn't align with the object it should describe, yet no red flags are raised. On top of that: An error pops up when attempting to import ...

"Capture input value changes and display the previous value when submitting a post. See an example of

Hi there! I'm facing 2 issues with my code, you can find a DEMO here When adding a product to the sale form, the input field for `description` changes for all products. Changing the input product in the sale does not reflect the change. I have shar ...

Encountering NullInjectorError during Angular 5 Upgrade: InjectionToken LocaleId Provider Not Found

Recently, I made the transition from Angular 4 to Angular 5 using CLI 1.5.4 for my app. Along with that, I have a shared library set up via npm link. To successfully build my project after the upgrade, I had to make changes in my tsconfig.app.json file as ...

Is it possible to implement Angular Universal on Github Pages?

Is it doable to Deploy Angular Universal on Github Pages? I've come across some solutions such as angular-cli-ghpages, but from what I understand, these options don't pre-render content for SEO purposes. ...