Я создаю свои собственные схемы. И в моем схематическом проекте все работает отлично. Но когда я импортирую проект в проект 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()');
}
}
Поскольку это мой первый схематический проект, я действительно не знаю, что / где искать для этой ошибки. И я немного поражен тем, что в схематическом проекте все работает нормально, но не в угловом проекте.
Пара наблюдений (если у вас есть публичная ссылка на репо, которой можно поделиться, это поможет подтвердить поведение):
Во-первых, чтобы передать параметр
name
без необходимости указывать ключ и значение (ng generate page test
вместоng generate page --name=test
), мне обычно приходилось настраивать мойschema.json
файл для установки значения по умолчанию с помощью позиционного аргументаargv
:Вы можете увидеть более полный рабочий пример для этого в простой схематический проект моего репозитория на github.
Что касается второй проблемы, которую вы подняли, мне удалось установить ваш пакет NPM и создать страницу с помощью команды schematics
ng generate akasuaptics:page --name=test
, которую вы указали, без каких-либо ошибок. Вы все еще сталкиваетесь с этой ошибкой на своем компьютере?Я сам только что наткнулся на эту ошибку. Когда я казнил
из другого проекта, который был связан через ссылку npm, тогда
host.read('package.json')
, например, будет читать null. Имейте в виду, что файл по-прежнему будет виден черезhost.exists('package.json')
.Когда я выполнил команду из репозитория, в котором пакет был фактически установлен, а не просто связан, она сработала.
Я предполагаю, что это проблема разрешений на запись, и дерево Angular Builder не должно иметь доступа к файлам вне основного проекта по соображениям безопасности.