In general I prefer to add third party resources in .angular-cli.json
{
"styles" : [
"../bower_components/animate.css/animate.css",
"../bower_components/chosen/chosen.css",
"../bower_components/cropper/dist/cropper.css",
"../bower_components/font-awesome/css/font-awesome.min.css",
"../bower_components/nprogress/nprogress.css"
],
"scripts" : [
"../bower_components/jquery/dist/jquery.js",
"../bower_components/bootstrap/dist/js/bootstrap.js",
"../bower_components/bootstrap-progressbar/bootstrap-progressbar.js",
"../bower_components/chosen/chosen.jquery.js",
"../bower_components/cropper/dist/cropper.js",
"../bower_components/fastclick/lib/fastclick.js",
"../bower_components/nprogress/nprogress.js"
]
}
This approach helps me use bower beside Angular 2/4 and also build process consolidates all dependencies in one package. But tons of dependencies make application init time delay. So can defining all the components like this be more of efficient than using resources in components where needed?
For instance: We use datepicker component in contacts and companies pages. Does "Importing datepicker styles from contacts.component.css and companies.component.css action" decrease the load time by sacrificing the size?