We Keep Coding

How to add static css file to NX lib

I'm using NX.dev with Angular projects and I have a few projects and libs.
Im having a few static CSS/SCSS files I want to share for all projects (Apps & libs)
First CSS file - I want to just bundle it in the projects, in order to do that I added it to the project JSON file per app like this.
"targets": {
"build": {
"styles": [
"libs/ui/src/lib/styles/style.bundle.css"
],
}
}
It's working great, But I'm not getting I'm getting the same effect for the libs (It's not working)...
Second SCSS file - this file is a global variable file, I want this file to be available on-demand in the lib SCSS files.
I want each file to be able to do this:
#import "variables";
Not sure how to achieve that.
Any idea how can I get these two files into my libs?
One file should add on compile and one on-demand.
Thanks in advance!

Include AngularJs javascript files into Angular cli

I have a legacy Angular JS application and now working in tandem with few new Angular 5 components using upgrade module. Following this post here
Currently, I need to include all my AngularJs code into my index.html.
But, I want to include all JS files (more than 200) in my angular-cli.json in scripts section like below:
"scripts": [
"../appjs/**"
],
But, ng-build gives me error no such file or directory:\appjs\**.
How to include all the files in the folder in on go avoiding to include all the files one by one.
Here is the image of the folder structure.
Please guide. Thanks.

Unfortunately the scripts: [] attribute doesn't accept globbing patterns. This is alluded to in the documentation:
scripts: An object containing JavaScript script files to add to the
global context of the project. The scripts are loaded exactly as if
you had added them in a tag inside index.html.
So the alternative is to use a powershell script or DOS cmd to list the files and output them to the screen/file and then add all the necessary quotes to paste them into the scripts attribute in the config file.

How do I link to Bootstrap 4 and its scripts?

According to this blog (which is written for BS3), I should add the following lines to the angular.cli.json file.
...
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
...
The problem is that in the distribution I'm using (BS4 Alpha 6), there's no such file. In the dist directory, there's a bunch of files as follows.
alert.js
button.js
carousel.js
collapse.js
dropdown.js
modal.js
popover.js
scrollspy.js
tab.js
tooltip.js
util.js
Do I have to link to them each individually? Am I missing a minified file somewhere? I'm in dist so I assumed that it's the production version.
Should I go about it in a totally different way, perhaps? I'm trying the Angular CLI package since I want to test without Gulp, Grunt nor Webpack. Is there an approach where I can include, reqest, demand or append those file (preferably minified) to my web site?
The styles I've included my simply importing what I needed from the dist like this.
#import "~bootstrap/dist/css/bootstrap.min.css";
However, I'm a bit confused on how to handle JS of the BS.

You're looking in the wrong place.
The files you are seeing are in js/dist/. You should be looking in dist/js/.

grunt task to determine files needed by web app

i'am a newbie and started to build a webapp with yeomans webapp generator and a static html 5 template. The template is able to use over 40 plugins.
The template directoy structure is like:
index.html
--assets
--css
--js
--img
--plugins
--bootstrap
--cs
--fonts
--js
...
...
My project only uses a quite little part of it.
Is it possible to determine which files are used(referenced) within the project,
and copy them automatically with a grunt task to the .tmp and .dist folder?
Currently i used httrack to find that out. But there must be a other way.
(a special grunt task or perhaps a plugin for webstorm ? )
For minifying the output i use the default task with
'clean', 'jshint', 'copy', 'usemin', 'concat','cssmin', 'uglify'
which means:
'useminPrepare', // Looks for those in your HTML
'concat', // Task used to concatenate your JS and CSS
'cssmin', // Minifies your CSS files
'uglify', // Task used to minify your JS
'copy', // Copies files from .tmp/ and src/ into dist/
'usemin' // Updates the references in your HTML with the new files
For the concat task i use this code to make sure all needed files are included:
concat: {
css: {
src: ['src/**/*.css'],
dest: 'dist/assets/css/main.min.css'
},
js: {
src: ['src/**/*.js'],
dest: 'dist/assets/js/main.min.js'
}
The resulting files are quite big. Remember the bunch of plugins.
What must i do to ensure the resulting files (js/css) contain only the needed parts ? As far as i can seen uglify,cssmin etc. doesn't strip the files. Must i include here grunt-uncss or something like that ? The same goes for the html file. After minifing some parts are not working as expected..
(The best would be a generator where i just put in the complete webpage in the src folder, and the grunt build task produce out of the box an optimized dist folder, only with the need files.)
Hopefully you outhere can help me with some good advises for my both problems.
Thx.

How do I Change the Order Scripts / css get inserted During Compile with NG Boilerplate

I'm using NG Boilerplate to create an angularJs application and I'm running into an issue where the JS file containing my login controller gets written to index.html before the loginModule.js file does and this is causing a bunch of errors.
Is there a way to control the order in which JS (and CSS) files get added to the compiled page?

Had this problem too.
The JS files are added alphabetically per module to your index.html. I solved this problem by defining submodules in files that start with an underscore (like _submodule.js) to ensure that it gets added to index.html before the other files that use this module.
More info here: https://github.com/ngbp/ngbp/issues/152
From this thread:
[...] I needed a solution for multi-file modules and came up with something that seems to be working. In a multi-file module folder, I create an _init.js which declares the module:
angular.module( 'ngBoilerplate.about', [
'ui.state',
'placeholders',
'ui.bootstrap'
])
;
And then my other .js files can do this:
angular.module('ngBoilerplate.about')
.controller ...
;