I have a simple application and I am getting this error. Cannot GET /. and in the console this.Error in event handler for (unknown): TypeError: Cannot read property 'checked' of null
at Object.SL_BBL_locer (chrome-extension://noaijdpnepcgjemiklgfkcfbkokogabh/content/js/inject/translator.js:1174:41)
at chrome-extension://noaijdpnepcgjemiklgfkcfbkokogabh/content/js/inject/data.js:100:30
I really dont know , what I am doing wrong. Here are my codes.
app.module
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import {AppRoutingModule} from './app-routing.module';
#NgModule({
declarations: [
AppComponent,
DashboardComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
**app.component.html**
<div>
<app-dashboard></app-dashboard>
</div>
dashboard.component
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
dashoboard.component.html
<div> Im here</div>
I assume that your workschedule.module is a feature module. In this case you need to add the CommonModule to the imports property of #NgModule:
#NgModule({
imports: [
CommonModule,
WorkScheduleRoutingModule
],
declarations: [
WorkscheduleComponent
],
providers: []
})
Related
Currently I try to embed a Sidenav using mat-sidenav-container but the content in mat-sidenav-conent is not shown on the Website (using localhost). The Tutorial im watching does exactly the same and shows the "Main" when loaded. Did I miss something?
The Hello World is shown as usual.
app.component.html
<body>
<p>Hello World</p>
<mat-sidenav-container>
<mat-sidenav>Sidenav</mat-sidenav>
<mat-sidenav-content>Main</mat-sidenav-content>
</mat-sidenav-container>
</body>
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'testfile_3';
}
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { MatSidenavModule } from '#angular/material/sidenav';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
MatSidenavModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
hello I am really confused that why it is not working its very simple still i am getting issue.
I am getting blank output & my components has some data which is getting updated if i directly call it with its selector.
here is my code.
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 { HeatSealComponent } from './heat-seal/heat-seal.component';
import { PrinterComponent } from './printer/printer.component';
import { DynamicModule } from 'ng-dynamic-component';
#NgModule({
declarations: [
AppComponent,
HeatSealComponent,
PrinterComponent
],
imports: [
BrowserModule,
AppRoutingModule,
[DynamicModule],
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<ng-container *ngComponentOutlet="dumm"></ng-container>
<ndc-dynamic [ndcDynamicComponent]="dumm"></ndc-dynamic>
app.component.ts
import { element } from 'protractor';
import { Component, OnInit } from '#angular/core';
import { HeatSealComponent } from './heat-seal/heat-seal.component';
import { PrinterComponent } from './printer/printer.component';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
title = 'dynamic-loading';
dumm = HeatSealComponent;
ngOnInit() {
// this.myContent = {name:'nope'};
}
}
The solution is to declare the components in the EntryComponents in the my module file.
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeatSealComponent } from './heat-seal/heat-seal.component';
import { PrinterComponent } from './printer/printer.component';
import { DynamicModule } from 'ng-dynamic-component';
#NgModule({
declarations: [
AppComponent,
HeatSealComponent,
PrinterComponent
],
imports: [
BrowserModule,
AppRoutingModule,
[DynamicModule],
],
providers: [],
bootstrap: [AppComponent],
entryComponents: [HeatSealComponent, PrinterComponent], // ADD THIS
})
export class AppModule { }
in my code two components are present.
1)app component
2)login component
after login it is going to another page.but on refresh it comes to login page.please solve this issue.i am using angular6.please provide code how to solve this problem.
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 { PloginComponent } from './plogin/plogin.component';
import { AfterploginComponent } from './afterplogin/afterplogin.component';
import { RouterModule } from '#angular/router';
import { ReactiveFormsModule } from '#angular/forms';
import { HttpClientModule } from '#angular/common/http';
#NgModule({
declarations: [
AppComponent,
PloginComponent,
AfterploginComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule,
HttpClientModule,
RouterModule.forRoot([
{
path : 'after-login',
component : AfterploginComponent
},
{
path : 'before-login',
component : PloginComponent
}
])
],
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']
})
export class AppComponent implements OnInit{
title = 'login';
constructor(private router :Router){
}
ngOnInit(){
this.router.navigateByUrl('before-login');
}
}
i am beginer to angular6.on refresh how to stay on same page i don't know.
plese tell me the different approaches to solve the problem easily.
Hello I am trying to import http call from '#angular/common/http' and am getting error message that module has no exported member 'http'
Error:[ts] Module '"e:/car/node_modules/#angular/common/http"' has no exported member 'Http'. [2305]
import {
RouterModule
} from '#angular/router';
import {
BrowserModule
} from '#angular/platform-browser';
import {
NgModule
} from '#angular/core';
import {
AppRoutingModule
} from './app-routing.module';
import {
AppComponent
} from './app.component';
import {
HomeComponent
} from './home/home.component';
import {
HttpClientModule
} from '#angular/common/http';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
RouterModule.forRoot([{
path: '',
component: HomeComponent
}])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
import {
Http
} from '#angular/common/http';
import {
Component,
OnInit
} from '#angular/core';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor(private http: Http) {}
products = [];
fetchData = function() {
this.http.get('http://localhost:5555/products').subscribe(
(res: Response) => {
this.products = res.json();
}
);
};
ngOnInit() {
this.fetchData();
}
}
the below code is used for inserting json file which includes the details
HttpClientModule will inject HttpClient service not the Http.
Please use HttpClient in constructor injection in the HomeComponent.
constructor(private http: HttpClient) {}
For Reference created sample stackblitz code.
I've just started learning Angular2 and stuck at a point wherein I need to combine 2 components.
Here's my app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
template: './app.component.html <app-home></app-home>',
styleUrls: ['./app.component.css']
})
export class AppComponent {
mylogo = 'ABC Engineering';
headlist = ["Home", "About", "Portfolio", "Pricing", "Contact"];
technology = ["HTML", "CSS", "JavaScript", "jQuery", "AngularJS", "PHP"];
}
Here's my app.module.ts
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 { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
It gives the output as shown in the image.
It is not showing the output of app.component.html! But it does show the content from 'home.component.html'.
How do I fix it to show the content from 'app.component.html'?
You can either use
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
or
#Component({
selector: 'app-root',
template: '<app-home></app-home>',
styleUrls: ['./app.component.css']
})
but not combine or mix both within a single component.