Im trying to show a push notification on button click.
Im stuck with a angular promise error which says:
Cannot read property 'then' of undefined
Full error stack trace:
Uncaught Error: Error in ./AppComponent class AppComponent - inline template:17:2 caused by: Cannot read property 'then' of undefined
TypeError: Cannot read property 'then' of undefined
at PushNotificationComponent.show (notification.component.js:42)
at DebugAppView.View_AppComponent0.handleEvent_16 (/AppModule/AppComponent/component.ngfactory.js:129)
at DebugAppView.eventHandler (view.js:664)
at HTMLButtonElement.COMPONENT_REGEX (dom_renderer.js:489)
at ZoneDelegate.invokeTask (zone.js:367)
at Object.NgZone.forkInnerZoneWithAngularBehavior.inner.inner.fork.onInvokeTask (ng_zone.js:264)
at ZoneDelegate.invokeTask (zone.js:366)
at Zone.runTask (zone.js:166)
at HTMLButtonElement.cancelFn.invoke (zone.js:420)
I am using the the github link :
https://github.com/alexcastillo/ng2-notifications/blob/master/src/app/app.component.html
My app.module.ts is as:
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 { PushNotificationComponent } from 'ng2-notifications/src/app/components/notification.component';
#NgModule({
declarations: [
AppComponent,
PushNotificationComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '#angular/core';
import {
Directive,
EventEmitter,
OnInit,
OnChanges,
OnDestroy,
Input,
Output
} from '#angular/core';
import '../style/app.scss';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
#Directive({
selector: 'push-notification'
})
export class AppComponent {
title: string = 'ng2-notifications';
description: string = 'Angular 2 Component for Native Push Notifications';
constructor() {
}
}
app.component.html
<header>
<h1 class="title">{{ title }}</h1>
</header>
<main>
<h2>{{ description }}</h2>
<img src="img/demo.gif">
<push-notification #notification title="ng2-notifications" body="Native Push Notifications in Angular 2" icon="<some_ulr>" closeDelay="2000" (load)="notification.show()"> //Problem Here!!
</push-notification>
<button (click)="notification.show()">Show Notification</button>
</main>
If i remove the line: (load)="notification.show() it seems fine, but it doesnt serve any purpose without a notification after button click!
Error is here:
Remove this code block from app.component.ts
#Directive({
selector: 'push-notification'
})
Note :
https://github.com/alexcastillo/ng2-notifications is coded with beta
version of angular, so find the newer version or different plugin.
Given Doc is also regarding to the beta version of angular
Related
I have got a problem with String Interpolation.
So I try to make string interpolation according to what the teacher does in the course of Angular
i am doing.
I have a server.component.ts file which is exactly what teacher does in the course.
import { Component } from "#angular/core";
#Component ({
selector: 'app-servers',
templateUrl: './server.component.html'
})
export class ServerComponent {
serverId = 10;
serverStatus = 'offline'
}
And then I try to put it on the server.component.html so it appeared on the browser:
<p>Server with ID {{ serverId }} is {{ serverStatus }}</p>
I have checked multiple times and it seems like I have exactly the same setting that the teacher showed in the course. He has it written in the browser, and I do not.
Here are my other "settings"
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
styles: [`
h1{
color: red
}
`]
})
export class AppComponent {
name = 'Wojtek';
}
**app.component.html
**
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Hellloo!!!!</h1>
<input type="text">
<p>{{ name }}</p>
<hr>
<app-success-alert></app-success-alert>
<app-warning-alert></app-warning-alert>
</div>
</div>
</div>
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { ServerComponent } from './server/server.component';
import { ServersComponent } from './servers/servers.component';
import { SuccessAlertComponent } from './success-alert/success-alert.component';
import { WarningAlertComponent } from './warning-alert/warning-alert.component';
#NgModule({
declarations: [
AppComponent,
ServerComponent,
ServersComponent,
SuccessAlertComponent,
WarningAlertComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Also the thing is with implements OnInit in the export class line, in the course it works, however in my VSCode it does not really want to, any ideas?
Please it you may help me I would be really grateful!
I have tried to watch multiple youtube videos, also I came back to the course to rewatch it
It looks like your are missing the server-component in your app-component template. Put <app-servers></app-servers> somewhere in your app-component template.
I've just started learning angular 4. This is a simple code that I'm trying to implement in Visual Studio Code, but keep getting this error.
Uncaught Error: Template parse errors:
Can't bind to 'ngForFor' since it isn't a known property of 'li'. ("
</ul>
<ul>
<li [ERROR ->]*ngFor="let hobby for hobbies">{{hobby}}</li>
</ul>"): ng:///AppModule/UserComponent.html#6:6
Property binding ngForFor not used by any directive on an embedded template.
Make sure that the property name is spelled correctly and all directives are
listed in the "#NgModule.declarations".("
</ul>
<ul>
[ERROR ->]<li *ngFor="let hobby for hobbies">{{hobby}}</li>
</ul>"): ng:///AppModule/UserComponent.html#6:2
I tried previous solutions of adding the CommonModule to the app.module file. But it hasn't solved the issue.I cannot figure out what is wrong.
app.component.ts:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
app.module.ts:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { UserComponent } from './components/user/user.component';
import {CommonModule} from '#angular/common';
#NgModule({
declarations: [
AppComponent,
UserComponent
],
imports: [
BrowserModule,CommonModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
user.component.ts:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
name:string;
age:number;
address: Address;
hobbies:string[];
constructor() {
console.log('constructor ran ...');
}
ngOnInit() {
console.log('ngOnInit ran ...');
this.name='Raul';
this.age=22;
this.address= {
street:'abc',
city:'xyz',
country: 'jkl'
}
this.hobbies=['reading','playing','swimming'];
}
}
interface Address{
street:string,
city:string,
country:string
}
user.component.html:
<h1>{{name}}</h1>
<ul>
<li>Age:{{age}}</li>
<li>Address:{{address.street}}, {{address.city}},{{address.country}}</li>
</ul>
<ul>
<li *ngFor="let hobby for hobbies">{{hobby}}</li>
</ul>
should be of instead of for inside the ngFor
ngFor="let hobby of hobbies"
I'm following this Angular 4 tutorial:
https://youtu.be/z6qFqlwUxkQ?t=16m33s
And in that part of the video he has the following code:
View:
<input type="text" [(ngModel)]="name">
<p>{{ name }}</p>
Controller:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = '';
}
It works for him but not for me, I'm not getting any compilation errors but the page is blank, I don't see an input field at all. Any idea why? I have the exact same code and am using Angular 4 also..
EDIT:
here's the contents of app.modue.ts:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Can you post code for app-module.ts
I suspect you are missing something inside #ngModule
Compare that to the video...
I suspect it's one of FormsModule or ReactiveFormsModule
haven't watched video... You'll probably be using FormsModule if it's a Hello World type scenario.
import {FormsModule, ReactiveFormsModule} from '#angular/forms';
NgModule({
....
imports: [ ...,
FormsModule,
ReactiveFormsModule]
....
})
export class AppModule {
}
I am trying to use angulartics2 with my application.
I have configured correctly as it mentioned in the document.
Note: There is no place it is mentioned to add the provider as a dependency..
When i try to run the application, it shows the error as below.
EXCEPTION: No provider for Angulartics2GoogleAnalytics! Error: DI
Error
at NoProviderError.ZoneAwareError (zone.js:811)
at NoProviderError.BaseError [as constructor] (core.umd.js:1186)
at NoProviderError.AbstractProviderError [as constructor] (core.umd.js:1371)
at new NoProviderError (core.umd.js:1411)
at ReflectiveInjector_.throwOrNull (core.umd.js:3394)
at ReflectiveInjector.getByKeyDefault (core.umd.js:3433)
at ReflectiveInjector.getByKey (core.umd.js:3380)
at ReflectiveInjector.get (core.umd.js:3140)
at AppModuleInjector.NgModuleInjector.get (core.umd.js:8996)
at CompiledTemplate.proxyViewClass.AppView.injectorGet (core.umd.js:12465)
at CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (core.umd.js:12845)
at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal
(/AppModule/AppComponent/host.ngfactory.js:15)
at CompiledTemplate.proxyViewClass.AppView.createHostView (core.umd.js:12421)
at CompiledTemplate.proxyViewClass.DebugAppView.createHostView (core.umd.js:12829)
at ComponentFactory.create (core.umd.js:7766) 1: https://github.com/angulartics/angulartics2
App.component.ts
import { Component } from '#angular/core';
import { Angulartics2GoogleAnalytics } from 'angulartics2';
#Component({
selector: 'my-app',
moduleId: module.id,
templateUrl: `./app.component.html`,
styleUrls: ['/app.componenet.css']
})
export class AppComponent {
title = 'Angular2 google analytics';
constructor(angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics) {}
}
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { HttpModule } from '#angular/http';
import { FormsModule } from '#angular/forms';
import { Angulartics2Module, Angulartics2GoogleAnalytics } from 'angulartics2';
#NgModule({
imports: [ HttpModule, BrowserModule, FormsModule, Angulartics2Module.forRoot([ Angulartics2GoogleAnalytics ])],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
})
export class AppModule { }
use providers to initiate your providers in component.
#Component({
selector: 'yourselector',
styleUrls: [''],
templateUrl: '',
providers: [Angulartics2GoogleAnalytics]
})
Try this.
Your problem should reside in your constructor:
constructor(angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics) {}
you should add e.g public in front of your provider:
constructor(public angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics) {}
I saw earlier that Angular2 launched the RC5 so I decided to update one of my test apps to see the changes and how to adjust. This app is using Material2, I also updated it to Alpha 7.2, but I'm getting this error when trying to use the md-button component
"Template parse errors: Can't bind to 'md-ripple-trigger' since it
isn't a known property of 'div'. ("*ngIf="isRippleEnabled()"
class="md-button-ripple"
[class.md-button-ripple-round]="isRoundButton()" [ERROR
->][md-ripple-trigger]="getHostElement()" [md-ripple-color]="isRoundButton() ? 'rgba(255, 255, 255, 0.2)"):
MdButton#0:180 Can't bind to 'md-ripple-color' since it isn't a known
property of 'div'. ("ton-ripple"
[class.md-button-ripple-round]="isRoundButton()"
[md-ripple-trigger]="getHostElement()" [ERROR
->][md-ripple-color]="isRoundButton() ? 'rgba(255, 255, 255, 0.2)' : ''" md-ripple-background-color="rgb"): MdButton#0:219"
I'm using it on a new component I'm trying to add called nav-bar, here's the Angular CLI created file with Material added
TypeScript File
import { Component, OnInit } from '#angular/core';
import { MdToolbar } from '#angular2-material/toolbar';
import { MdButton } from '#angular2-material/button';
import { MdIcon, MdIconRegistry } from '#angular2-material/icon';
#Component({
moduleId: module.id,
selector: 'nav-bar',
templateUrl: 'nav-bar.component.html',
styleUrls: ['nav-bar.component.css'],
directives: [
MdToolbar,
MdButton,
MdIcon
],
providers: [
MdIconRegistry
]
})
export class NavBarComponent implements OnInit {
constructor() {}
ngOnInit() {
}
}
HTML File
<md-toolbar>
<button md-button>
<md-icon>menu</md-icon>
</button>
NavBar
</md-toolbar>
Try to import MdRippleModule in your AppModule:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { HttpModule} from '#angular/http';
import { MdRippleModule } from '#angular2-material/core/core'; <== this line
#NgModule({
imports: [ BrowserModule, HttpModule, MdRippleModule ], <== add here
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Or pass MdRipple directive within your component:
...
import { MdRipple } from '#angular2-material/core/core'; <== this line
#Component({
moduleId: module.id,
selector: 'nav-bar',
templateUrl: 'nav-bar.component.html',
styleUrls: ['nav-bar.component.css'],
directives: [
MdToolbar,
MdButton,
MdIcon,
MdRipple <== add here
],
providers: [
MdIconRegistry
]
})
export class NavBarComponent implements OnInit {
...