I'm new to angular 2. I had tried building a component named "Header" within that I had placed two files named "Header.component.ts" & "Header.component.html". also configured in app.module.ts files as like below :
import { AppComponent } from './app.component';
import {HeaderComponent} from './Header/Header.component';
#NgModule({
declarations: [
AppComponent,
HeaderComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
And my Header.component.ts looks as like below :
import {Component} from '#angular/core';
#Component({
selector : 'app-header',
templateUrl: './Header.component.html'
})
export class HeaderComponent{
HeaderName = 'Its Header';
}
And my Header.comonent.html is like below :`
<h1>
Header.. {{HeaderName}}
</h1>
And my Index.html looks like below :
<app-header>
</app-header>
<app-root>
</app-root>
In the browser I'm able to view the default one app-root selector correctly. where as the one which I created I'm not able to render.
My folder structure looks like below image :
enter image description here
Try this.
Header.component.ts
import {Component} from '#angular/core';
#Component({
selector : 'app-header',
templateUrl: './Header.component.html'
})
export class HeaderComponent{
public HeaderName = 'Its Header'; //define as public
}
In index.html you shall only have
<app-root></app-root>
inside app-root template :
<app-header></app-header>
Related
I downloaded angular form https://angular.io/quick-start and then added a file to the app folder "tutoriel.component.ts" and wrote the following code
import { Component } from "#angular/core";
#Component({
selector: 'tutoriel',
template: '<h2>Tutoriel</h2>'
})
export class TutorielComp{
}
and then changed this in the app.module
#NgModule({
declarations: [
AppComponent,
TutorielComp
],
and the class got imported import { TutorielComp } from './tutoriel.component'; The problem is when I deleted all the code in the app.component.html and wrote
<tutoriel></tutoriel>
It did not show.
I have an old AngularJS app I'm trying to implement an upgrade-in-place using the Angular 6 UpgradeModule. I can get all the code to execute -- I'm logging out states as expected through both the Angular 6 and AngularJS apps.
The problem is that I'm failing utterly to bind anything to the DOM.
All the documentation and examples use NgDoBootstrap thus, inside the core AppModule of the new Angular 6 app:
this.upgrade.bootstrap(document.body, ['angularJS-app-name'], {strictDi: true});
I can execute that. I can see my AngularJS app bootstrapping (via console.logs) via the UpgradeModule. I can see my Angular 6 app bootstrapped (via console.logs). But nothing is bound to the DOM.
Logging out document gives me the HTML document I'd expect. I can manually examine that in the Chrome console, and see all the elements I would expect to. But all document methods and properties seem to be returning null.
document.body: null.
document.getElementById('an-elementId-I-can-see-when-logging-out-document'): null.
Tell me I'm just doing something dumb like not injecting something properly so that Angular/TS is interpreting document differently than vanilla JS does.
master.app.ts
import {APP_BASE_HREF} from "#angular/common";
import {Component, NgModule, Inject} from '#angular/core';
import {BrowserModule} from '#angular/platform-browser';
import {UpgradeModule} from '#angular/upgrade/static';
import {platformBrowserDynamic} from '#angular/platform-browser-dynamic';
import {RouterModule, Routes, UrlHandlingStrategy} from '#angular/router';
#Component({
selector: 'ng6-router-root',
template: '<router-outlet></router-outlet><div class="ng-view"></div>'
})
export class Ng6RouterRoot{}
export class HybridUrlHandlingStrategy implements UrlHandlingStrategy {
shouldProcessUrl(url: any) {return false;}
extract(url:any) {return url;}
merge(url:any, whole:any) {return url;}
}
#NgModule({
declarations: [
Ng6RouterRoot
],
imports: [
BrowserModule,
UpgradeModule,
RouterModule.forRoot([])
],
providers: [
{ provide: UrlHandlingStrategy, useClass: HybridUrlHandlingStrategy },
{ provide: APP_BASE_HREF, useValue: '/' }
]
})
export class AppModule {
constructor (private upgrade: UpgradeModule) {
}
ngDoBootstrap() {
console.log('master.app.ts ngDoBootstrap start', document);
console.log('document.body', document.body);
this.upgrade.bootstrap(document.getElementById('master'), ['angularJsApp'], {strictDi: true});
console.log('master.app.ts bootstrap end');
}
}
platformBrowserDynamic().bootstrapModule(AppModule);
console.log('master.app.ts end readyState', document.readyState);
relevant html
<div id="master">
<ng6-router-root>
</ng6-router-root>
</div>
I have a table-basic.component.ts in which i declared 'tables-basic' as a selector and i am calling the template in dashboard.html and i followed the below process but still i did got an error,which i also mentioned below.
My dashboard.template.html,
<div href='#tab2'>
<div id='tab2'>
<tables-basic></tables-basic>
</div>
</div>
My ts,
import { Component, ViewEncapsulation } from '#angular/core';
import { TablesBasic } from '../tables/basic/tables-basic.component';
import { AppConfig } from '../app.config';
#Component({
selector: 'dashboard',
templateUrl: './dashboard.template.html'
})
export class Dashboard {
config: any;
month: any;
year: any;
}
Error,
main.browser.ts:25Error: Template parse errors:(…)(anonymous function) # main.browser.ts:25ZoneDelegate.invoke
# zone.js:203Zone.run
# zone.js:96(anonymous function)
# zone.js:462ZoneDelegate.invokeTask
# zone.js:236Zone.runTask
# zone.js:136drainMicroTaskQueue
# zone.js:368ZoneTask.invoke
# zone.js:308
I dont know about this error,can any one suggest help please.
You need to add TableBasicComponent to declarations of parent components module.
import { TableBasicComponent } from 'path/to/component'
#NgModule({
declarations: [
TableBasicComponent // < --- added here
],
imports: [
],
providers: []
})
export class DashboardModule { }
I have existing website, which is build with angular1+requirejs and php. I would like to add angular2 (which I have already added, using angular2-cli).
I don't need angular1 to communicate with angular2, so we don't have to do ng-upgrade
I want to bootstrap angular2 components outside app component typescript file.
I'm bit confused on how to do this, because everything is in typescript and after compiled, they are completely different.
I'm trying to load different component per page, sometime one and sometime more then one.
Actually, first to all you need to provide more information. But, on the big picture, you have create a root module and declare component that belong to it, the same for directives and so on. Ex.
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import
{ AppComponent } from './app.component';
#NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
bootstraping the module:
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
anyway, you can check this to get some idea ngModule
This is how to boostrap with javascript.
Creating module:
(function(app) {
app.AppModule =
ng.core.NgModule({
imports: [ ng.platformBrowser.BrowserModule ],
declarations: [ app.AppComponent ],
bootstrap: [ app.AppComponent ]
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));
bootstraping:
(function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic
.platformBrowserDynamic()
.bootstrapModule(app.AppModule);
});
})(window.app || (window.app = {}));
I have the Angular 2 application working in the mixed mode with Angular 1. My main.ts file looks like:
declare var angular: any;
var moduleName = 'myApp';
import { AppComponent } from './app/app.component';
import { upgradeAdapter, UpgradeManager } from './app/index';
UpgradeManager.prototype.upgradeProviders();
UpgradeManager.prototype.addProviders();
angular.module(moduleName).directive('myApp', upgradeAdapter.downgradeNg2Component(AppComponent));
upgradeAdapter.bootstrap(document.body, [moduleName]);
That was working until Angular 2 RC 4. Now with the new modules in Angular 2 RC 5 the recomendation is to create app.module.ts file so I have the following:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
bootstrap: [AppComponent]
})
export class AppModule { }
My question is how can we bootstrap that module using the upgrade adapter from the "main.ts" file?
Found the solution here:
https://github.com/angular/angular/issues/10656
You need to add your app module to when constructing the upgrade adapter object.