I've been using schematics to generate an standardized project. I've had a couple of issues, all of them related to modification of the angular.json file
The following code is a sample of what I've tried, is executed within a function that does work (except for another thing), and everything in it does gets executed except for this part, which throws an error:
Cannot read property 'includePaths' of undefined
which doesn't make any sense to me.
Another problem you can see here is that I can't seem to capture the name of the project, for I need to modify the content inside "architect" in the angular.json file, i have to go past the project's name, the workaround I have is to manually input the project's name as
ng add myschemat --name=new-app
But i should be able to capture this property, which I have tried and do get to see it in the console but when replacing
options.name for p (from the commented forEach function) it doesn't work and shows that can't get 'architect property of undefined
import {NodePackageInstallTask} from '@angular-devkit/schematics/tasks';
[...]
if(_host.exists('angular.json')){
const angularStr = _host.read('angular.json') !.toString('utf-8')
const angular = JSON.parse(angularStr)
const projs = (Object.keys( angular['projects'] )).slice(0, 1); //also tried [0]
console.log("App Detection & your options: \n", projs, "\n", options)
// projs.forEach((p: string | number) => {
angular['projects'][options.name]['architect']['build']['options']['stylePreprocessorOptions'] =
{
"includePaths": ["src/scss/"]
}
angular['projects'][options.name]['architect']['build']['options']['es5BrowserSupport']= true;
angular['projects'][options.name]['architect']['build']['options']['styles'].push(
[
"node_modules/devextreme/dist/css/dx.common.css",
"node_modules/devextreme/dist/css/dx.light.css",
"src/styles.scss"
]
)
// });
_host.overwrite('angular.json', JSON.stringify(angular, null, '\t'))
_context.addTask( new NodePackageInstallTask )
}
What should've happenned is to add the object property
"styles": [
"node_modules/devextreme/dist/css/dx.common.css",
"node_modules/devextreme/dist/css/dx.light.css",
"src/styles.scss"
],
"scripts": [],
"es5BrowserSupport": true,
"stylePreprocessorOptions": {
"includePaths": [
"src/scss/"
]
}
yet, when I compile ng add myschemat --name=new-app
the instalation stops and simply shows : Cannot read property 'includePaths' of undefined
This is weird because it actually used to work, I just added a couple of styles and that true property and some changes to the package.json (and even though those happen before this angular.json modification, they don't seem to change anything
Is there something I'm certainly missing here?
