I have a web style left from angular 1 which includes sass and and bundle of js libs (jquery, bootstrap, animo, etc...) is it possible to integrate them to angular 2? if so, then how? I tried including them into index.html, no errors and no style. I understand that components are view encapsulated. Do you just add them to systemjs and css in index.html?
Add a comment
|
2 Answers
Yes you can, check a sample code below that does exactly that. Of interest to you will be these lines of code:
styles: [
require('./app.component.scss')
],
encapsulation: ViewEncapsulation.None,
The first one imports sass file while the other line allows angular2 to apply the styles globally to the entire angular2 app.
import {
Component,
ViewEncapsulation,
OnInit
} from '@angular/core';
import {
ROUTER_DIRECTIVES,
} from '@angular/router';
@Component({
moduleId: module.id,
selector: 'ch',
templateUrl: 'app.component.html',
styles: [
require('./app.component.scss')
],
encapsulation: ViewEncapsulation.None,
directives: [
ROUTER_DIRECTIVES,
],
providers: [
]
})
export class AppComponent{
}
For JS libs the best strategy would be to include them using npm install {yourlibs} --save then add them to systemjs build config file. Check this url for more information on how to go about it https://github.com/angular/angular-cli/wiki/3rd-party-libs#adding-underscore-library-to-your-project
3 Comments
jsonDoge
But in the end, I will have to rewrite the whole design (html) to separate components with the use of the loaded js libraries right?
kabangi julius
yes you will have to, but it is worthy it. Check this out to accelerate the process ngmigrate.telerik.com/topics
jsonDoge
thanks for clearifying :) First I'll try to redowloading the libraries with jspm and then load them with systemjs.
for external libs just include them on page and use declare let somelib; syntax after import statements
import {something} from 'sometbing';
declare let somelib;
@Component({...})
export class tralala{
somemethod(){
somelib.somethibg();
}
}
and in index.html for example
<script src="somelib.js"></script>
