App does not run

[Terr4]

Hi, I tried your tutorial from https://buddy.works/tutorials/building-a-web-app-with-angular-and-bootstrap but I could not get the app running. Would be great for any hints. The errors I am getting are:

The GET API Call did not work, it seems it did not parse the API_KEY variable and just running the GET with the following URL: https://newsapi.org/v2/everything?q=DevOps&sortBy=popularity&apiKey=${this.API_KEY}' I fixed this by writing

  API_KEY: string = 'e40d07f00b094602953cc3bf8537477e';

  constructor(private httpClient: HttpClient) { }

  getNews(){
    return this.httpClient.get('https://newsapi.org/v2/everything?q=DevOps&sortBy=popularity&apiKey=' + this.API_KEY);
  }

Next error was:

Error: src/app/home/home.component.ts:11:3 - error TS2564: Property 'data' has no initializer and is not definitely assigned in the constructor.
11   data: any[];

I could fix this error by adding "strictPropertyInitialization": false in tsconfig.json, even though it's just disabling a check.

The other error then is:

Error: src/app/home/home.component.ts:18:19 - error TS7053: Element implicitly has an 'any' type because expression of type '"articles"' can't be used to index type 'Object'.
  Property 'articles' does not exist on type 'Object'.
18       this.data = data['articles'];

I could not solve this one even after trying several solutions posted online

[afterglowstranger]

Rightly or wrongly changing the constructor in home.component.ts to

constructor(public dataService : DataService) { this.data = []; }

Solved the first error for me, I too am struggling with the second issue

[afterglowstranger]

Ok I have managed to get this working, again no guarantees as I am a newbie to Angular, hope this works for you too..

My Steps to fixing this and getting it working...

1. npm install newsapi --save

2. add an article.model.ts file in the home directory

3. contents of file export class Articles { status: string; totalResults: number; articles: Article[];

   constructor( status: string, totalResults: number, articles: Article[] ){ this.status=status; this.totalResults=totalResults; this.articles=articles;

   } }

export class Article { author: string; content: string; description: string; publishedAt: string; source: Source; title: string; url: string; urlToImage: string;

constructor( author: string, content: string, description: string, publishedAt: string, source: Source, title: string, url: string, urlToImage: string){

this.author = author;
this.content =content;
this.description=description;
this.urlToImage=urlToImage;
this.url=url;
this.title=title;
this.source=source;
this.publishedAt=publishedAt;

} }

export class Source { id: string; name: string;

constructor(id: string, name: string){ this.id =id; this.name = name; } }

export const initialArticles: Articles = { status: '', totalResults: 0, articles: [] }

4. update contents of home.component.ts imports to become import { Component, OnInit } from '@angular/core'; import { DataService } from '../data.service'; import { Articles, initialArticles } from './article.model';

@Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit {

data: any[]; articles: Articles = initialArticles;

constructor(public dataService : DataService) { this.data = []; }

ngOnInit(): void { this.dataService.getNews().subscribe((resp: any)=>{ console.log(resp); this.data = resp['articles']; //

});

}

}