I have a file structure like this :
/root
--/app
----app.ts
--/components
----/banner
------banner.ts
------banner.css
--index.html
I have import banner.ts inside app.ts like this
import {Banner} from '../components/banner/banner';
In banner.ts, I want to get the banner.css file so I write this:
import {Component} from 'angular2/core';
#Component({
selector: 'banner',
templateUrl: '../components/banner/banner.html',
styleUrls: ['../components/banner/banner.css']
})
This works, but when I change to this, it failed:
styleUrls: ['./banner.css']
I also try styleUrls: ['banner.css'], failed
Based on my understanding, the './' means in the same directory, but why I get an 404 error?
I am using the most updated Angular2
Yes, Only a proper relative file path will be recognized by Angular2 currently. The Path should actually start from the root like below to be safe, Again we are setting the guidelines from what is working and not working with the beta version, I am sure this is bound to change in the future. But for now, for beta0 the below code is the norm for referencing supplement files for the component.
import {Component} from 'angular2/core';
#Component({
selector: 'banner',
templateUrl: './app/components/banner/banner.html',
styleUrls: ['./app/components/banner/banner.css']
})
Checkout other large example as well, they all use this pattern.
A component inside a large Angular2 Sample
Hi I am happy to see this:
In visual studio 2015
open the banner.ts
open the solution explorer and expand the project
find the css file
right click the css file and drag to the banner.ts
you will find the reference on the top of the banner.ts
Hope it helps
Related
I am currently working on a already existing angular project - upon expecting the html page via google dev tools I found some weird additions to the html - like _nghost... and _ngcontent...
How do I get rid of those props? Ive never seen them in other projects.
I already found out, that it may have something to do with ViewEncapsulation in Angular, therefore I changed my tsconfig.json file so it includes the following statement:
Sadly no changes ...
Thanks in advance for your help!
Add ViewEncapsulation.None, like that:
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: [ './app.component.scss' ],
encapsulation: ViewEncapsulation.None
})
But in that case you need to work with styles specificity by yourself.
I am referring to this Stackblitz Link to understand ViewContainerRef.
However, I want to create a component with proper HTML, .ts and CSS file. In the example, I am referring they have coded the HTML in .ts file itself but my Html is big so I want to keep it in a separate file.
If I have a separate .ts and HTML file then how can I call them using viewContainerRef.
I would highly appreciate if someone can point to a stackblitz example also.
If all you want to do is separate the files you can just use templateUrl in the Component.ts and put your template in that file.
#Component({
selector: 'dynamic-component',
templateUrl: './dynamic-component.html'
})
Today, I noticed that Angular adds its version information in the app-root as following:
<app-root _nghost-c0="" ng-version="5.2.0">
And even when I build in the production environment, it seems to be present. I don't know what's the main goal for adding that information there ? Isn't it a security issue to show the angular version publicly ? Thanks
It's an old question, but still relevant and the accepted answer could be misleading.
According to Miško Hevery: "This is there intentionally, so that tools such an augury, can detect that it is an angular page and can provide useful UI."
It is not a security issue in itself, but hiding it isn't "security by obscurity" either, as that would mean that's all the security measures you take.
In fact using obscurity is a good practice as it makes information gathering (recon) harder for the attacker, but one must never rely on this alone.
Angular uses this attribute to tag the element that was used to bootstrap the application.
See also https://github.com/angular/angular/commit/a4de214e2be5048f1261d043cc467a5ecaa5c909
Hiding it would only be security by obscurity which is not security.
Go to your root component and add this piece of code to remove ng-version attribute:
#Component({
selector: '[data-app]',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(private _elementRef: ElementRef) {
}
ngOnInit(): void {
this._elementRef.nativeElement.removeAttribute("ng-version");
}
}
In my Angular web project I use different two or three types of header in many pages in Angular 4 project. Is there a way to code up your HTML header code and footer code just once and have it included or injected in one or more of your pages. To give some clue I need an alternative for #Section in ASP.NET MVC Razor witch in each page we can add an extra code to it (I know this is a server side thing, but I need it in angular client side).
Is there an official/recommended way to do this?
You should create components for that. Something like:
#Component({
selector: 'myheader',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
...
And then add it to the template of the other pages where you want to use it (or to the app.component.html if you want it everywhere). Something like:
<myheader></myheader>
If you need different data on the header depending on the component you are at, just create a HeaderService, and pass data to the header from the component through it.
The question is on the same lines as this one, however the other way around.
I want to embed an Angular 1.x app inside an Angular 2 app. More specifically this app. I understand that there are ways to upgrade elements individually, however this being a large project, I simply want to embed this in one of my tabs on the Angular 2 app.
I tried a very naive approach where I copied the dist folder in one of my components and I am trying to use the same index.html with
<div ng-app="app">
<div ng-view="">
</div></div>
Now I am trying to load all the minifed javascript (which includes angular 1.x library as well as some app specific javascript files and css) into my main angular 2 app in its own index.html . Then I load the index.html from the dist directory through my component. The problem seems that Angular 1 library doesnt seem to load.
I have a few questions;
Would it help if the libraries(js) files are loaded as ts. I assume that it is possible to load Angular 1 and 2 libraries simultaneously.
If it would, is there an easy way to get the js files converted to .ts files.
EDIT
I got this to work by using the angular.boostrap call as shown below.
Following is my code snippet for my component
import {Component, AfterViewInit, OnInit} from 'angular2/core';
declare var angular:any;
#Component({
selector: 'server-monitor',
templateUrl: 'app/components/server-monitor/dist/index.html',
styleUrls: ['app/components/server-monitor/dist/styles/vendor-c0a35f80.css',
'app/components/server-monitor/dist/styles/main-0c4cc0e5.css',
],
})
export class ServerMonitorComponent implements AfterViewInit, OnInit{
ngOnInit(){
angular.bootstrap(document, ['app']);
}
}
However, now I have run into a different problem. The original project makes a lot of http calls very frequently(2 sec by default) to get live stats about the system.
When I run this embedded into my app, I can see the calls are made but my page keeps refreshing and doesn't show anything on the graph. I understand I have to modify something where it makes the http calls, but no sure where.
In addition to the above edit, I modified $routeProvider in the original app and it seems to work just fine