自定义组件示意图viewEncapsulation未定义

时间:2019-08-05 20:38:14

标签: angular angular-schematics

我正在尝试将Angular的默认组件模板扩展为可用于团队的自定义模板。我已经通读/跟随了一些教程,尽管似乎没有一个能完成我想完成的任务。无论如何,我认为我已经到达了一个大多数情况下都可以正常工作的地方,但是我遇到了“未定义viewEncapsulation”错误,这有点含糊。我将其范围缩小到我从模板中的@ schematics / angular复制的代码:

import { Component, OnInit<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
//                                 ^^^ HERE ^^^
@Component({
  selector: '<%= selector %>',<% if(inlineTemplate) { %>
  template: `
    <p>
      <%= dasherize(name) %> works!
    </p>
  `,<% } else { %>
  templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %>
  styles: []<% } else { %>
  styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>']<% } %><% if(!!viewEncapsulation) { %>,
  encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
  changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
})
export class <%= classify(name) %>Component implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

当我浏览@ schematics / angular中的代码时,我认为问题可能出在我的schema.json上,但是更新似乎无效。然后我以为可能是生成的schema.js,但是运行npm run build似乎并没有生成与我正在建模的代码匹配的代码。

如何更新我的schema.js?如果那不是问题,那么如何解决viewEncapsulation错误?

-文件-

schema.json

{
    "$schema": "http://json-schema.org/schema",
    "id": "CricutSchematicsComponent",
    "title": "Cricut Design Space Component",
    "type": "object",
    "properties": {
        "path": {
            "type": "string",
            "format": "path",
            "description": "The path to create the component.",
            "visible": false
        },
        "project": {
            "type": "string",
            "description": "The name of the project.",
            "$default": {
                "$source": "projectName"
            }
        },
        "name": {
            "type": "string",
            "description": "The name of the component.",
            "$default": {
                "$source": "argv",
                "index": 0
            },
            "x-prompt": "What name would you like to use for the component?"
        },
        "inlineStyle": {
            "description": "Specifies if the style will be in the ts file.",
            "type": "boolean",
            "default": false,
            "alias": "s"
        },
        "inlineTemplate": {
            "description": "Specifies if the template will be in the ts file.",
            "type": "boolean",
            "default": false,
            "alias": "t"
        },
        "viewEncapsulation": {
            "description": "Specifies the view encapsulation strategy.",
            "enum": ["Emulated", "Native", "None", "ShadowDom"],
            "type": "string",
            "alias": "v"
        },
        "changeDetection": {
            "description": "Specifies the change detection strategy.",
            "enum": ["Default", "OnPush"],
            "type": "string",
            "default": "Default",
            "alias": "c"
        },
        "prefix": {
            "type": "string",
            "description": "The prefix to apply to generated selectors.",
            "alias": "p",
            "oneOf": [
                {
                    "maxLength": 0
                },
                {
                    "minLength": 1,
                    "format": "html-selector"
                }
            ]
        },
        "styleext": {
            "description": "The file extension to be used for style files.",
            "type": "string",
            "default": "css"
        },
        "spec": {
            "type": "boolean",
            "description": "Specifies if a spec file is generated.",
            "default": true
        },
        "flat": {
            "type": "boolean",
            "description": "Flag to indicate if a directory is created.",
            "default": false
        },
        "skipImport": {
            "type": "boolean",
            "description": "Flag to skip the module import.",
            "default": false
        },
        "selector": {
            "type": "string",
            "format": "html-selector",
            "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."
        },
        "entryComponent": {
            "type": "boolean",
            "default": false,
            "description": "Specifies if the component is an entry component of declaring module."
        },
        "lintFix": {
            "type": "boolean",
            "default": false,
            "description": "Specifies whether to apply lint fixes after generating the component."
        }
    },
    "required": ["name"]
}

schema.ts

export interface Schema {
    /**
     * Specifies the change detection strategy.
     */
    changeDetection?: ChangeDetection;
    /**
     * Specifies if the component is an entry component of declaring module.
     */
    entryComponent?: boolean;
    /**
     * Specifies if declaring module exports the component.
     */
    export?: boolean;
    /**
     * Flag to indicate if a directory is created.
     */
    flat?: boolean;
    /**
     * Specifies if the style will be in the ts file.
     */
    inlineStyle?: boolean;
    /**
     * Specifies if the template will be in the ts file.
     */
    inlineTemplate?: boolean;
    /**
     * Specifies whether to apply lint fixes after generating the component.
     */
    lintFix?: boolean;
    /**
     * Allows specification of the declaring module.
     */
    module?: string;
    /**
     * The name of the component.
     */
    name: string;
    /**
     * The path to create the component.
     */
    path?: string;
    /**
     * The prefix to apply to generated selectors.
     */
    prefix?: string;
    /**
     * The name of the project.
     */
    project?: string;
    /**
     * The selector to use for the component.
     */
    selector?: string;
    /**
     * Flag to skip the module import.
     */
    skipImport?: boolean;
    /**
     * Specifies if a spec file is generated.
     */
    spec?: boolean;
    /**
     * The file extension to be used for style files.
     */
    styleext?: string;
    /**
     * Specifies the view encapsulation strategy.
     */
    viewEncapsulation?: ViewEncapsulation;
}
/**
 * Specifies the change detection strategy.
 */
export declare enum ChangeDetection {
    Default = "Default",
    OnPush = "OnPush"
}
/**
 * Specifies the view encapsulation strategy.
 */
export declare enum ViewEncapsulation {
    Emulated = "Emulated",
    Native = "Native",
    None = "None",
    ShadowDOM = "ShadowDom"
}

index.ts

import {
    Rule,
    // Tree,
    apply,
    url,
    applyTemplates,
    move,
    chain,
    mergeWith,
    externalSchematic
} from '@angular-devkit/schematics';
import { strings, normalize /*experimental*/ } from '@angular-devkit/core';
import { Schema as ComponentSchema } from './schema';

export function component(options: ComponentSchema): Rule {
    return chain([
        externalSchematic('@schematics/angular', 'component', options),
        // (tree: Tree) => {
        () => {
            const templateSource = apply(url('./files'), [
                applyTemplates({
                    classify: strings.classify,
                    dasherize: strings.dasherize,
                    name: options.name
                }),
                move(normalize(options.path as string))
            ]);

            return chain([mergeWith(templateSource)]);
        }
    ]);
}

0 个答案:

没有答案