ngComponentOutlet or ndcDynamicComponent not working with angular 7 - html

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 { }

Related

Cannot use one of my element declared in my own library

I am trying to make a library that I can use a component from but angular says that the element I use is not recognized as an element. I am trying to export the VitalSignLinesListComponent.
The steps I follow are:
declare the component in the library module
export the component
in the library module
export the component in the public API
import the module from the library
place the element in the html
file
receive error
The error I am getting:
ERROR in src/app/app.component.html:2:1 - error NG8001:
'lib-vital-sign-lines-list' is not a known element: 1. If
'lib-vital-sign-lines-list' is an Angular component, then verify that
it is part of this module.
2. If 'lib-vital-sign-lines-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component
to suppress this message.
COMPONENT:
#Component({
selector: 'lib-vital-sign-lines-list',
templateUrl: './vital-sign-lines-list.component.html',
styleUrls: ['./vital-sign-lines-list.component.css']
})
export class VitalSignLinesListComponent implements OnInit {
#Input()
idEdDossier: string;
}
LIBRARY MODULE:
import { NgModule } from '#angular/core';
import { VitalsignsComponent } from './vitalsigns.component';
import { BrowserModule } from '#angular/platform-browser';
import { HttpClientModule } from '#angular/common/http';
import { RouterModule, Routes } from '#angular/router';
import { ModalInputComponent } from './modal-input/modal-input.component';
import { VitalSignLinesListComponent } from './vital-sign-lines-list/vital-sign-lines-list.component';
import { NgSelectModule } from '#ng-select/ng-select';
import { FormsModule } from '#angular/forms';
import { EcareLibModule } from 'ecarelib'
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { ComboBoxComponent } from './combo-box/combo-box.component';
import { ComboBoxPipe } from './combo-box/combo-box.pipe';
import { LogService } from './services/log.service';
import { ClickOutsideDirective } from './vital-sign-lines-list/click-outside.directive';
const appRoutes: Routes = [
{ path: 'modal', component: ModalInputComponent },
{ path: 'vitalSignLinesList', component: VitalSignLinesListComponent }
];
// #dynamic
#NgModule({
declarations: [
VitalsignsComponent,
ModalInputComponent,
VitalSignLinesListComponent,
ComboBoxComponent,
ComboBoxPipe,
ClickOutsideDirective
],
imports: [
BrowserModule,
HttpClientModule,
EcareLibModule.forRoot(),
NgSelectModule,
RouterModule.forRoot(appRoutes, { enableTracing: false }),
FormsModule,
NgbModule
],
providers: [LogService],
exports: [VitalsignsComponent, VitalSignLinesListComponent]
})
export class VitalsignsModule {
}
PUBLIC-API:
export * from './lib/vitalsigns.service';
export * from './lib/vitalsigns.component';
export * from './lib/vitalsigns.module';
export * from './lib/vital-sign-lines-list/vital-sign-lines-list.component';
IMPORT LIBRARY: (VitalsignsModule)
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { NgSelectModule } from '#ng-select/ng-select';
import { FormsModule } from '#angular/forms';
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { HttpClientModule } from '#angular/common/http';
import { RouterModule, Routes } from '#angular/router';
import { EcareLibModule } from 'ecarelib';
import { VitalsignsModule } from 'vitalsigns';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
EcareLibModule.forRoot(),
HttpClientModule,
RouterModule.forRoot([]),
VitalsignsModule,
NgbModule,
NgSelectModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
HTML:
<lib-vital-sign-lines-list [idEdDossier]=idDossier></lib-vital-sign-lines-list>

Why Import export of module is giving error as "BlogpostModule' is declared but its value is never read.ts(6133)" angular 7

I have created component within module and trying to output the result with simple html code in 'app.component.html'
When I hover on the code it shows me this error "BlogpostModule' is declared but its value is never read.ts(6133)"
When I remove the code "". I see the output.
Please help me to fix this blank page.
app.component.html
<div class="container">
<app-header></app-header>
<app-banner></app-banner>
<app-blogpost-featured></app-blogpost-featured>
<app-footer></app-footer>
</div>
<router-outlet></router-outlet>
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { BlogpostModule } from './blogpost/blogpost.module';
import { CmspageModule } from './cmspage/cmspage.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { BannerComponent } from './banner/banner.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
BannerComponent,
PageNotFoundComponent
],
imports: [
BrowserModule,
AppRoutingModule,
CmspageModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
blogpost.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { BlogpostRoutingModule } from './blogpost-routing.module';
import { BlogpostFeaturedComponent } from './blogpost-featured/blogpost-featured.component';
import { BlogpostListComponent } from './blogpost-list/blogpost-list.component';
import { BlogpostDetailComponent } from './blogpost-detail/blogpost-detail.component';
import { BlogpostRecentComponent } from './blogpost-recent/blogpost-recent.component';
import { CategoriesComponent } from './categories/categories.component';
#NgModule({
imports: [
CommonModule,
BlogpostRoutingModule
],
exports: [
BlogpostFeaturedComponent
],
declarations: [BlogpostFeaturedComponent, BlogpostListComponent, BlogpostDetailComponent, BlogpostRecentComponent, CategoriesComponent],
})
export class BlogpostModule { }
You forgot to include BlogpostModule in your app.module.ts.

on refresh how to stay on same route in angular6?

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.

Custom directive is not working for angular 6:

Changing backgound color of the paragraph tag using custom directive not working for angular 6 .
#CustomDirective
import { Directive,ElementRef,HostListener } from '#angular/core';
#Directive({
selector: '[appSteps]'
})
export class StepsDirective {
constructor(private elementref: ElementRef){ }
#HostListener('mouseenter')onmouseenter()
{
this.elementref.nativeElement.style.backgroundColor = 'yellow';
}
#HostListener('mouseleave')onmouseleave()
{
this.elementref.nativeElement.style.backgroundColor = 'null';
}
}
#ModuleCreated : Added my directive here and using this module in appmodule.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import {StepsDirective} from '../steps.directive';
#NgModule({
imports: [
CommonModule
],
declarations: [StepsDirective]
})
export class StartModule { }
#AppComponent.html-Hosting my custom directive ontag
<p appSteps>My Hero Academia</p>
#app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { Signup_Component } from './signup/signup.component';
import { FormsModule } from '#angular/forms';
import { HttpClientModule } from '#angular/common/http';
import { StartModule } from './start/start.module'; *Module created
#NgModule({
declarations: [
AppComponent,
Signup_Component,
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
StartModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
you should first export the module that you declare your directive in then import it any where you want to use
#NgModule({
imports: [
CommonModule
],
exports:[StepsDirective]
declarations: [StepsDirective]
})
export class StartModule { }

Error i n angular. Cannot GET /

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: []
})