Как создать собственную схему для создания нового углового проекта

Question

Я пытаюсь создать новую схему, которая может работать, не выполняя сначала "ng new project-name", а затем "ng g my-schematic"

Когда я даже запускаю свою схему локально, я должен сначала установить мою коллекцию по умолчанию CLI для моей схемы, что не имеет смысла, и я не уверен, почему это происходит.

Я получаю сообщение об ошибке: "не могу найти мою схему в @ schematics / angular"

Моя схема очень проста, и я бы хотел, чтобы она запускалась и генерировала все леса проекта при запуске.

export function nextGen(options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    const rule = mergeWith(apply(url('./files'), [
      template({
        ...options
      }),
      forEach((fileEntry: FileEntry) => {
        console.log(fileEntry.path);
        if (tree.exists(fileEntry.path)) {
          tree.overwrite(fileEntry.path, fileEntry.content);
          return null;
        }
        return fileEntry;
      })
    ]))
    return rule(tree, _context); 
  }
};

Есть ли известный и простой способ сделать это? Я не уверен, что попытка "расширить" "новую" схему или использовать "ng new project-name collection = my-schematic" может сработать?

Если любой из этих вариантов возможен, что это будет означать с точки зрения переданного дерева, и как вы можете манипулировать им для создания файлов, содержащихся в библиотеке "./files"?

Спасибо!

Answer 1

В вашем вопросе есть несколько вопросов, связанных со схемой, поэтому я постараюсь ответить на них как можно больше. Во-первых, звучит так, будто вы хотите запустить одну команду Angular CLI для генерации вашего базового проекта. Я никогда не использовал вариант, который вы предлагаете, чтобы изменить коллекцию схем по умолчанию для глобальной установки CLI и вместо этого запустить ng new project-name --collection collection-name,

Теперь поговорим о двух вариантах, которые вы рассмотрели: расширение или перезапись. Если бы вы продлили значение по умолчанию ng new schematic, ваше правило схемы может выглядеть примерно так:

const ruleChain = chain([
                    externalSchematic('@schematics/angular', 'ng-new', options),
                    mergeWith(apply(url('./files'), [
                    template({
                        ..options
                    }), ...

Вы выполняете команду Angular schematic ng-new, а затем добавляете все новые файлы, которые требуются вашему приложению, которые не являются частью Angular по умолчанию, например, новый файл компонента, который требуется вашему приложению, перезаписывают любые файлы в Angular по умолчанию, где вам нужно существенно изменить поведение, например, обновленный app.module.ts который импортирует ваш пользовательский компонент или изменяет любые файлы, которые немного отличаются, например, добавляет новую зависимость к package.json (Как правило, я буду изменять файлы JSON и перезаписывать .ts файлы.

Что касается вашего вопроса о дереве файлов, то при запуске правила оно будет пустым, по умолчанию будет установлено ~30 угловых файлов после ng-new схема запускается, и у вас есть настроенное приложение после выполнения остальных правил в вашей цепочке. Вы можете назвать эту схему, как вам угодно в collection.jsonлибо звоню ng-new, который скрывает стандартное угловое поведение или ng-new-custom, что позволит ему жить бок о бок со схемой нового приложения по умолчанию.

Еще одно схематическое поведение, которое я нашел полезным, - указать на схеме collection.json что схема расширяет угловую схему, т. е. "extends":"@schematics/angular" а затем в цепочке правил для нового приложения измените angular.json использовать мою пользовательскую схему по умолчанию. По моему опыту, это создает более унифицированный и цельный опыт для пиров, которые не так хорошо знакомы с определением схематической коллекции.

Answer 2

Моя проблема на самом деле очень похожа, но приведенное выше решение, похоже, не работает.

Я хотел бы сначала вызвать Angular ng-new, а затем мое правило должно работать с результатом.

так что-то вроде:

 chain([
                    externalSchematic('@schematics/angular', 'ng-new', options),
                    schematic('someRule', options)
])

но это не работает. Моему правилу нужен angular.json, который должен создать ngNew, и, очевидно, он еще не существует, когда мое правило выполняется.

Итак, есть ли способ либо дождаться завершения внешней схемы, а затем запустить другую схему, либо указать второй схеме использовать дерево, возвращаемое ng-new?

Так нравится:

chain([
      externalSchematic('@schematics/angular', 'ng-new', options),
      mergeWith(apply(source(/* source created by ng-new */), [
        schematic('someStuff', options)
      ])
    )])

@ericksoen?