Angular Schematics，修改angular.json的代码并没有结合在一起

Question

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?

Answer 1

这不是一个解决方案，但我只是创建了另一个项目，复制了所有内容并且工作了。