We Keep Coding

Angular: error NG8001: 'component' is not a known element

I'm trying to use a component ('register') inside the app.component and it throws me this error:
Error: src/app/app.component.html:88:1 - error NG8001: 'register' is
not a known element:
If 'register' is an Angular component, then verify that it is part of this module.
To allow any element add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component.
88
My app.component.html:
...
<register></register>
...
My register.component.ts:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
public title:string;
constructor() {
this.title = 'Registrar';
}
ngOnInit(): void {
console.log('Componente de registro cargado');
}
}
My app.component.ts:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'red soc';
}
My app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RegisterComponent } from './register/register.component';
#NgModule({
declarations: [
AppComponent,
RegisterComponent
],
imports: [
BrowserModule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Your selector is 'app-register' but you are using 'register' .
Use 'app-register' istead of 'register'
I hope it will solve the issue.

I am using angular code to call the rest api and display it on the screen

The following code is my viewall.ts code
import { Component, OnInit } from '#angular/core';
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Component({
selector: 'app-viewall',
templateUrl: './viewall.component.html',
styleUrls: ['./viewall.component.css']
})
#Injectable()
export class RestComponent {
constructor(private http: HttpClient) { }
configUrl = "http://34.201.147.118:3001/getAllData";
getConfig() {
return this.http.get(this.configUrl);
}
}
This is my app.module.ts code
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import {FormsModule} from'#angular/forms';
import { AppComponent } from './app.component';
import { RestComponent } from './rest/rest.component';
import { ViewallComponent } from './viewall/viewall.component';
import { HttpClientModule} from '#angular/common/http';
#NgModule({
declarations: [
AppComponent,
RestComponent,
ViewallComponent
],
imports: [
BrowserModule,FormsModule,
HttpClientModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
it is giving e the following error ERROR in src/app/app.module.ts(6,10): error TS2305: Module '"E:/paramount/paramount/src/app/viewall/viewall.component"' has no exported member 'ViewallComponent'.

Where is the exported class inside viewall.component.ts? You should be exporting a class from the component.
Haven't you declared RestComponent as Injectable and that too inside viewall.ts, and then you are importing it from rest.component file inside app.module.ts.
Try to move the RestComponent from the declarations array to providers array and also the import from the correct file.
Hope it helps.
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import {FormsModule} from'#angular/forms';
import { AppComponent } from './app.component';
import { RestComponent } from './rest/rest.component';
import { ViewallComponent } from './viewall/viewall.component';
import { HttpClientModule} from '#angular/common/http';
#NgModule({
declarations: [
AppComponent,
ViewallComponent
],
imports: [
BrowserModule,FormsModule,
HttpClientModule,
],
providers: [
RestComponent,
],
bootstrap: [AppComponent]
})
export class AppModule { }
Your viewall.component.ts should be exporting a class and look like this:-
import { Component, OnInit } from '#angular/core';
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Component({
selector: 'app-viewall',
templateUrl: './viewall.component.html',
styleUrls: ['./viewall.component.css']
})
export class ViewallComponent{}

injectable service is in providers
you can try with this solution.
providers: [
RestComponent,
],
declarations: [
AppComponent,
ViewallComponent
],
In viewall component.ts
import { Component, OnInit } from '#angular/core';
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Component({
selector: 'app-viewall',
templateUrl: './viewall.component.html',
styleUrls: ['./viewall.component.css']
})
export class ViewallComponent{
constructor() { }
}
#Injectable()
export class RestComponent {
constructor(private http: HttpClient) { }
configUrl = "http://34.201.147.118:3001/getAllData";
getConfig() {
return this.http.get(this.configUrl);
}
}

error when trying to inject router into app.component.ts

I am having trouble injecting router into the constructor of the app.component.ts file, by calling "private router: Router".
It gives me the following error:
Error: "StaticInjectorError(AppModule)[AppComponent -> Router]:
StaticInjectorError(Platform: core)[AppComponent -> Router]:
NullInjectorError: No provider for Router!"
But when I remove the injection, the page works fine, but I cannot use the navigate function to load into other components.
Here is what I have
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/Router';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [MessageParser]
})
export class AppComponent implements OnInit {
constructor(private router: Router) {}
ngOnInit() {}
goToLobby() {
this.router.navigate(['lobby']);
}
}
app.component.html
<button (click)="goToLobby()">Go to lobby</button>
<router-outlet></router-outlet>
app-routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { MainComponent } from './main/main.component';
import { LobbyComponent } from './lobby/lobby.component';
import { GameComponent } from './game/game.component';
const appRoutes: Routes = [
{ path: '', component: MainComponent },
{ path: 'lobby', component: LobbyComponent },
{ path: 'game', component: GameComponent }
];
#NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule {}

Remove RouterModule from your exports inside AppRoutingModule
#NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [
]
})

Angular HttpClientModule errors

I am working on my first Angular app and dealing with the HttpClientModule in my component and getting errors.
following the docs Angular -HttpClient I installed the HttpClientModule in the app.module.ts as instructed, then in my emails.component.ts I have the following:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-emails',
templateUrl: './emails.component.html',
styleUrls: ['./emails.component.scss'],
results: string[]
})
export class EmailsComponent implements OnInit {
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get('/api/email_list.json').subscribe(data => {
this.results = data['results'];
});
}
}
which is giving me the following error in my console:
ERROR in src/app/components/emails/emails.component.ts(7,3): error TS2345: Argument of type '{ selector: string; templateUrl: string; styleUrls: string[]; results: any; }' is not assignable to parameter of type 'Component'.
Object literal may only specify known properties, and 'results' does not exist in type 'Component'.
src/app/components/emails/emails.component.ts(7,12): error TS2693: 'string' only refers to a type, but is being used as a value here.
src/app/components/emails/emails.component.ts(7,19): error TS1109: Expression expected.
src/app/components/emails/emails.component.ts(12,29): error TS2304: Cannot find name 'HttpClient'.
src/app/components/emails/emails.component.ts(16,12): error TS2339: Property 'results' does not exist on type 'EmailsComponent'.
app.module.ts:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { HttpClientModule } from '#angular/common/http';
import { AppComponent } from './app.component';
import { EmailsComponent } from './components/emails/emails.component';
#NgModule({
declarations: [
AppComponent,
EmailsComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

you're component should be:
first you need to import HttpClient
second results: string[] should be inside the class not at decoration component exactly as I did here :
import { Component, OnInit } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Component({
selector: 'app-emails',
templateUrl: './emails.component.html',
styleUrls: ['./emails.component.scss']
})
export class EmailsComponent implements OnInit {
results: string[];
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get('/api/email_list.json').subscribe(data => {
this.results = data['results'];
});
}
}
Please read the description carefully, they explaining you need to load HttpClient.

In your app module you forgot to provide.
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { HttpClientModule } from '#angular/common/http';
import { AppComponent } from './app.component';
import { EmailsComponent } from './components/emails/emails.component';
#NgModule({
declarations: [
AppComponent,
EmailsComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [HttpClient],
bootstrap: [AppComponent]
})
export class AppModule { }
Then in your component:
import { Component, OnInit } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Component({
selector: 'app-emails',
templateUrl: './emails.component.html',
styleUrls: ['./emails.component.scss']
})
export class EmailsComponent implements OnInit {
results: string[]
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get('/api/email_list.json').subscribe(data => {
this.results = data['results'];
});
}
}

Angular 4 HttpClient in Component Can't resolve all parameters

I started learning Angular 4 and got to the part with HTTP Client. Right now I'm trying to make an http call from the component (yes, I know I should transfer it to service, but still)
But for some reason, when I try to inject HttpClient into my Component I get the next error:
Uncaught Error: Can't resolve all parameters for PromocodeComponent:
(?).
Here's the code of my component:
import { Ticket } from '../../classes/Ticket.class'
import { Component, Input } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Component({
selector: 'promocode',
templateUrl: './promocode.template.html',
styleUrls: ['./promocode.styles.scss']
})
export class PromocodeComponent {
#Input() ticket: Ticket;
state: String = "normal";
promocode: String = "";
constructor(private http: HttpClient) {}
promocodeValidate(event): void{
console.log(this.promocode);
console.log(event);
this.http.get('/promocode/asdasda').subscribe(data => {
console.log(data);
});
}
}
And my app.module.ts:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { MovieBadgeComponent } from './movie-badge/movie-badge.component';
import { TicketComponent } from './ticket/ticket.component';
import { PromocodeComponent} from './promocode/promocode.component';
import { FormsModule } from '#angular/forms';
import { HttpClientModule } from '#angular/common/http';
#NgModule({
declarations: [
AppComponent,
MovieBadgeComponent,
TicketComponent,
PromocodeComponent
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule {}

It turned out, for me, that I forgot the #Injectable decorator on my service. In earlier angular (>=2), i remember the #Injectable as being optional... Guess not anymore?

Turns out, I missed
"emitDecoratorMetadata": true
in tsconfig
fml...

I got the same error when I ran unit testing (a spec.ts file) with Angular.
The following is what I did:
import { HttpClientModule, HttpClient } from '#angular/common/http';
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ],
imports: [
HttpClientModule
],
schemas: [NO_ERRORS_SCHEMA],
providers: [
HttpClient,
]
})
.compileComponents();
}));
and the error was gone.