I learning how to use angular2 with electron.Currently i am using the the latest angular rc5 and the latest version of electron.I decided to use the official angular tutorial (Tour of heroes). I had no major problems till i got to routing.I had to make some little changes for routing to work eg in index.html instead of using for support with electron i had to use .I am also using webpack and angular2-materialize.
My problem is when i click one of the heroes it shows the error stated in the title, here is a picture :
error image
here is the code for this particular component (dashboard.component)
html (dashboard.component.html): `
<h3>Top Heroes</h3>
<div class="grid grid-pad">
<div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1- 4">
<div class="module hero">
<h4>{{hero.name}}</h4>
</div>
</div>
</div>
`
typescript(dashboard.component.ts):
import {Component, OnInit} from '#angular/core';
import {Hero} from './hero';
import {HeroService} from './hero.service';
import {Router} from '#angular/router';
#Component({
selector: 'my-dashboard',
templateUrl: './dashboard.component.html'
})
export class DashboardComponent implements OnInit {
heroes: Hero[] = [];
constructor(private router: Router,private heroService: HeroService){}
ngOnInit(): void {
this.heroService.getHeroes().then(heroes => this.heroes = heroes.slice(1,5));
}
gotoDetail (hero: Hero): void
{
let link = ['/detail',hero.id];
this.router.navigate(link);
}
}
app.module.ts :
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import {MaterializeDirective} from "angular2-materialize";
import {HeroDetailComponent} from './hero-detail.component';
import {HeroService} from './hero.service';
import {HeroesComponent} from './heroes.component';
import {routing} from './app.routing';
import {DashboardComponent} from './dashboard.component';
#NgModule({
imports: [
BrowserModule,
FormsModule,
routing,
],
declarations: [
AppComponent,HeroDetailComponent,MaterializeDirective,HeroesComponent,DashboardComponent
],
providers: [HeroService],
bootstrap: [ AppComponent ],
})
export class AppModule { }
index.html:
<html>
<head>
<base href="">
<title>First App</title>
<!--<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
<link href="../icons/icon.css" rel="stylesheet">
<link href="../node_modules/materialize-css/dist/css/materialize.css" rel="stylesheet" />
<link href="../css/styles.css" rel="stylesheet">
</head>
<body>
<myapp></myapp>
<script src="../build/common.js"></script>
<script src="../build/angular2.js"></script>
<script src="../build/app.js"></script>
</body>
main.ts:
import {platformBrowserDynamic} from '#angular/platform-browser-dynamic';
import {AppModule} from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
app.routing.ts:
import {ModuleWithProviders} from '#angular/core';
import {Routes, RouterModule} from '#angular/router';
import {HeroesComponent} from './heroes.component';
import {DashboardComponent} from './dashboard.component';
import {HeroDetailComponent} from './hero-detail.component';
const appRoutes: Routes = [
{
path: 'heroes',
component: HeroesComponent
},
{
path: 'dashboard',
component: DashboardComponent
},
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full'
},
{
path: 'detail/:id',
component:'HeroDetailComponent'
}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
app.component.ts:
import { Component } from '#angular/core';
#Component({
selector: 'myapp',
template: `
<nav>
<div class="nav-wrapper">
{{title}}
<ul id="nav-mobile" class="left">
<li><a routerLink="/heroes">Heroes</a></li>
<li><a routerLink="/dashboard">Dashboard</a></li>
</ul>
</div>
</nav>
<router-outlet></router-outlet>
`
})
export class AppComponent {
title = 'Tour of Heroes';
}
hero-detail.component.ts :
import {Component, Input, OnInit} from '#angular/core';
import {ActivatedRoute, Params} from '#angular/router';
import {HeroService} from './hero.service';
import {Hero} from './hero';
#Component({
selector: 'my-hero-detail',
templateUrl: './hero-detail.component.html'
})
export class HeroDetailComponent implements OnInit {
#Input()
hero: Hero;
constructor(private heroService: HeroService, private route: ActivatedRoute)
{
}
ngOnInit(): void
{
this.route.params.forEach((params: Params) => {
let id = +params['id'];
this.heroService.getHero(id)
.then(hero => this.hero = hero);
});
}
goBack(): void {
window.history.back();
}
}
hero-detail.component.html
<div *ngIf="hero">
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/>
</div>
<button (click)="goBack()">Back</button>
</div>
Thank You
You should be have your component name without '(single quote) in component option of route. As you already have imported HeroDetailComponent there in app.routing.ts(rotue configuration).
{
path: 'detail/:id',
component: HeroDetailComponent //<-- removed quote from here
}
I observed that you are having file protocol while asking for template, it means you haven't hosted your application on server.
Please host your application on server(lite server would also work), so that template would ask
over http protocol instead of file.
Related
So I am having an issue with two components which have to do with routers/routing/router-outlets. In my login form when the user enters the info(email and password) and clicks login they should be routed to the dashboard.
See below the login form component and its accompanying ts/css/html files
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
import {AngularFireAuth} from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import {Observable} from 'rxjs/Observable';
import { auth } from 'firebase/app';
#Component({
selector: 'app-login-form',
templateUrl: './login-form.component.html',
styleUrls: ['./login-form.component.css']
})
export class LoginFormComponent implements OnInit {
user: Observable<firebase.User>;
authenticated: boolean = false;
error: any;
constructor(private router:Router,public af: AngularFireAuth) {
this.af.authState.subscribe(
//look at this again
(auth) => {
if (auth != null){
this.user = af.authState;
this.authenticated = true;
this.router.navigate(['dashboard']);
}
}
)
}
ngOnInit() {
}
loginUser(e){
e.preventDefault();
console.log(e.value);
var email = e.target.elements[0].value;
var password = e.target.elements[1].value;
console.log(email,password);
this.af.auth.signInWithEmailAndPassword(email,password)
.then((success) => {
console.log(success)
this.authenticated = true;
console.log("attempting to nav");
this.router.navigate(['dashboard']);
console.log("nav worked");
}).catch((err) => {
this.error= err;
})
//end of if statement
}//end of login user
}
HTML for Login Form
<div class="form">
<span class="error" *ngIf="error">{{ error }}</span>
<form (submit) = "loginUser($event)">
<input type="text" placeholder="Email Address"/>
<input type="password" placeholder="Password"/>
<button type = "submit">login</button>
</form>
</div>
HTML for appCompnent that controls the first screen you see which has the login form enclosed
<div id = "fullPage">
<app-header></app-header>
<app-login-form></app-login-form>
<app-footer></app-footer>
</div>
AppModule.ts which contains routes
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { LoginFormComponent } from './components/login-form/login-form.component';
import { FooterComponent } from './components/footer/footer.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import {RouterModule,Routes} from '#angular/router';
import {Router} from '#angular/router';
import { Route } from '#angular/compiler/src/core';
//Firebase configuration
import {AngularFireModule} from 'angularfire2';
import {environment} from '../environments/environment';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import {AngularFireAuthModule} from 'angularfire2/auth';
//Forms
import {FormsModule} from '#angular/forms';
//All Components
import { EventsComponent } from './components/events/events.component';
import { EventDetailsComponent } from './components/event-details/event-details.component';
import { AddEventComponent } from './components/add-event/add-event.component';
import { EditEventComponent } from './components/edit-event/edit-event.component';
import { DeleteEventComponent } from './components/delete-event/delete-event.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { Component } from '#angular/core/src/metadata/directives';
const appRoutes:Routes = [
{
path: 'login',
component: LoginFormComponent
},{
path: 'dashboard',
component: DashboardComponent
},{
path: 'events',
component: EventsComponent
},{
path: 'add-event',
component: AddEventComponent
},{
path: 'edit-event/:id',
component: EditEventComponent
},{
path: 'delete-event/:id',
component: DeleteEventComponent
},{
path: 'event-details',
component: EventDetailsComponent
}
]
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
LoginFormComponent,
FooterComponent,
DashboardComponent,
EventsComponent,
EventDetailsComponent,
AddEventComponent,
EditEventComponent,
DeleteEventComponent,
NavbarComponent
],
imports: [
RouterModule.forRoot(appRoutes),
AngularFireModule.initializeApp(environment.firebase),AngularFirestoreModule,AngularFireAuthModule,
BrowserModule,FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I followed a lot of tutorials so I believe I have done it right. However, it does not go to the dashboard. Any hints? Is it because I don't have a router-outlet in place of the app-login-form?
By the above code snippet, it seems that you have missed "router-outlet" tag which needs to be included in a template from where you try to navigate to the dashboard page. It should resolve your issue.
I am using Angular version 2.4.1 and I have error 'Template parse errors:(…)' when I'm running this code:
Component:
import {Component} from '#angular/core';
import {SharedData} from '../student/student.data';
#Component({
moduleId: module.id.toString(),
selector: 'sd-toolbar',
templateUrl: 'toolbar.component.html',
providers: [SharedData]
})
export class ToolbarComponent {
var: boolean;
var2: number;
constructor(service: SharedData){
this.var = service.getLog();
this.var2 = service.getId();
console.log(this.var);
}
}
Module code:
import {NgModule } from '#angular/core';
import {CommonModule} from '#angular/common';
import {ToolbarComponent} from './toolbar.component';
import { BrowserModule } from '#angular/platform-browser';
#NgModule({
imports: [
CommonModule
],
declarations: [ ToolbarComponent ],
})
class MyComponentModule {}
and Html code:
<nav class="site-menu">
<ul>
<li>
<div *ngIf="!var">
<div class="notifications">
<a class="notifications__toggle" data-toggle="notifications" href="#notifications">
<span class="num">4</span>
</a>
<div class="notifications__list">
<ul>
<li>Ny notifikation på 287530</li>
</ul>
</div>
</div>
</div>
</li>
{{var2}} in html shows good, but it's problem with that *ngIf, can you guys help me with this problem?
how to implement ng2-dragula in angular 2.
My code is shared below,
****viewer.component.ts****
import { Component, Input, Output, EventEmitter } from '#angular/core';
import { Injectable } from '#angular/core';
import { Headers, Http, Response } from '#angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
import { ImageViewerService } from '../services/http.services';
import { Dragula,DragulaService } from 'ng2-dragula/ng2-dragula';
#Component({
moduleId: module.id,
selector: 'viewer',
directives: [Dragula],
viewProviders: [DragulaService],
providers: [ImageViewerService, DragulaService],
templateUrl: 'viewer.component.html',
})
export class ViewerComponent {
#Output() click = new EventEmitter();
http: Http;
url: string;
obj: any;
getData: string;
postData: string;
users: any;
firtsImageToBind: any;
tile: number;
tableVisible: boolean;
status: { isopen: boolean } = { isopen: false };
localImageViewerService: ImageViewerService;
localDragulaService: DragulaService;
constructor(http: Http, imageViewerService: ImageViewerService,
localDragulaService: DragulaService) {
this.users = [1];
this.http = http;
this.localImageViewerService = imageViewerService;
this.localDragulaService = localDragulaService;
this.imageReceivedFromWebAPI();
}
Ok so a quick example showing how to implement dragula into Angular2 project first install via npm:
npm install ng2-dragula dragula --save
Next import into module:
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 {DragulaModule} from 'ng2-dragula/ng2-dragula'; // Here
#NgModule({
declarations: [
AppComponent
],
imports: [
DragulaModule, // Here
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Inside app.component.html you do this.
<div>
<div class='wrapper'>
<div class='container' [dragula]='"first-bag"'>
<div>You can move these elements between these two containers</div>
<div>Moving them anywhere else isn't quite possible</div>
<div>There's also the possibility of moving elements around in the same container, changing their position</div>
</div>
<div class='container' [dragula]='"first-bag"'>
<div>This is the default use case. You only need to specify the containers you want to use</div>
<div>More interactive use cases lie ahead</div>
<div>Make sure to check out the <a href='https://github.com/bevacqua/dragula#readme'>documentation on GitHub!</a></div>
</div>
</div>
</div>
run the project, and you'll be able to drag the text up and down i.e changing its order.
Example specified above is from dragula github page.
I am building up an Angular2 app and trying to get data from local json file.
The problem is that the service I created is ignored by the app. There are no errors, warnings or whatever either in console or Terminal.
index.html
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>My app</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="app/assets/flex.css">
<link rel="stylesheet" href="app/assets/styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>OLOLOading...</my-app>
</body>
</html>
releases.component.ts
import { Component, OnInit } from '#angular/core';
import { ReleasesService } from './releases/releases.service';
#Component({
selector: 'releases',
templateUrl: 'app/releases/releases.component.html',
providers: [ReleasesService]
})
export class ReleasesComponent implements OnInit {
constructor(private releasesService: ReleasesService) {
this.releases = releasesService.getReleases();
}
ngOnInit() {
this.releasesService.getReleases().subscribe(
releases => {
this.releases = releases;
}
);
}
}
releases.component.html
<div class="releases-component">
<div *ngFor="let release of releases | async">
<h3>Name: {{releases.name}}</h3>
<h4>Name: {{releases.instrument}}</h4>
</div>
</div>
releases.service.ts
import { Injectable } from '#angular/core';
import { Http, Response, Jsonp, Headers, Response, RequestsOptions } from '#angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/catch';
#Injectable()
export class ReleasesService {
constructor (private http: Http){ }
getReleases = (): Observable<Response> => {
console.log(this.releases);
return this.http.get('app/releases/releases.json')
.map(res => res.json());
}
}
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule, JsonpModule } from '#angular/http';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { ReleasesComponent } from './releases/releases.component';
import { DistroComponent } from './distro/distro.component';
import { ContactsComponent } from './contacts/contacts.component';
import { routing } from './app.routes';
#NgModule({
imports:[
BrowserModule,
FormsModule,
HttpModule,
JsonpModule,
routing
],
declarations: [
AppComponent,
HomeComponent,
ReleasesComponent,
DistroComponent,
ContactsComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
What has been done wrong?
If you use the async pipe you don't need to use explicit subscribe() because async auto-subscribes to the observable. Try this:
export class ReleasesComponent implements OnInit {
releases: Observable<Array<string>>;
constructor(private releasesService: ReleasesService) {
}
ngOnInit() {
this.releases = this.releasesService.getReleases();
}
}
I am facing difficulty in using a component defined in a file named navigation.component.ts directly on HTML Page.
The same component works fine if I use it under template of a component defined on app.component.ts.
Contents of app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { NavigationComponent} from './shared/navigation.component';
#NgModule({
imports: [BrowserModule],
declarations: [AppComponent, NavigationComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Contents of navigation.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'navigation',
templateUrl: '/views/shared/navigation.html'
})
export class NavigationComponent {
userName: string = 'Anonymous';
}
Contents of app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'main-app',
template: '<navigation></navigation><h1>{{pageTitle}}</h1>'
})
export class AppComponent {
pageTitle: string = 'Portal 2.0';
}
Contents of index.html
<body>
<main-app></main-app>
</body>
The above works and renders menus on top but when I try to use <navigation> directly (given below) it doesn't render it, doesn't show any errors either.
<body>
<navigation></navigation>
</body>
Am I doing something wrong?
And the bigger question is how I go debugging issues like this?
Yes you can use web components. Add all the components that you want to load to entrycomponents.
Using createCustomElement you can create elements and use their selector anywhere.
import { BrowserModule } from '#angular/platform-browser';
import { NgModule, Injector } from '#angular/core';
import { createCustomElement } from '#angular/elements';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
entryComponents: [AppComponent]
})
export class AppModule {
constructor(private injector: Injector) {
console.log('Elements is loaded: Activation');
this.registerComponent('metro-activation-loader', AppComponent);
}
public ngDoBootstrap(): void {
console.log('Elements is loaded: Activation ngDoBootstrap');
}
// tslint:disable-next-line:no-any
private registerComponent(name: string, component: any): void {
const injector = this.injector;
const customElement = createCustomElement(component, { injector });
customElements.define(name, customElement);
}
}