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';
}
Related
I have a simple React App that I'm trying to load through using a CDN vs NPM.
My options.html file:
<!DOCTYPE html>
<html>
<head>
<title>My Test Extension Options</title>
<script src="https://fb...me/react-0.14.3.js"></script>
<script src="https://fb...me/react-dom-0.14.2.js"></script>
</head>
<body>
<div id="root"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
index.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div>Hello world</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
When I load up options.html in a browser, nothing is showing up when I expected to see Hello world. I checked the debugger and no errors are coming up.
What am I doing wrong?
I believe :
There is no need of type="text/babel"
<script src="index.js" type="text/babel"></script>
so it should be
<script src="index.js" ></script>
I read ngbook2. And I try to create hello-world application on angular2.
But I get error 404:
GET /node_modules/angular2/bundles/angular2.dev.js 404 5.460 ms - 58
app.ts:
import { bootstrap } from "#angular/platform-browser-dynamic";
import { Component } from "#angular/core";
#Component({
selector: 'hello-world',
template: `
<div>
Hello world
</div>
`
})
class HelloWorld {
}
bootstrap(HelloWorld);
index.html:
<!doctype html>
<html>
<head>
<title>Angular 2 - Simple Reddit</title>
<!-- Libraries -->
<script src="node_modules/es6-shim/es6-shim.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>
<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="resources/vendor/semantic.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<script src="resources/systemjs.config.js"></script>
<script>
System.import('app.js')
.then(null, console.error.bind(console));
</script>
<hello-world></hello-world>
</body>
</html>
Look like the problem is in line
But I newbie in angular and have not idea about how can I correct this line.
How can I fix this app?
I have read documentation
And I see I must change libraries URLs in index.html to these:
<!-- Libraries -->
<!-- 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>
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>