Plunker and Angular 2 child components don't display output - angularjs

I have the most basic angular 2 plunk but no errors are shown to give any indication of a problem. Why can't I see any template output from the child components? Is this a Plunker Issue or is it me?
Plunker version here with Index.html
PARENT: hello_world.ts
import {Component} from 'angular2/core';
import {Jupiter} from './jupiter';
import {Uranus} from './uranus';
#Component({
selector: 'hello-world',
template: `
<p>Can you see jupiter?</p>
<jupiter></jupiter>
<p>Can you see Uranus?</p>
<uranus></uranus>
`
})
export class HelloWorld {
}
CHILD: jupiter.ts
import {Component} from 'angular2/core';
#Component({
selector: 'jupiter',
template: `<p>Hello I'm Jupiter</p>`
})
export class Jupiter {}
CHILD: uranus.ts
import {Component} from 'angular2/core';
#Component({
selector: 'uranus',
template: `<p>Hello I'm Uranus Lol</p>`
})
export class Uranus {}

I've used my demo and used your code to get your expected results that you can see here: https://embed.plnkr.co/VKrvg4/
SystemJS Bootstrap Process
Basically, I've created a main.ts file that is used by SystemJS and then the code in this file bootstraps Angular with the help of AppModule.
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
Declaration
This app module is responsible to declare the components that you would like to register in your Angular application using declarations.
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { HelloWorldComponent } from './hello-world.component'
import { JupiterComponent } from './jupiter.component'
import { UranusComponent } from './uranus.component'
#NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent, HelloWorldComponent, JupiterComponent, UranusComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Bootstrap
The same module also uses AppComponent to bootstrap your Angular application in the code above. The component registered here will be rendered as parent component.
Component Rendering Process
When the app component is rendered, its template uses two other components. Now Angular is aware of your other components as it was registered using declarations.
import { Component } from '#angular/core';
#Component({
selector: 'hello-world',
template: `
<p>Can you see jupiter?</p>
<jupiter></jupiter>
<p>Can you see Uranus?</p>
<uranus></uranus>
`
})
export class HelloWorldComponent {
}
You should be able to see your other component UI in view.

Related

How to use Angular 2 component in Angular 1 app using #angular/upgrade

This question might be duplicate but I have tried all possible options.
I am trying to use my Angular 2 component in Angular 1 app using #angular/upgrade.
angular2 files :-
simple hello component in app/components/hello.
hello.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-hello',
templateUrl: './hello.component.html',
styleUrls: ['./hello.component.scss']
})
export class HelloComponent implements OnInit {
constructor() {
}
ngOnInit() {
}
}
hello.component.html
<p>
hello works!
</p>
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { UpgradeModule } from '#angular/upgrade/static';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HelloComponent } from './components/hello/hello.component';
#NgModule({
declarations: [
AppComponent,
HelloComponent
],
imports: [
BrowserModule,
UpgradeModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent],
entryComponents: [
HelloComponent
]
})
export class AppModule {
constructor(private upgrade: UpgradeModule) { }
ngDoBootstrap() {
this.upgrade.bootstrap(document.body, ['usr']);
}
}
platformBrowserDynamic().bootstrapModule(AppModule);
In my Angular 1 app :-
app.ts (root file)
import { HelloComponent } from '../angular/src/app/components/hello/hello.component';
import { downgradeComponent } from './node_modules/#angular/upgrade/static/static'
let moduleList = ['ngCookies', 'ngSanitize','$rootScope', '$locationProvider '];
angular.bootstrap(document.body, ['usr']);
let app: any = angular.module('usr', moduleList)
.directive(
'appHello',
downgradeComponent({ component: HelloComponent })
);
index.html of Angular 1 (I have added base href and root which is default component of angular, app-root component is rendering properly in my angular 1 app)
<base href="/">
<app-root></app-root>
header.html (angular 1 header component where I want to show my angular 2 hello component)
<app-hello></app-hello>
screenshots.
Thanks in advance.
https://angular.io/api/upgrade/static/downgradeModule says
You cannot use downgradeModule() and UpgradeModule in the same hybrid
application. Use one or the other.
This means you can only use downgrade module while bootstrapping NG1

How do you get access to the instance of a downgrade component in the view? [duplicate]

What I'm trying to do is to make Angular 2 simple component run inside angular 1 application. I was going through this official guide.
I've faced some issue with injection:
Unknown provider: $$angularInjectorProvider <- $$angularInjector
The stack trace is making no sense, but is obvious that error is raised somewhere deep in the angular itself :)
The structure of my current app looks like this:
ng1.module.ts (entry point):
'use strict';
import { downgradeComponent } from '#angular/upgrade/static';
const angular = require('./lib/angular-wrapper');
const app = angular.module('application', []);
import { AppComponent } from './components/app/app.component.ts';
import { Ng2Module } from './ng2.module.ts';
app.directive(
'app',
downgradeComponent({component: AppComponent}) as angular.IDirectiveFactory
);
angular.bootstrap(document.body, ['application']);
ng2.module.ts:
import 'reflect-metadata';
import '#angular/core';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { UpgradeModule } from '#angular/upgrade/static';
import { AppComponent } from './components/app/app.component.ts';
#NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
entryComponents: [ AppComponent ]
})
export class Ng2Module {
ngDoBootstrap() {}
}
And app.component.ts:
import 'reflect-metadata';
import { Component } from '#angular/core';
#Component({
selector: 'app',
template: "<h1>HELLO WORLD!</h1>"
})
export class AppComponent {}
Asking for any idea on: what can cause the described above error?
This is caused by the UpgradeModule downgraded service that you are using here:
import { UpgradeModule } from '#angular/upgrade/static';
You are using it because you want the UpgradeModule to downgrade an Angular 2 component to angular JS.
If you dig into the code of the UpgradeModule you can find that this module defines a new angular module named $$UpgradeModule.
This module registers a value provider named $$angularInjector (the one in the error above) - this $$angularInjector thing is responsible for injecting Angular modules into angular JS.
The solution is to import the module in the imports statement so that angular JS will have access to its services.
You forgot to import the UpgradeModule. Here is the answer from the official documentation:
#NgModule({
declarations: [Ng2HeroesComponent, Ng1HeroComponentWrapper],
providers: [
HeroesService,
// Register an Angular provider whose value is the "upgraded" AngularJS service
{provide: 'titleCase', useFactory: (i: any) => i.get('titleCase'), deps: ['$injector']}
],
// All components that are to be "downgraded" must be declared as `entryComponents`
entryComponents: [Ng2HeroesComponent],
// We must import `UpgradeModule` to get access to the AngularJS core services
imports: [BrowserModule, UpgradeModule]
})
class Ng2AppModule {
ngDoBootstrap() { /* this is a placeholder to stop the boostrapper from complaining */
}
}
so first you need to change your code to:
ng2.module.ts:
import 'reflect-metadata';
import '#angular/core';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { UpgradeModule } from '#angular/upgrade/static';
import { AppComponent } from './components/app/app.component.ts';
#NgModule({
imports: [ BrowserModule, UpgradeModule ],
declarations: [ AppComponent ],
entryComponents: [ AppComponent ]
})
export class Ng2Module {
ngDoBootstrap() {}
}
Also in order to downgrade your component from ng2 to angular 1
You must create an AngularJS directive that will make this Angular component available inside AngularJS templates:
ng1AppModule.directive('Ng2Module', downgradeComponent({component: AppComponent}));
function downgradeComponent(info: { component: Type< This parameter is no longer used */ selectors?: string[]; }): any;
There is a very helpful post which explains in details how to create a hybrid angular application, and also the scenario when you have a v4 component and you want to use it in the v1 template.

Angular 2 Stuck on Loading AppComponent content here

I have been following along to this tutorial on youtube to learn Angular 2. Just after the 33:00 mark, where I import the headerComponent into the app.module.ts, localhost begins perpetually displaying "Loading AppComponent content here". Meanwhile, in the video, the header and content load almost immediately. What am I doing wrong? Here is my code:
app.component.ts:
import { Component } from '#angular/core';
import { headerComponent } from './header/app.headerComponent';
#Component({
selector: 'my-app',
templateUrl: './main.html',
})
export class AppComponent {
}
app.headerComponent.ts:
import { Component } from '#angular/core';
#Component({
selector: 'header',
templateUrl: './header/header.html',
})
export class headerComponent {
}
app.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { headerComponent } from './header/app.headerComponent';
#NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent, headerComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Credit goes to TK Omble for finding out the issue. There was a build error because I was loading a header template from a folder called header within header folder. Now I changed the templateUrl: './header/header.html' to templateUrl: './header.html' and it works fine.

Angular2 Component in Angular1 App

What I'm trying to do is to make Angular 2 simple component run inside angular 1 application. I was going through this official guide.
I've faced some issue with injection:
Unknown provider: $$angularInjectorProvider <- $$angularInjector
The stack trace is making no sense, but is obvious that error is raised somewhere deep in the angular itself :)
The structure of my current app looks like this:
ng1.module.ts (entry point):
'use strict';
import { downgradeComponent } from '#angular/upgrade/static';
const angular = require('./lib/angular-wrapper');
const app = angular.module('application', []);
import { AppComponent } from './components/app/app.component.ts';
import { Ng2Module } from './ng2.module.ts';
app.directive(
'app',
downgradeComponent({component: AppComponent}) as angular.IDirectiveFactory
);
angular.bootstrap(document.body, ['application']);
ng2.module.ts:
import 'reflect-metadata';
import '#angular/core';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { UpgradeModule } from '#angular/upgrade/static';
import { AppComponent } from './components/app/app.component.ts';
#NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
entryComponents: [ AppComponent ]
})
export class Ng2Module {
ngDoBootstrap() {}
}
And app.component.ts:
import 'reflect-metadata';
import { Component } from '#angular/core';
#Component({
selector: 'app',
template: "<h1>HELLO WORLD!</h1>"
})
export class AppComponent {}
Asking for any idea on: what can cause the described above error?
This is caused by the UpgradeModule downgraded service that you are using here:
import { UpgradeModule } from '#angular/upgrade/static';
You are using it because you want the UpgradeModule to downgrade an Angular 2 component to angular JS.
If you dig into the code of the UpgradeModule you can find that this module defines a new angular module named $$UpgradeModule.
This module registers a value provider named $$angularInjector (the one in the error above) - this $$angularInjector thing is responsible for injecting Angular modules into angular JS.
The solution is to import the module in the imports statement so that angular JS will have access to its services.
You forgot to import the UpgradeModule. Here is the answer from the official documentation:
#NgModule({
declarations: [Ng2HeroesComponent, Ng1HeroComponentWrapper],
providers: [
HeroesService,
// Register an Angular provider whose value is the "upgraded" AngularJS service
{provide: 'titleCase', useFactory: (i: any) => i.get('titleCase'), deps: ['$injector']}
],
// All components that are to be "downgraded" must be declared as `entryComponents`
entryComponents: [Ng2HeroesComponent],
// We must import `UpgradeModule` to get access to the AngularJS core services
imports: [BrowserModule, UpgradeModule]
})
class Ng2AppModule {
ngDoBootstrap() { /* this is a placeholder to stop the boostrapper from complaining */
}
}
so first you need to change your code to:
ng2.module.ts:
import 'reflect-metadata';
import '#angular/core';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { UpgradeModule } from '#angular/upgrade/static';
import { AppComponent } from './components/app/app.component.ts';
#NgModule({
imports: [ BrowserModule, UpgradeModule ],
declarations: [ AppComponent ],
entryComponents: [ AppComponent ]
})
export class Ng2Module {
ngDoBootstrap() {}
}
Also in order to downgrade your component from ng2 to angular 1
You must create an AngularJS directive that will make this Angular component available inside AngularJS templates:
ng1AppModule.directive('Ng2Module', downgradeComponent({component: AppComponent}));
function downgradeComponent(info: { component: Type< This parameter is no longer used */ selectors?: string[]; }): any;
There is a very helpful post which explains in details how to create a hybrid angular application, and also the scenario when you have a v4 component and you want to use it in the v1 template.

stuck on angular2 (RC1) routing

I'm new to Angular, starting out with Angular 2. I created a skeleton application (with the help of npm). My app has two components:
app.component.ts
import { Component } from '#angular/core';
import {Routes, ROUTER_DIRECTIVES} from '#angular/router';
import { InviteComponent } from './howdy.component';
#Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
#Routes([
{ path: '/', component: AppComponent },
{ path: '/howdy', component: HowdyComponent },
])
export class AppComponent{}
howdy.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: '<h1>Howdy</h1>'
})
export class HowdyComponent{}
main.ts
import { bootstrap } from '#angular/platform-browser-dynamic';
import {ROUTER_PROVIDERS} from '#angular/router';
import { AppComponent } from './app.component';
bootstrap(AppComponent, [
ROUTER_PROVIDERS
]);
What I want to start off with is simple routing. I'd like the "\" route to load app.component, and "\howdy" route to load howdy.component.
Right now app.component loads up no matter what route is used.
What am I doing wrong?
Firstly, you have to have <router-outlet> somewhere, to mark a place to render the component content in. Otherwise, You are not putting them anywhere. Remember, this is a Single Page Application not like static pages. Unlike static page, SPA's has a single starting point. In your case it's main.ts which always bootstraps to AppComponent.
Secondly, AppComponent is the component that is responsible for routing, so you can't route back to it. You will have loop. So, you need to set another component for the main route /.
Any way, here is your code edited to make it work, check this plunk:
import { Component } from '#angular/core';
import {Routes, ROUTER_DIRECTIVES} from '#angular/router';
import { HowdyComponent } from './howdy.component';
#Component({
selector: 'main-route',
template: '<h1>My First Angular 2 App</h1>'
})
export class MainComponent{}
#Component({
selector: 'my-app',
directives:[ROUTER_DIRECTIVES],
template: `
<a [routerLink]="['/howdy']">Howdy</a>
<a [routerLink]="['/']">Main</a>
<router-outlet></router-outlet>
`
})
#Routes([
{ path: '/', component: MainComponent },
{ path: '/howdy', component: HowdyComponent }
])
export class AppComponent{}
Alternatively, check this plunk , you can just remove the route to / and keep the one for /howdy
#Component({
selector: 'my-app',
directives:[ROUTER_DIRECTIVES],
template: `
<a [routerLink]="['/howdy']">Howdy</a>
<a [routerLink]="['/']">Main</a>
<h1>This line will be visible everywhere .. </h1>
<router-outlet></router-outlet>
`
})
#Routes([
{ path: '/howdy', component: HowdyComponent }
])
export class AppComponent{}
Also, regardless of which approach you choose, don't forget to add <base href="./"> in index.html
Missing router-outlet, can be the reason.
AppComponent is always loaded first, /invite will be stuffed in router-outlet
You need to add
import {ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router';
//...
bootstrap(AppComponent, [ROUTER_PROVIDERS]);
in your main.ts file

Resources