如何在 angular.json 的脚本部分使用全局模式？

Question

I have a hybrid AngularJS/Angular application that will take some time to complete migration to fully be an Angular app. While this process occurs, I'd like to move away from the previous build system to using the CLI and webpack to manage all of the old AngularJS scripts as well. This is possible as I've done it before by adding all of my scripts to the scripts section in angular.json like the following:

"scripts": [              
  "src/app/angularjs/app.js",
  "src/app/angularjs/controllers/main.js",
  "src/app/angularjs/services/someService.js",
  "src/app/angularjs/controllers/someController.js"           
],

This works well and the CLI builds via ng serve and ng build continue to work for the hybrid bootstrapped app as needed. The problem I'm running into now is manually listing each file for the current application I'm migrating is not ideal. I have hundreds of scripts that need to be added, and what I need is to be able to use a globbing pattern like the following:

"scripts": [              
  "src/app/angularjs/**/*.js"
],

The problem is this syntax from what I can tell is not supported. The glob pattern is supported in the assets section of angular.json as stated here but not in the scripts section: https://angular.io/guide/workspace-config#assets-configuration

In the scripts section I can't find a similar solution. It does have an expanded object API, but nothing that solves the problem I can tell to select all .js files from a particular directory as listed here: https://angular.io/guide/workspace-config#styles-and-scripts-configuration

Is it possible by some means to use a glob pattern or similar approach to select all files of a directory for the scripts section in angular.json so I don't have to manually list out hundreds of individual .js files?

Answer 1

The Bad News

The scripts section does not support the same glob patterns that the assets section does.

The Good News(?)

Since you're transitioning away from AngularJS, you hopefully won't have any new files to import in the future, so you could just generate the list of all the files you need to import.

Make your way to the src/app/angular directory and run the following:

find . -iregex '.*\.\(js\)' -printf '"%p",\n'

That will give you your list, already quoted for your convenience. You may need to do a quick search/replace (changing "." to "src/app/angularjs"), and don't forget to remove the last comma, but once you've done that once you should be all set.

The Extra News

You can further filter out unwanted files with -not , so (per your comment) you might do:

find . -iregex '^.*\.js$' -not -iregex '^.*_test\.js$' -printf '"%p",\n'

And that should give you all your.js files without your _test.js files.

KISS

Of course, this isn't a complex pattern, so as @atconway points out below, this will work just as well:

find . -iname "*.js" -not -iname "*_test.js" -printf '"%p",\n'

I'll keep the above, though, for use in situations where the full power of regex might come in handy.

Answer 2

I wanted to extend an anser of @JasonVerber and here is a Node.JS code and therefore (I believe) cross-platform.

Firstly install find package and then save contents from the snippet in some file.js . Afterwards, specify paths so that they resolve to where you wan't to get your files from and where to put the resulting file to.

After that node file-name.js and this will save all found file paths to the resultPath in result.txt ready to Ctrl+A , Ctrl+C , Ctrl+V .

const find = require('find');
const path = require('path');
const fs = require('fs');

// BEFORE USAGE INSTALL `find` package

// Path to the folder where to look for files
const sourcePath = path.resolve(path.join(__dirname, 'cordova-app', 'src'));
// Path that will be removed from absolute path to files
const pathToRemove = path.resolve(path.join(__dirname, 'cordova-app'));
// Path where to put result.txt
const resultPath = path.resolve(path.join(__dirname, './result.txt'));
// Collects the file paths
const res = [];
// Path with replaced \ onto /
const pathToRemovehReplaced = pathToRemove.replace(/\\/g, '/');

// Get all fils that match a regex
find.eachfile(/\.js$/, sourcePath, file => {
    // First remove all \ with / and then remove the path from root to source so that only relative path is left
    const fileReplaced = file.replace(/\\/g, '/').replace(`${pathToRemovehReplaced}/`, '');
    // Surround with quoutes
    res.push(`"${fileReplaced}"`);
}).end(() => {
    // Write file and concatenate results with newline and commas
    fs.writeFileSync(resultPath, res.join(',\r\n'), 'utf8');
    console.log('DONE!');
});

The result I got while testing ( /\.ts$/ for regex)

"src/app/app.component.spec.ts",
"src/app/app.component.ts",
"src/app/app.module.ts",
"src/environments/environment.prod.ts",
"src/environments/environment.ts",
"src/main.ts",
"src/polyfills.ts",
"src/test.ts"