Can not use components from imported module - module

I have a simple task I'm trying to accomplish. I've created a SharedModule with a component called InputComponent. I want to use this component in SigninComponent which is part of the AuthModule. I export the InputComponent from SharedModule and import the SharedModule into the AuthModule. However, when I use <app-input>, I get the following error:
src/app/auth/signin/signin.component.html:3:5 - error NG8001: 'app-input' is not a known element:
1. If 'app-input' is an Angular component, then verify that it is part of this module.
shared.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { InputComponent } from './input/input.component';
#NgModule({
declarations: [
InputComponent
],
imports: [
CommonModule
],
exports: [
InputComponent
]
})
export class SharedModule { }
input.component.ts
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'app-input',
templateUrl: './input.component.html',
styleUrls: ['./input.component.css']
})
export class InputComponent implements OnInit {
#Input() label?:string;
#Input() inputType?:string;
constructor() { }
ngOnInit(): void {
}
}
auth.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { SharedModule } from '../shared/shared.module';
import { SigninComponent } from './signin/signin.component';
import { SignupComponent } from './signup/signup.component';
import { SignoutComponent } from './signout/signout.component';
#NgModule({
declarations: [
SigninComponent,
SignupComponent,
SignoutComponent
],
imports: [
CommonModule,
SharedModule
]
})
export class AuthModule { }
signin.component.html
<h1>Sign In</h1>
<form>
<app-input inputType="email" label="Email Address"></app-input>
</form>
Any help would be greatly appreciated. I feel like I'm missing something small and just can't figure it out.
Extra note
I have other components within the same AuthModule (SignoutComponent for example), that will throw the same error if I try to use <app-signout>

Posting here just incase someone runs into something similar.
Due to how I had routing setup, I was eagerly loading my Auth components. (not lazy loading) In order to get this to work, I needed to import my AuthModule to my AppModule.

Related

Can't resolved 'rxjs/Rx' in tutorial example

The angular-cli version is 6.0.8 and the rxjs version is 6.3.3.
I'm following a tutorial and getting the error: Can't resolve 'rxjs/Rx'. How do I go about resolving the error? Is there a way that I can use a previous version of the rxJS?
Here is the code:
service.ts
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { Observable } from 'rxjs';
#Injectable()
export class Service {
constructor(private _http: HttpClient) {
}
getPosts(): Observable<any> {
return
this._http.get("http://jsonplaceholder.typicode.com/posts");
}
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { HttpClientModule } from '#angular/common/http';
import { Service } from './service';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [HttpClientModule, Service],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component, OnInit } from '#angular/core';
import { Service } from './service';
import 'rxjs/Rx';
#Component({
selector: 'app-root',
template: `
<ul>
<li *ngFor="let post of _posts">
<b>{{post.title}}</b> {{post.body}}
</li>
</ul>
<div *ngIf="_error">
Error: {{_error.status}}:{{_error.statusText}}
</div>
`,
styles: ['div {font-size:20px;padding:5px;background-
color:red;color:white}']
})
export class AppComponent implements OnInit {
_posts = [];
_error;
constructor(private _service: Service) {}
ngOnInit() {
this._service.getPosts()
.subscribe(
response => {
this._posts = response;
},
error => {
this._error = error;
}
);
}
}
As you are using Rxjs V6 and Above. Rxjs made the path based import optional.
import 'rxjs/Rx';
Why you need this import?. Not seeing RX is used in your component. Please remove and try if not required.
Make sure that rxjs-compat library also included in pakage.json file

Ionic 4 using components on multiple pages

Starting from a clean ionic 4 project (using ionic start --type=angular and the template blank), I'm trying to create a custom angular component that can be used on multiple pages.
However if I use ionic generate component and try too use the generated component test in homepage.html by inserting <app-test></app-test> I get the error:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
'app-test' is not a known element:
1. If 'app-test' is an Angular component, then verify that it is part of this module.
2. If 'app-test' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. ("="_blank" rel="noopener" href="https://ionicframework.com/docs">docs will be your guide.
ERROR Error: Uncaught (in promise): Error: Template parse errors:
'app-test' is not a known element:
1. If 'app-test' is an Angular component, then verify that it is part of this module.
2. If 'app-test' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. ("="_blank" rel="noopener" href="https://ionicframework.com/docs">docs will be your guide.
Here is what my files look like: app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouteReuseStrategy } from '#angular/router';
import { IonicModule, IonicRouteStrategy } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { TestComponent } from './test/test.component';
#NgModule({
declarations: [AppComponent, TestComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: './home/home.module#HomePageModule' },
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
test.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
home.page.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
}
home.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { IonicModule } from '#ionic/angular';
import { FormsModule } from '#angular/forms';
import { RouterModule } from '#angular/router';
import { HomePage } from './home.page';
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild([
{
path: '',
component: HomePage
}
])
],
declarations: [HomePage]
})
export class HomePageModule {}
home.page.html
<ion-header>
<ion-toolbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
The world is your oyster.
<p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs">docs</a> will be your guide.</p>
<app-test></app-test>
</ion-content>
And the folder structure as an image
I have tried out several things by now and one work around I found is creating a src/app/shared.module.ts file and declaring and exporting the TestComponent there, and then importing the SharedModule in every page I want to use the component.
However I feel like this work around is not ideal, and there is something I am missing in how to do it cleaner. Any ideas?
Your shared module workaround is actually a good practice in angular and you should stick with that.
For reference: https://angular.io/guide/sharing-ngmodules

How to use shared module in all components in angular 4?

I'm using Angular 4 with material. And I have main two components...
1) Login and 2) Dashboard
There are lazy loading components in dashboard like profile , employee etc...
I want to set header and for that I have used <mat-toolbar>
<mat-toolbar color="primary">
<mat-toolbar-row>
<span>My application</span>
<span class="example-spacer"></span>
<button mat-button>Logout</button>
</mat-toolbar-row>
</mat-toolbar>
and component file is this .
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
To use this component in all dashboard I have create one shared module file.
In src/app/shared/modules/header/header.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { HeaderComponent } from
'../../../shared/components/header/header.component';
import { MaterialModule } from '../../../material.module';
#NgModule({
imports: [
CommonModule,
MaterialModule
],
declarations: [HeaderComponent],
exports:[HeaderComponent]
})
export class HeaderModule { }
I have import component in module file and put in exports so, I think I'm able to use header component.
Now I'm trying to use it in dashboard component.
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { DashboardComponent } from './dashboard.component';
import { DashboardRoutingModule } from './dashboard-routing.module';
import { MaterialModule } from '../material.module';
import { HeaderModule } from '../shared/modules/header/header.module';
#NgModule({
imports: [
CommonModule,
DashboardRoutingModule,
MaterialModule,
HeaderModule
],
declarations: [DashboardComponent]
})
export class DashboardModule { }
I have also import module and set header component in entryComponetnt in app.module.ts file also...
app.module.ts
import { HeaderModule } from './shared/modules/header/header.module';
imports: [
FormsModule,
HeaderModule
],
entryComponents:[HeaderComponent]
The issue is I'm getting header when I go dashboard page. And also I'm not getting any error in console.
I just add my shared component's selector value in dashboard's html file.
<app-header></app-header>
It works for me!

Angular 5: 'flash-messages' is not a known element

I'm trying to use the Angular flash message module as shown in this post:
https://www.npmjs.com/package/angular-flash-message
However, I get this error:
> compiler.js:485 Uncaught Error: Template parse errors:
> 'flash-messages' is not a known element:
>
> 1. If 'flash-messages' is an Angular component, then verify that it is part of this module.
> 2. If 'flash-messages' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component
> to suppress this message. ("<app-navbar></app-navbar><div
> class="container">[ERROR
> ->]<flash-messages></flash-messages><router-outlet></router-outlet> </div>"): ng:///AppModule/AppComponent.html#2:8
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { Routes, RouterModule } from '#angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { ProfileComponent } from './components/profile/profile.component';
import { RegisterComponent } from './components/register/register.component';
import { ValidateService } from './services/validate.service';
import {FlashMessageModule} from 'angular-flash-message'
#NgModule({
declarations: [
AppComponent,
NavbarComponent,
LoginComponent,
HomeComponent,
DashboardComponent,
ProfileComponent,
RegisterComponent
],
imports: [
BrowserModule,
AppRoutingModule,
RouterModule,
FormsModule,
FlashMessageModule
],
providers: [ValidateService],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<app-navbar></app-navbar>
<div class="container">
<flash-messages></flash-messages>
<router-outlet></router-outlet>
</div>
registration.component.ts
import { Component, OnInit } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { ValidateService } from '../../services/validate.service';
import { FlashMessage } from 'angular-flash-message';
#Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
name: String;
username: String;
email: String;
password: String;
constructor(
private validateService: ValidateService,
private flashMessage: FlashMessage
) { }
ngOnInit() {
}
onRegisterSubmit(){
const user = {
name: this.name,
username: this.username,
email: this.email,
password: this.password
}
//Required fields
if(!this.validateService.validateRegister(user)){
//fill in all fields
this.flashMessage.info("Incorrect!")
return false;
}
if(!this.validateService.validateEmail(user.email)){
//email incorrect
return false;
}
}
}
I'm trying to display a flash message after validating the user's input.
I'm new to Angular and MEAN apps and this is actually an app shown in a tutorial using Angular 2.
Can someone help me out? Thanks!
I'm not sure if the
import {FlashMessageModule} from 'angular-flash-message'
works properly. I would suggest using
import {FlashMessageModule} from 'angular2-flash-messages'`.
Their documentation is here: https://www.npmjs.com/package/angular2-flash-messages
I went through the angular-flash messages docs, angular2-flash-message docs (without the 's' at the end), and also angular2-flash-messages (with the 's' at the end), and the only one that worked for me was the last one.
Also, in addition to your imports, I've also found that it helps to make sure you have #angular/common installed, just in case:
npm install #angular/common --save
Hope this helps
ooh i think it shouldn't be
ERRONEOUS
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(appRoutes),
AngularFireModule.initializeApp(fireBase),
FlashMessagesModule
],
it should be
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(appRoutes),
AngularFireModule.initializeApp(fireBase),
FlashMessagesModule.forRoot()
],
I too had the same problem and solved it by adding FlashMessageModule.forRoot() in my imports

Angular 2 HTTP GET request from Github API

I am new to Angular 2. As for now I am trying to fetch user data from Github API. I have one component (user.component) and here is its code:
import {Component} from '#angular/core';
import {userService} from './user.service';
import'rxjs/add/operator/map';
#Component({
selector: 'users',
template: `
<h2>Users</h2>
`,
providers: [userService]
})
export class UserComponent{
constructor(private _userService: userService)
{
this._userService.getUser().subscribe( user => {console.log(user)})
}
}
The code of user.Service.ts:
import {Injectable} from '#angular/core'
import {Http, Headers} from '#angular/http'
import'rxjs/add/operator/map';
#Injectable()
export class userService{
private username : string;
constructor (private _http:Http){
console.log("Github Service is ready...")
this.username = "example"
}
getUser(){
return this._http.get("http://api.github.com/users/"+example)
.map(res => res.json)
}
}
And this is app.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { UserComponent } from './user.component'
import {HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
#NgModule({
imports: [ BrowserModule, HttpModule ],
declarations: [ AppComponent,UserComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
And finally here is app.component.ts:
import { Component } from '#angular/core';
import { UserService } from './user.service'
#Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1><users></users>`,
providers: [CourseService]
})
export class AppComponent { name = 'John'; }
You should add providers: [CourseService] to the module, not the app component.
#NgModule({
imports: [ BrowserModule, HttpModule ],
declarations: [ AppComponent,UserComponent ],
bootstrap: [ AppComponent ],
providers: [ CourseService ]
})
and remove it from the #Component decorator.
Edit: I'm glad you got this working, but the commenter is right - this was not a correct solution, I was mistaken.
example is not a local variable inside getUser()
I think you meant to write is:
getUser(){
return this._http.get("http://api.github.com/users/" + this.username)
.map(res => res.json)
}