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)
Related
I upgraded my app from Angular 11 to 12, and to typescript 4.2.4. When I do ng serve, app fails to compile with the error :
error NG6001: The class 'ChartComponent' is listed in the declarations of the NgModule 'PrototypeModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.
41 , ChartComponent
~~~~~~~~~~~~~~~~~~~~~~~~
src/app/chartPage/Chart/chart.component.ts:46:14
46 export class ChartComponent implements OnInit {
~~~~~~~~~~~~~~~~~~~~~~~~
'ChartComponent' is declared here.
This is the code in the PrototypeModule
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { ChartComponent } from './chartPage/Chart/chart.component';
#NgModule({
declarations: [
ChartComponent
]
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
})
export class ChartPrototypeModule { }
#NgModule({
imports: [ChartPrototypeModule]
, exports: [],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class PrototypeModule { }
The ChartComponent is as follows :
import {Component, Input, ViewEncapsulation, Injectable, OnInit, SimpleChange, NgModule} from '#angular/core';
import { DataLoadService } from '../../services/data-load.service';
#Component({
selector: 'app-chart',
templateUrl: `./chart.component.html`,
styleUrls: ['./chart.component.scss']
, encapsulation: ViewEncapsulation.None
})
#Injectable({
providedIn: 'root'
})
#NgModule({
imports: [SharedModule]
})
export class ChartComponent implements OnInit {
constructor(private data: DataLoadService) {
//constructor code
};
}
I have no leads as to what might be causing the error. How do I fix this?
So, as #Muhammet Can TONBUL has mentioned you're using the component in a wrong way.
First of all your component should look something like this:
#Component({
selector: 'app-chart',
templateUrl: `./chart.component.html`,
styleUrls: ['./chart.component.scss'],
// Use this only if you DON'T want to encapsulate your SCSS
encapsulation: ViewEncapsulation.None
})
export class ChartComponent implements OnInit {
constructor(private data: DataLoadService) { ... };
...
}
The next step is to create a NgModule like you've already done:
#NgModule({
declarations: [
ChartComponent
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
})
export class ChartPrototypeModule { }
So, now you've declared your component and you can use it now but currently only in the other components of the ChartPrototypeModule.
To change this, you need to export your component in the module as well. This would look something like this:
// Introduced an additional array so it is not needed
// to add your components twice
const COMPONENTS = [
ChartComponent
];
#NgModule({
declarations: [
COMPONENTS
],
exports: [
COMPONENTS
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
})
export class ChartPrototypeModule { }
Now you can use your component in each module where you have imported the ChartPrototypeModule.
You can read more about feature modules here.
Note: If you're using the introduced array COMPONENTS to reduce redundancy only add the components to it, which you want to use outside of the module.
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
Here is my requirement
I have two Angular web application App1 & App2. Here in App1 i am creating an token object (it can be a string too).
I want to open by replacing the url from App1 with the URl of App2(No new window should open, it should open the App2 url on same address bar)
Here i have tried the below approach it's not working so far
This code in "App1" by pressing the button i am triggering App2
The Code written in App1
goToNextPage(){
var domain = 'http://localhost:1338/';
// //create popup window
var myPopup = window.open(domain,"_self");
// //periodical message sender
setInterval(function(){
var message = 'current time: ' + (new Date().getTime());
console.log('blog.local: sending message: ' + message);
myPopup.postMessage(message,domain);
//send the message and target URI
},2000);
window.addEventListener('message',function(event) {
if(event.origin !== 'http://localhost:1337/') return;
console.log('received response: ',event.data);
},false);
}
In App2 i am using below code to retrieve the data.
constructor(public cookieService:CookieService){
// //respond to events
window.addEventListener('message',function(event) {
debugger
// //
if(event.origin == 'http://localhost:1337/') return;
console.log('message received: ' + event.data,event);
alert('message received: ' + JSON.stringify(event.data))
// //event.source.postMessage('holla back youngin!',event.origin);
},false);
}
Here in am getting the event.data is undefined
Any idea what could be the solution for this
You can have a server side shared api or pass data on the url with a query string. Things like cookies, session storage and local storage could work if the two apps are running on the same domain.
if you are using Angular 2+ you can use cookies
Step -1 install npm install ngx-cookie-service for both the apps or can install globally
Step 2 .
App1 - > 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';
import {CookieService} from 'ngx-cookie-service'
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [CookieService],
bootstrap: [AppComponent]
})
export class AppModule { }
App1 - app.component.ts
import { Component } from '#angular/core';
import {CookieService} from 'ngx-cookie-service'
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'my-first-project';
constructor(public cookieService:CookieService){
}
goToNextPage(){
this.cookieService.set("my-key","yourkey")
}
}
App2 - 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';
import {CookieService} from 'ngx-cookie-service'
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [CookieService],
bootstrap: [AppComponent]
})
export class AppModule { }
App2 - app.component.ts
import { Component } from '#angular/core';
import {CookieService} from 'ngx-cookie-service'
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'my-second-project';
constructor(public cookieService:CookieService){
alert(this.cookieService.get("my-key"))
}
}
Very simple .. But you can look also other ways like other has mentioned.
I can't figure out how to get directives working in my app. I want to apply a directive to a component, this is it in it's simplest form.
import {Directive, HostBinding} from '#angular/core';
#Directive({
selector: '[directiveSelector]'
})
export class FirstDirective {
#HostBinding() innerText = 'not working';
}
...
import {Component} from '#angular/core';
#Component({
selector: 'home',
template: `
<h1 directiveSelector>Test</h1>`
})
export class HomeComponent {
}
...
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { HomeModule } from "./home/home.module";
import { FirstDirective } from './directives/first.directive';
#NgModule({
imports: [
BrowserModule,
HomeModule
],
declarations: [
AppComponent,
FirstDirective
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Does anyone know what I am missing here? Home renders fine, and is a component wrapped in a module. Also, I cannot get a debugger or alert to fire off in the directive - may be a problem with the template binding?
Declare the FirstDirective in your HomeModule, that should take care of it. Here I assume that your HomeComponent is part of homemodule.
Tried leaving it out myself from a module, and it produced no error but also didn't work.
I have an app module and single component application (made to demonstrate my problem), and getting following error:
Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: No provider for UserService! ; Zone: <root> ; Task: Promise.then ; Value:
code for AppModule:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { UserService } from './components/common/userservice';
#NgModule({
imports: [
BrowserModule,
],
declarations: [
AppComponent
],
providers: [UserService],
bootstrap: [AppComponent],
entryComponents: []
})
export class AppModule {
}
Code for my AppComponent:
import { Component} from '#angular/core';
import { UserService} from './userservice';
#Component({
selector: 'App',
template: `<h3>App component</h3>
user name: {{userName}}
`,
providers: []
})
export class AppComponent {
userName: string;
constructor(userService: UserService) {
this.userName = userService.userName;
}
}
My UserService Code:
import { Injectable, EventEmitter } from '#angular/core';
#Injectable()
export class UserService {
obs$: EventEmitter<any> = new EventEmitter<any>()
userName = 'Sherlock Holmes';
}
Now if i add UserService as provider to AppComponent, it will solve the issue. but i dont want to, because i want only one instance of my service in whole application. Even in subModules(feature modules).
according to my understanding, if i add service as provider on module level, then i can just inject it to any component under module.
here is am example i was watching.
Plunker
am using angular2 version: "2.0.0"
The import path is wrong: you use /Common in one and /common right below.
Visual Studio and WebStorm will not show IntelliSense errors for case-sensitivity of paths.
Furthermore, if using Angular 5's AoT template compilation, you can get a "This component is not part of a module" error, even though it is, because the import path is incorrect. Without AoT this will work, so you'll get a surprise when converting to AoT.
Remove your service: UserService from app.module.ts, then add in component:
#Component({
selector: 'App',
template: `<h3>App component</h3>
user name: {{userName}}
`,
providers: [UserService]
})
Hope this will help you.
An additional reason for getting this error - I duplicated a service to a different directory and was updating each file individually. Even though the first file still existed I got this error until I updated app.module.ts.