import { FormBuilder} from '#angular/forms';
This works:
constructor(
) { }
But this does not work:
constructor(
private formBuilder: FormBuilder
) { }
I get a blank white screen when doing ionic serve
Try adding ReactiveForms as mentioned here to your app module:
https://angular.io/guide/reactive-forms#step-1-registering-the-reactive-forms-module
import { ReactiveFormsModule } from '#angular/forms';
#NgModule({
imports: [
// other imports ...
ReactiveFormsModule
],
})
export class AppModule { }
Related
I am developing nativescript-angular app that contains dataform in a module and calling this module using in lazy loading technique. Life is beautiful in Android, but the application exits immediately when I open this module in ios wihtout any error log!
The code is very simple and forward, I can't see where is the problem!
test.component.ts
import { Component, OnInit } from "#angular/core";
import { ActivatedRoute } from "#angular/router";
import { RadDataForm, DataFormEventData } from "nativescript-ui-dataform";
import { UserAddress } from "../../shared/data-services/address";
#Component({
selector: "test",
moduleId: module.id,
templateUrl: "./test.component.html",
styleUrls:["./test.component.css"]
})
export class TestComponent implements OnInit {
private _userAddress: UserAddress;
constructor() {
}
ngOnInit() {
this._userAddress = new UserAddress();
}
get userAddress(): UserAddress {
return this._userAddress;
}
}
test.component.html
<ActionBar class="action-bar">
<NavigationButton [nsRouterLink]="['../../home']" android.systemIcon="ic_menu_back"></NavigationButton>
<Label class="action-bar-title" text="Test"></Label>
</ActionBar>
<ScrollView tkExampleTitle tkToggleNavButton>
<StackLayout>
<RadDataForm tkExampleTitle tkToggleNavButton [source]="userAddress">
</RadDataForm>
</StackLayout>
</ScrollView>
Routing of this module
signup-routing.module.ts
import { NgModule } from "#angular/core";
import { Routes } from "#angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { ItemsComponent } from "./test/test.component";
export const COMPONENTS = [ItemsComponent ];
const routes: Routes = [
{ path: "", redirectTo: "testInfo" },
{ path: "testInfo", component: testComponent }
];
#NgModule({
imports: [NativeScriptRouterModule.forChild(routes)], // set the lazy loaded routes using forChild
exports: [NativeScriptRouterModule]
})
export class SignupRoutingModule {}
Then we have
signup.module.ts
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { COMPONENTS, SignupRoutingModule } from "./signup-routing.module";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptUIDataFormModule } from "nativescript-ui-dataform/angular";
#NgModule({
imports: [
NativeScriptCommonModule, // for rednering actionbar with lazy laoding
NativeScriptFormsModule,
SignupRoutingModule,
NativeScriptUIDataFormModule
],
declarations: [
...COMPONENTS
],
// providers: [SignupService],
schemas: [
NO_ERRORS_SCHEMA
]
})
/*
Pass your application module to the bootstrapModule function located in main.ts to start your app
*/
export class SignupModule { }
And the module is called using lazy loading in the basic routing file like this:
{ path: "signup", loadChildren: "~/app/signup/signup.module#SignupModule", outlet: "homeTab" }
Help is appreciated!
CODE ON GitHub
https://github.com/lighttiger/lazy
I created a custom pipe module and imported it in my custom module,but it's not working
limit.pipe
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'limitTo'
})
export class RcycLimitPipe implements PipeTransform {
transform(value: any, args?: any): any {
let limit = args ? parseInt(args, 10) : 10;
let trail = '...';
return value.length > limit ? value.substring(0, limit) + trail : value;
}
}
limit.pipe.module
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RcycLimitPipe } from './rcyc-limit.pipe';
#NgModule({
imports: [
CommonModule
],
declarations: [
RcycLimitPipe
],
exports: [
RcycLimitPipe
]
})
export class RcycLimitPipeModule { }
then I imported it in my custom modules.
import { NgModule } from '#angular/core';
import { ChannelsComponent } from './rcyc-channels.component';
import { routing } from './rcyc-channels.routing';
import { CommonModule } from '#angular/common';
import { NgxCarouselModule } from "ngx-carousel";
import { RcycChannelsService } from "./rcyc-channels.service";
import { RcycLimitPipeModule } from "../../rcyc-pipes/rcyc-limit/rcyc-limit.module";
import { RcycDefaultImagePipeModule } from '../../rcyc-pipes/rcyc-default-image/rcyc-default-image.module';
#NgModule({
imports: [routing,CommonModule,NgxCarouselModule,RcycLimitPipeModule,RcycDefaultImagePipeModule],
declarations: [ChannelsComponent],
providers: [RcycChannelsService]
})
export class ChannelsModule {}
but it still showing an error by telling that 'the limit and the 'defaultimage' could not be found.
this is my error
what the issue is here?please help me
Do you really need a separate module for your pipe? After all, you are really just importing NgModule, CommonModule (which you also import in your main module) and RcycLimitPipe.
You could simply remove limit.pipe.module altogether, import RcycLimitPipe in your main module and add it to its declarations.
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!
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
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)
}