Schematics работает в схематическом проекте, но не в угловом проекте

Я создаю свои собственные схемы. И в моем схематическом проекте все работает отлично. Но когда я импортирую проект в проект angular и пытаюсь сгенерировать компонент, я получаю сообщение об ошибке. Вы можете найти пакет на npm:

"akasuaptics": "~0.0.1"

В моем схематическом проекте я пытаюсь создать его с помощью:

schematics .:page --> Schematic input does not validate against the schema [...] Data path "" should have required property 'name'
schematics .:page test--> Schematic input does not validate against the schema [...] Data path "" should have required property 'name'
schematics .:page --name=test -->success

В моем проекте angular я пытаюсь сгенерировать:

ng generate akasuaptics:page --> Cannot read property 'split' of undefined
ng generate akasuaptics:page test --> Cannot read property 'split' of undefined
ng generate akasuaptics:page --name=test -->Cannot read property 'split' of undefined

введите здесь описание изображения

schema.json

{
  "$schema": "https://json-schema.org/schema",
  "id": "SchematicsPage",
  "title": "Suaptics Page Options Schema",
  "type": "object",
  "properties": {
    "path": {
      "type": "string",
      "description": "The path to create the page.",
      "default": "app/pages",
      "visible": false
    },
    "sourceDir": {
      "type": "string",
      "description": "The path of the source directory.",
      "default": "src",
      "alias": "sd",
      "visible": false
    },
    "appRoot": {
      "type": "string",
      "description": "The root of the application.",
      "visible": false
    },
    "name": {
      "type": "string",
      "description": "The name of the page."
    },
    "inlineStyle": {
      "description": "Specifies if the style will be in the ts file.",
      "type": "boolean",
      "default": false,
      "alias": "is"
    },
    "inlineTemplate": {
      "description": "Specifies if the template will be in the ts file.",
      "type": "boolean",
      "default": false,
      "alias": "it"
    },
    "viewEncapsulation": {
      "description": "Specifies the view encapsulation strategy.",
      "enum": ["Emulated", "Native", "None"],
      "type": "string",
      "alias": "ve"
    },
    "changeDetection": {
      "description": "Specifies the change detection strategy.",
      "enum": ["Default", "OnPush"],
      "type": "string",
      "default": "Default",
      "alias": "cd"
    },
    "prefix": {
      "type": "string",
      "description": "The prefix to apply to generated selectors.",
      "default": "page",
      "alias": "p"
    },
    "styleext": {
      "description": "The file extension to be used for style files.",
      "type": "string",
      "default": "scss"
    },
    "spec": {
      "type": "boolean",
      "description": "Specifies if a spec file is generated.",
      "default": true
    },
    "flat": {
      "type": "boolean",
      "description": "Flag to indicate if a dir is created.",
      "default": false
    },
    "skipImport": {
      "type": "boolean",
      "description": "Flag to skip the module import.",
      "default": true
    },
    "selector": {
      "type": "string",
      "description": "The selector to use for the component."
    },
    "module":  {
      "type": "string",
      "description": "Allows specification of the declaring module.",
      "alias": "m"
    },
    "export": {
      "type": "boolean",
      "default": false,
      "description": "Specifies if declaring module exports the component."
    }
  },
  "required": [
    "name"
  ]
}

index.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const core_1 = require("@angular-devkit/core");
const schematics_1 = require("@angular-devkit/schematics");
const ts = require("typescript");
const stringUtils = require("../strings");
const ast_utils_1 = require("../utility/ast-utils");
const change_1 = require("../utility/change");
const find_module_1 = require("../utility/find-module");
function addDeclarationToNgModule(options) {
    return (host) => {
        if (options.skipImport || !options.module) {
            return host;
        }
        const modulePath = options.module;
        const text = host.read(modulePath);
        if (text === null) {
            throw new schematics_1.SchematicsException(`File ${modulePath} does not exist.`);
        }
        const sourceText = text.toString('utf-8');
        const source = ts.createSourceFile(modulePath, sourceText, ts.ScriptTarget.Latest, true);
        const componentPath = `/${options.sourceDir}/${options.path}/`
            + (options.flat ? '' : stringUtils.dasherize(options.name) + '/')
            + stringUtils.dasherize(options.name)
            + '.page';
        const relativePath = find_module_1.buildRelativePath(modulePath, componentPath);
        const classifiedName = stringUtils.classify(`${options.name}Page`);
        const declarationChanges = ast_utils_1.addDeclarationToModule(source, modulePath, classifiedName, relativePath);
        const declarationRecorder = host.beginUpdate(modulePath);
        for (const change of declarationChanges) {
            if (change instanceof change_1.InsertChange) {
                declarationRecorder.insertLeft(change.pos, change.toAdd);
            }
        }
        host.commitUpdate(declarationRecorder);
        if (options.export) {
            // Need to refresh the AST because we overwrote the file in the host.
            const text = host.read(modulePath);
            if (text === null) {
                throw new schematics_1.SchematicsException(`File ${modulePath} does not exist.`);
            }
            const sourceText = text.toString('utf-8');
            const source = ts.createSourceFile(modulePath, sourceText, ts.ScriptTarget.Latest, true);
            const exportRecorder = host.beginUpdate(modulePath);
            const exportChanges = ast_utils_1.addExportToModule(source, modulePath, stringUtils.classify(`${options.name}Page`), relativePath);
            for (const change of exportChanges) {
                if (change instanceof change_1.InsertChange) {
                    exportRecorder.insertLeft(change.pos, change.toAdd);
                }
            }
            host.commitUpdate(exportRecorder);
        }
        return host;
    };
}
function buildSelector(options) {
    let selector = stringUtils.dasherize(options.name);
    if (options.prefix) {
        selector = `${options.prefix}-${selector}`;
    }
    return selector;
}
function default_1(options) {
    const sourceDir = options.sourceDir;
    if (!sourceDir) {
        throw new schematics_1.SchematicsException(`sourceDir option is required.`);
    }
    return (host, context) => {
        options.selector = options.selector || buildSelector(options);
        options.path = options.path ? core_1.normalize(options.path) : options.path;
        options.module = find_module_1.findModuleFromOptions(host, options);
        const templateSource = schematics_1.apply(schematics_1.url('./files'), [
            options.spec ? schematics_1.noop() : schematics_1.filter(path => !path.endsWith('.spec.ts')),
            options.inlineStyle ? schematics_1.filter(path => !path.endsWith('.__styleext__')) : schematics_1.noop(),
            options.inlineTemplate ? schematics_1.filter(path => !path.endsWith('.html')) : schematics_1.noop(),
            schematics_1.template(Object.assign({}, stringUtils, { 'if-flat': (s) => options.flat ? '' : s }, options)),
            schematics_1.move(sourceDir),
        ]);
        return schematics_1.chain([
            schematics_1.branchAndMerge(schematics_1.chain([
                addDeclarationToNgModule(options),
                schematics_1.mergeWith(templateSource),
            ])),
        ])(host, context);
    };
}
exports.default = default_1;

[email protected]__.page.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import {Mediator,iMediatorable} from 'mediator_akasuap';


import { LoggerService } from '@core/logger/logger.service';


@Component({
  selector: '<%= selector %>',
  templateUrl: './<%= dasherize(name) %>.page.html',
  styleUrls : ['./<%= dasherize(name) %>.page.scss']
})
export class <%= classify(name) %>Page implements OnInit, OnDestroy,iMediatorable {
  private mediator = Mediator.getInstance();
  constructor( private logger: LoggerService) {

  }
  public getName(){
      return "<%= classify(name) %>Page"
  }
  public receive(msg: string, data: any){
    switch(msg){

    }
  }
  public ngOnInit() {
    this.mediator.register(this);
    this.logger.info('<%= classify(name) %>Page: ngOnInit()');
  }

  public ngOnDestroy() {
    this.mediator.unregister(this.getName());
    this.logger.info('<%= classify(name) %>Page: ngOnDestroy()');
  }
}

Поскольку это мой первый схематический проект, я действительно не знаю, что / где искать для этой ошибки. И я немного поражен тем, что в схематическом проекте все работает нормально, но не в угловом проекте.

См. также:  Различные регионы для Firestore DB и Firebase Cloud Functions
Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 2
  1. Su4p

    Пара наблюдений (если у вас есть публичная ссылка на репо, которой можно поделиться, это поможет подтвердить поведение):

    Во-первых, чтобы передать параметр name без необходимости указывать ключ и значение (ng generate page test вместо ng generate page --name=test), мне обычно приходилось настраивать мой schema.json файл для установки значения по умолчанию с помощью позиционного аргумента argv:

        "name": {
            "description": "The name of the workspace",
            "type": "string",
            "$default": {
                "$source": "argv",
                "index": 0
            }
        }
    

    Вы можете увидеть более полный рабочий пример для этого в простой схематический проект моего репозитория на github.

    Что касается второй проблемы, которую вы подняли, мне удалось установить ваш пакет NPM и создать страницу с помощью команды schematics ng generate akasuaptics:page --name=test, которую вы указали, без каких-либо ошибок. Вы все еще сталкиваетесь с этой ошибкой на своем компьютере?

  2. Su4p

    Я сам только что наткнулся на эту ошибку. Когда я казнил

    ng g @myown/schematics:something
    

    из другого проекта, который был связан через ссылку npm, тогда host.read('package.json'), например, будет читать null. Имейте в виду, что файл по-прежнему будет виден через host.exists('package.json').

    Когда я выполнил команду из репозитория, в котором пакет был фактически установлен, а не просто связан, она сработала.

    Я предполагаю, что это проблема разрешений на запись, и дерево Angular Builder не должно иметь доступа к файлам вне основного проекта по соображениям безопасности.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: