Can someone please tell me why this won't work?
I'm currently taking a course on angular and the instructor has left us in the dirt with regard to updates since the course was made... I'm on the topic of observables and this is the code that isn't working.
import {Component, ElementRef} from 'angular2/core'
import {Observable} from 'rxjs/Rx'
import 'rxjs/add/operator/map'
#Component({
selector: 'my-app',
template: `
<input id="search" type="text" class="form-control" placeholder="Search" />
`
})
export class AppComponent {
constructor(private _elementRef: ElementRef) {
var elem = document.querySelector('#search');
var keyups = Observable.fromEvent(elem, "keyup")
.map(e => e.target.value)
.filter(text => text.length >= 3);
keyups.subscribe(data => console.log(data));
}
}
This will not output anything into console and does not provide any errors whatsoever.
What am I doing wrong here?
****Edit****
After pulling my instructors code and re-running everything I'm convinced it is a versions issue with rxjs. In this version I no longer have to include:
import 'rxjs/add/operator/map'
And when I write the following code, it works and outputs to the console as expected.
/// <reference path="../typings/tsd.d.ts" />
import {Component} from 'angular2/core';
import {Observable} from 'rxjs/Rx'
#Component({
selector: 'my-app',
template: `
<input id="search" type="text" class="form-control">
`
})
export class AppComponent {
constructor(){
var keyups = Observable.fromEvent($("#search"), "keyup")
.map(e => e.target.value)
.filter(text => text.length > 3);
keyups.subscribe(data => console.log(data));
}
}
When I pause the app in the debugger and look at keyups it indeed does have the element.
Also for curiosity sake, here is the html that both myself and the instructor are using.
<html>
<head>
<title>Angular 2 QuickStart</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"></style>
<link rel="stylesheet" href="app/styles.css">
<style>
body { padding: 30px; }
</style>
<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
In your code elem will equal null.
I think you should move your code to ngAfterViewInit hook. It as 'on load' for component.
See also
Lifecycle Hooks
Plunker
Related
I have downgrade a component written in Angular2 + Typescript. Now I want to use it in simple angular 1 app, But the js file compiled from Typescript is using 'import' and I get from browser it is not supported. What I have missed?
This is a simple angular 2 componenet:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'hello-world',
template: `
<p>
hello from angular 2!
</p>
`,
styles: []
})
export class HelloWorldComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
import * as angular from 'angular';
import { downgradeComponent } from '#angular/upgrade/static';
angular.module('dannyApp', [])
.directive(
'helloWorld',
downgradeComponent({component: HelloWorldComponent}) as angular.IDirectiveFactory
);
This is the simple angular1 app tring to use this angular 2 component above:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="dist\out-tsc\app\hello-world\hello-world.component.js"></script>
<script>
angular.module('app', [])
.controller('FrameController', ['$injector', function($injector) {
var vm = this;
vm.message = 'Hello from angular 1';
}]);
</script>
<title>Title</title>
</head>
<body ng-app="app">
<div id="body">
<div ng-controller="FrameController as vm">
{{vm.message}}
</div>
<!-- the angular 2 componenet -->
<hello-world></hello-world>
</div>
</body>
</html>
The browser error:
Uncaught SyntaxError: Unexpected token import
on the line:
import { Component } from '#angular/core';
Make sure you have compiled your Typescript component to ES5.
Your code looks like ES6/Typescript.
Check your tsconfig.json and make sure target: "es5".
I am trying to learn Angularjs2 and make my first app but its not working fine and also not showing any error. I have made "my-app" component with some html "Angular 2 First App Here is my component", this one is working fine but when I have made new component named "my-component" with text "Hi, I am {{name}}" its not showing in the browser.
Also when I am trying to remove text form "my-app" like:
Text is: "Angular 2" so it shows my previous text which is "Angular 2 First App"
Please check what I am doing wrong in the below code:
index.html:
<!doctype>
<html>
<head>
<base href="/angular2_project/">
<title>Angular 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.js"></script>
<link rel="stylesheet" href="src/css/app.css">
</head>
<body>
<my-app>Loading...</my-app>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</body>
</html>
boot.ts:
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from "./app.component";
bootstrap(AppComponent);
app.component.ts:
import {Component} from 'angular2/core';
import {MyComponentComponent} from './my-component.component';
#Component({
selector: 'my-app',
template: `
<h1>Angular 2 First App</h1>
<h2>Here is my component</h2>
<my-component></my-component>
`,
directives: [MyComponentComponent],
})
export class AppComponent {
}
my-component.component.ts:
import {Component} from 'angular2/core';
#Component({
selector: 'my-component',
template: `
Hi, I am {{name}}
`,
})
export class MyComponentComponent {
name = 'Ovais';
}
firstpage_server_side_load.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to myapp</title>
<base href="/temp/angular/" />
<script src="/temp/angular/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/temp/angular/node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="/temp/angular/node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="/temp/angular/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/temp/angular/node_modules/systemjs/dist/system.src.js"></script>
<script src="/temp/angular/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/temp/angular/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="/temp/angular/node_modules/angular2/bundles/http.dev.js"></script>
<script src="/temp/angular/node_modules/angular2/bundles/router.dev.js"></script>
</head>
<body>
<nav class="nav set-navigation-tab-nav navigation">
<ul class="set-navigation-tab-nav">
<li class="set-navigation-tab-container">
<a [routerLink]="['home/home']">Home</a>
</li>
<li class="set-navigation-tab-container">
<a [routerLink]="['user/register']">register</a>
</li>
</ul>
</nav>
<script>
System.config({
baseURL: '/temp/angular/',
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
},
});
System.import('app/main')
.then(null, console.error.bind(console));
document.write('<base href="' + document.location + '" />');
</script>
</body>
</html>
main.ts
import {bootstrap} from 'angular2/platform/browser';
import {Utils} from './util/Utils';
import 'rxjs/Rx';
import { HTTP_PROVIDERS } from 'angular2/http';
import { ROUTER_PROVIDERS } from 'angular2/router';
import {myappComponent} from './myapp.component';
bootstrap(myappComponent,[HTTP_PROVIDERS,Utils,ROUTER_PROVIDERS]);
myapp.component.ts
import {Directive,Component,ElementRef,Renderer} from 'angular2/core';
import {Home} from './home/component.home';
import {Route,RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router';
import {RegisterPageComponent} from './register-page/component.register.page';
#Component({
selector: 'my-app',
templateUrl: './app/template/common/my.body.html',
directives:[ROUTER_DIRECTIVES]
})
#RouteConfig([
{
path:"/home/home",component:Home ,name:'Home',useAsDefault:true
},
{
path:"user/register",component:RegisterPageComponent ,name:'User'
},
])
export class myappComponent{ }
Home.Component.ts
import {Directive,Component,ElementRef,Renderer} from 'angular2/core';
import {Route,RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router';
#Component({
selector: 'home',
templateUrl:'./app/template/home/home.html',
host:{
'(submit)':'onSubmit()'},
directives:[ROUTER_DIRECTIVES],
})
export class Home{}
RegisterPageComponent.Component.ts
import {Directive,Component,ElementRef,Renderer} from 'angular2/core';
import {Route,RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router';
#Component({
selector: 'register',
templateUrl:'./app/template/user/register.html',
directives:[ROUTER_DIRECTIVES],
})
export class RegisterPageComponent{}
my.body.html
<my-app>
<router-outlet></router-outlet>
<home>
</home>
<register>
</register>
</my-app>
Explanation I am using XAMPP server, which load firstpage_server_side_load.html page on URL: http://localhost/home/home, Once page get loaded properly typescript get executed in script tag of html. All the required file loaded by this configuration.
main.ts execute configure web page for my applicatioon. All the steps working fine but once everything loaded then url of page get changed to http://localhost/temp/angular/home/home.
Problem: Now if I try to click on Either Register link or Home link both are not working. Even I don't find anything in console as well regarding these link like any error or message.
Please tell me how to make it work.
thanks
I'm pretty new to Angular 2 and am trying to get some simple sign-in buttons to work inside one of my child-components.
This is the order of the scripts rendered:
<html>
<head>
<title>Title</title>
<meta name="google-signin-client_id" content="xxxxxxx.apps.googleusercontent.com">
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
If I place it inside my main-component like so, it is not rendering at all:
import {Component} from 'angular2/core';
#Component({
selector: 'my-app',
template: '<div class="g-signin2" data-onsuccess="onSignIn"></div>'
})
export class AppComponent { }
If I instead place the button directly in the body of index.html, the button rendered from the js-library is displayed correctly.
The div is there when I inspect the element, but it seems that the button is trying to render before the script is loaded, since it is not displaying.
Any idea as to why this is happening and how I can fix it?
Thanks for any input!
I'm trying to setup routing inside my application, but am getting following error in the console:
angular2-polyfills.js:138 Error: XHR error (404 Not Found) loading http://localhost:9000/angular2/router.js(…)
here is my boot.ts
// -- Typescript typings -------------------------------------------------------
/// <reference path="../typings/jquery.d.ts" />
/// <reference path="../typings/jqueryui.d.ts" />
//Imports ----------------------------------------------------------------------
import {Component, enableProdMode} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {
ROUTER_DIRECTIVES,
ROUTER_PROVIDERS,
Router,
RouteConfig,
} from 'angular2/router';
// -- Application Imports ------------------------------------------------------
import {NavbarComponent} from './components/navbar.component';
import {HomePage} from './pages/home.page';
// -- Enable production module -------------------------------------------------
enableProdMode();
// -- Component ----------------------------------------------------------------
#Component({
selector: 'main-app',
directives: [ ROUTER_DIRECTIVES, NavbarComponent ],
template: `
<app-navbar></app-navbar>
<router-outlet></router-outlet>
`
})
// -- Routing ------------------------------------------------------------------
#RouteConfig([
{ path: '/', name: 'root', redirectTo: ['/Home'] },
{ path: '/home', name: 'Home', component: HomePage }
])
// -- Class --------------------------------------------------------------------
export class MainApp {
constructor(public router: Router) {}
}
// -- Bootstrap for application ------------------------------------------------
bootstrap(MainApp, [
ROUTER_PROVIDERS
]);
and index.html -----
<!doctype html>
<html lang="en">
<head>
<base href="/">
<meta charset="UTF-8">
<title>Angular2 starter</title>
<!-- Application css -->
<link href="dist/libraries/bundle.css" rel="stylesheet"></link>
<link href="dist/styles/main.css" rel="stylesheet"></link>
</head>
<body>
<main-app>Loading...</main-app>
<!-- Application js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="dist/libraries/bundle.js"></script>
</body>
<!-- ES6-related imports -->
<script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/node_modules/systemjs/dist/system.js"></script>
<script>
//configure system loader
System.config({defaultJSExtensions: true});
</script>
<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/angular2/bundles/angular2.min.js"></script>
<script>
//bootstrap the Angular2 application
System.import('dist/app/boot').catch(console.log.bind(console));
</script>
</html>
You are missing a script router.dev.js which is not shown very clearly in a lot of places and examples.
<script src="/node_modules/angular2/bundles/router.dev.js"></script>