Full error shows up in the app.component.html file where I try to use the component as follows:
<ngx-slider [(value)]="value" [options]="options"></ngx-slider>
The full error is:
But I've done exactly what the guide says, and it's still not working:
I installed the library through the command line command: npm install --save #angular-slider/ngx-slider and it shows up in the package.json as:
I imported it in app.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { NgxSliderModule } from '#angular-slider/ngx-slider';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxSliderModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I've imported it into app.component.ts:
import { Component } from '#angular/core';
import { Options } from '#angular-slider/ngx-slider';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
value: number = 100;
options: Options = {
floor: 0,
ceil: 200
};
}
And finally added it to app.component.html:
<ngx-slider [(value)]="value" [options]="options"></ngx-slider>
So why is it not working?
Versions for reference:
Node version: 14.17.1
NPM version: 6.14.13
Angular & Angular CLI version: 13
Related
I am trying add google chart in angular app, I have done the following step
npm install angular-google-charts --save
After that I have imported in to app module.
import { GoogleChartsModule } from 'angular-google-charts';
#NgModule({
imports: [
GoogleChartsModule
],
})
export class AppModule {}
Calling in myComponent.html
<google-chart #chart [title]="title" [type]="type" [data]="data [columnNames]="columnNames" [options]="options" [width]="width [height]="height">
</google-chart>
In my component.ts
import { Component, ElementRef, OnInit, ViewChild } from '#angular/core';
import { GoogleChartComponent } from 'angular-google-charts';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
title = 'googlechart';
type = 'PieChart';
data = [
['Name1', 5.0],
['Name2', 36.8],
['Name3', 42.8],
['Name4', 18.5],
['Name5', 16.2]
];
columnNames = ['Name', 'Percentage'];
options = {
};
width = 500;
height = 300;
constructor(){}
ngOnInit() {}
}
Error :
error NG8001: 'google-chart' is not a known element:
1. If 'google-chart' is an Angular component, then verify that it is part of this module.
2. If 'google-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
Component was exported on the library.
https://github.com/FERNman/angular-google-charts/blob/master/libs/angular-google-charts/src/lib/google-charts.module.ts#L13
You can use schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
import { GoogleChartsModule } from 'angular-google-charts';
#NgModule({
imports: [
GoogleChartsModule
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule {}
This will fix the issue.
I managed to solve the problem by putting it in shared.module.ts.
And not in the AppModule as indicated.
I am looking at learning Angular 8 with the Angular CLI.
I have added two new components to a core module which i have then imported to the app module.
When I try to render the components in my app html the 'not known element' error is thrown in the console.
I am unsure as to why?
Here is my app.module.ts
import { BrowserModule } from "#angular/platform-browser";
import { NgModule } from "#angular/core";
import { AppComponent } from "./app.component";
import { NoopAnimationsModule } from "#angular/platform-browser/animations";
import { CoreModule } from "./core/core.module";
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule, NoopAnimationsModule, CoreModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
My core.module.ts
import { NgModule } from "#angular/core";
import { CommonModule } from "#angular/common";
import { InputComponent } from "../input/input.component";
import { GraphComponent } from "../graph/graph.component";
#NgModule({
declarations: [InputComponent, GraphComponent],
imports: [CommonModule],
exports: [InputComponent, GraphComponent]
})
export class CoreModule {}
app.component.html
<div>
<InputComponent></InputComponent>
<GraphComponent></GraphComponent>
</div>
And an example of one of the custom components:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-input',
templateUrl: './input.component.html',
styleUrls: ['./input.component.scss']
})
export class InputComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
I just realised that I am not referring to the components with the correct selectors!
I should be using: app-input & app-graph in the app.component.html.
I'm practicing angular, but received this error while compiling my code:
Module not found: Error: Can't resolve './app.component.css' in 'D:\hello-world-app\src\app'
i ｢wdm｣: Failed to compile.
My app.component.html
<h1>Angular</h1>
<courses></courses>
My courses.component.ts
// tslint:disable-next-line: import-spacing
import{Component} from '#angular/core';
#Component({
selector: 'courses', //<courses>
template: '<h2>Courses</h2>'
})
export class CoursesComponent {
}
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 = 'hello-world-app';
}
My app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { CoursesComponent } from './courses.component';
#NgModule({
declarations: [
AppComponent,
CoursesComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Angular is failing to find (resolve) the file, just as the error states. In order to fix the error, you need to either add the file, or delete the line styleUrls: ['./app.component.css']
If you do not want to avoid the file reference and are using angular cli (if you're not, you probably should be), you can use --inlineStyle=true when generating a component. Granted, if you're using angular cli, the css file should have been created when the component was generated.
Odds are either you copy pasted some stuff, or mistakenly deleted that file. Either way, Angular will always complain when it can't find something you're referencing. (Much like pretty much every other programming framework/system/language)
I've just installed a fresh install of Angular 2. But when I try to inject a service called TestService into a login component like this:
LoginComponent:
import {Component, Inject} from '#angular/core';
#Component({
selector: 'app-login',
template: `
{{ test.test }}
`,
styles: []
})
export class LoginComponent {
constructor(#Inject('test') private test){};
}
App
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';
import { LoginComponent } from './login/login.component';
import {TestService} from "./test.service";
#NgModule({
declarations: [
AppComponent,
LoginComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [{provide: 'test', useClass:TestService}],
bootstrap: [AppComponent]
})
export class AppModule { }
TestService
import { Injectable } from '#angular/core';
#Injectable()
export class TestService {
test = 'test';
constructor() { }
}
I receive an error:
error_handler.js:47EXCEPTION: Error in ./AppComponent class AppComponent - inline template:1:25 caused by: Cannot read property 'name' of undefined
What am I doing wrong?
On view you should be using Elvis Operator. Just to make sure test property will ask on test. Currently when initial change detection occurs test.test tries to evaluate binding on view. Since initially test is undefined test.test fails.
{{ test?.test }}
I'm trying to follow the angualrJS 2.0 tutorial on calling another component inside another one. However I'm getting an error saying that it is not a known element on the <main-footer></main-footer> selector. What am i doing wrong?
//app.component.ts
import { Component } from '#angular/core';
import { ROUTER_DIRECTIVES } from '#angular/router';
import { FooterComponent } from './footer.component';
#Component({
selector: 'my-app',
// use templateurl for template files
template: `
<h1>My First Angular App 22</h1>
<main-footer></main-footer>
`,
directives: [FooterComponent]
})
export class AppComponent {
}
// footer.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'main-footer',
template: `
<h2>The footer</h2>
`,
})
export class FooterComponent{
}
EDIT
So I got it working, by declaring and importing the file in app.module.ts as well as the app.component.ts file Thanks to the help from #Chang I did not see this in the tutorials on AngualrJS 2.0
// app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { FooterComponent } from './footer.component';
#NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent, FooterComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }
can try to declare "FooterComponent" in your app.modules ?
#NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
InMemoryWebApiModule.forRoot(InMemoryDataService),
routing
],
declarations: [
AppComponent,
FooterComponent
],
providers: [
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}