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.
Related
I want to pass a variable from one component to another and I'm using #input
This is my parent component :
#Component({
selector: 'aze',
templateUrl: './aze.component.html',
styleUrls: [('./aze.component.scss')],
providers: [PaginationConfig],
})
export class azeComponent implements OnInit {
public hellovariable: number = 100;
}
This is the template of the parent component:
<app-my-dialog [hellovariable]="hellovariable"></app-my-dialog>
This is my child component :
#Component({
selector: 'app-my-dialog',
templateUrl: './my-dialog.component.html',
styleUrls: ['./my-dialog.component.css']
})
export class MyDialogComponent implements OnInit {
#Input() hellovariable: number;
constructor() { }
ngOnInit() {
console.log(hellovariable);
}
This is the child template:
<h3>Hello I am {{hellovariable}}<h3>
And this is the app.module.ts:
#NgModule({
declarations: [
AppComponent,
MyDialogComponent
],
entryComponents: [
MyDialogComponent
],
imports: [
BrowserModule,
routing,
NgbModule,
BrowserAnimationsModule,
ToastrModule.forRoot(),
RichTextEditorAllModule,
FullCalendarModule,
NgMultiSelectDropDownModule.forRoot(),
LeafletModule.forRoot(),
NgxGalleryModule,
HttpClientModule,
MatDialogModule,
ReactiveFormsModule
],
When I show my parent component template I get this error:
Can't bind to 'hellovariable' since it isn't a known property of 'app-my-dialog'.
Any idea on how to fix this?
Few thing to try
First make sure you have import Input into your component
import { Component, Input } from '#angular/core';
Then follow pascal convention when naming class
export class azeComponent implements OnInit
should change to
export class AzeComponent implements OnInit
Then register your component into your module declarations
Also import BrowserModule into your module also something like this
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,
MyDialogComponent,
AzeComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Mostly you'll get this error because you forgot to declare the component into your app.module.ts or did it wrong
app.module.ts
import { YourSpecificComponent } from './components/measureUnit/measure-unit-monthly/measure-unit-monthly.component';
#NgModule({
declarations: [
AppComponent,
MessageComponent,
DashboardComponent,
.....,
YourSpecificComponent, // declared here
}
your-specific.component.ts
#Component({
selector: 'app-your-specific', // your selector
templateUrl: './your-specific.component.html',
styleUrls: [
'../some.css'
]
})
export class YourSpecificComponent implements AfterContentInit {
.....
ok this error causes because you need to import MyDialogComponent in azeComponent's module.
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: [
]
})
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'];
});
}
}
I have two components its called app.component and child.component. I want to pass the data from parent to child. My code is below. Where am i making mistake?
app.component.ts
import { ChildComponent } from './child.component';
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
entryComponents:[ChildComponent]
})
export class AppComponent {
title = 'app works!';
}
child.component.ts
import { AppComponent } from './app.component';
import { Component, Input } from '#angular/core';
#Component({
selector: 'child',
templateUrl: './child.component.html'
})
export class ChildComponent {
#Input() input :string;
}
app.component.html
<h1>
{{title}}
</h1>
<child [input]="parent to child"> </child>
child.component.html
<div>{{input}}</div>
app.module.ts
import { ChildComponent } from './child.component';
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent,
ChildComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
If you write [input]="parent to child" to the template then it means that you are refering to the parent components this.parent to child which doesn't exists.
You can do something like this:
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
entryComponents:[ChildComponent]
})
export class AppComponent {
title = 'app works!';
parentInput = 'parent to child';
}
then in the template:
<h1>
{{title}}
</h1>
<child [input]="parentInput"> </child>
Source: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child
Just change this line and you are good to go
<child input="parent to child"> </child>
Or if you want to do
<child [input]="parent to child"> </child>
#echonax has alredy given the answer.
I am trying to use angulartics2 with my application.
I have configured correctly as it mentioned in the document.
Note: There is no place it is mentioned to add the provider as a dependency..
When i try to run the application, it shows the error as below.
EXCEPTION: No provider for Angulartics2GoogleAnalytics! Error: DI
Error
at NoProviderError.ZoneAwareError (zone.js:811)
at NoProviderError.BaseError [as constructor] (core.umd.js:1186)
at NoProviderError.AbstractProviderError [as constructor] (core.umd.js:1371)
at new NoProviderError (core.umd.js:1411)
at ReflectiveInjector_.throwOrNull (core.umd.js:3394)
at ReflectiveInjector.getByKeyDefault (core.umd.js:3433)
at ReflectiveInjector.getByKey (core.umd.js:3380)
at ReflectiveInjector.get (core.umd.js:3140)
at AppModuleInjector.NgModuleInjector.get (core.umd.js:8996)
at CompiledTemplate.proxyViewClass.AppView.injectorGet (core.umd.js:12465)
at CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (core.umd.js:12845)
at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal
(/AppModule/AppComponent/host.ngfactory.js:15)
at CompiledTemplate.proxyViewClass.AppView.createHostView (core.umd.js:12421)
at CompiledTemplate.proxyViewClass.DebugAppView.createHostView (core.umd.js:12829)
at ComponentFactory.create (core.umd.js:7766) 1: https://github.com/angulartics/angulartics2
App.component.ts
import { Component } from '#angular/core';
import { Angulartics2GoogleAnalytics } from 'angulartics2';
#Component({
selector: 'my-app',
moduleId: module.id,
templateUrl: `./app.component.html`,
styleUrls: ['/app.componenet.css']
})
export class AppComponent {
title = 'Angular2 google analytics';
constructor(angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics) {}
}
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { HttpModule } from '#angular/http';
import { FormsModule } from '#angular/forms';
import { Angulartics2Module, Angulartics2GoogleAnalytics } from 'angulartics2';
#NgModule({
imports: [ HttpModule, BrowserModule, FormsModule, Angulartics2Module.forRoot([ Angulartics2GoogleAnalytics ])],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
})
export class AppModule { }
use providers to initiate your providers in component.
#Component({
selector: 'yourselector',
styleUrls: [''],
templateUrl: '',
providers: [Angulartics2GoogleAnalytics]
})
Try this.
Your problem should reside in your constructor:
constructor(angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics) {}
you should add e.g public in front of your provider:
constructor(public angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics) {}