otro - pasar parametros entre componentes angular 4
angular2 cómo cambiar el prefijo predeterminado del componente para detener las advertencias de tslint (8)
Parece que cuando creo una aplicación Angular 2 usando Angular cli. Mi prefijo de componente predeterminado es raíz de la aplicación para AppComponent. Ahora, cuando cambio el selector a otra cosa, diga "abc-root"
@Component({
selector: ''abc-root'',
templateUrl: ''./app.component.html'',
styleUrls: [''./app.component.css'']
})
vscode me advierte
[tslint] The selector of the component "AppComponent" should have prefix "app"
-
Ajuste su
angular-cli.json
: "prefix": "defaultPrefix" para que angular-cli lo use para generar componentes. -
Ajust
tslint.json
así:"directive-selector": [ true, "attribute", ["prefix1", "prefix2", "prefix3"], "camelCase" ], "component-selector": [ true, "element", ["prefix1", "prefix2", "prefix3"], "kebab-case" ],
Debe modificar dos archivos tslint.json y .angular-cli.json, suponga que desea cambiar a myprefix :
En el archivo tslint.json solo modifique los siguientes 2 atributos:
"directive-selector": [true, "attribute", "app", "camelCase"],
"component-selector": [true, "element", "app", "kebab-case"],
cambiar "aplicación" a "myprefix"
"directive-selector": [true, "attribute", "myprefix", "camelCase"],
"component-selector": [true, "element", "myprefix", "kebab-case"],
En el archivo angular.json solo modifique el prefijo de atributo: (Para la versión angular menor que 6, el nombre del archivo es .angular-cli.json)
"app": [
...
"prefix": "app",
...
cambiar "aplicación" a "myprefix"
"app": [
...
"prefix": "myprefix",
...
Si en el caso necesita más de un prefijo como @Salil Junior señala:
"component-selector": [true, "element", ["myprefix1", "myprefix2"], "kebab-case"],
Si crea un nuevo proyecto usando Angular cli, use esta opción de línea de comando
ng new project-name --prefix myprefix
En realidad, con Angular Cli, puede cambiar la etiqueta "prefijo", dentro de la matriz "apps" en su
angular-cli.json
, ubicada en la aplicación raíz.
Cambiando por "TheBestPrefix", así.
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "TheBestPrefix",
"mobile": false,
"styles": [
"styles.css"
],
"scripts": [],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
]
Cuando genera un nuevo componente usando CLI,
ng g component mycomponent
la etiqueta del componente tendrá el siguiente nombre
"TheBestPrefix-mycomponent"
Gracias a @Aniruddha señalando los cambios en angular 7:
cree
tslint.json
en
src/app/shared
para extender la
app/tslint.json
:
{
"extends": "../../tslint.json",
"rules": {
"directive-selector": [
true,
"attribute",
"shared",
"camelCase"
],
"component-selector": [
true,
"element",
"shared",
"kebab-case"
]
}
}
Una cosa: si en app.component.spec se burla de un componente del módulo compartido, se quejará de que su selector de simulación comienza con ''compartido'' en lugar de comenzar con ''aplicación''. Supongo que eso tiene sentido: debería crear mis simulacros en el módulo de donde vinieron.
Mi solución (usando Angular 7) fue agregar esta línea 1 a la sección del selector de componentes en el archivo tslint.json
"prefijo-componente",
Para
angular 6/7
adelante, habrá un
tslint.json
dentro de su carpeta
/src
que contiene las reglas
tslist
para sus componentes y directivas.
{
"extends": "../tslint.json",
"rules": {
"directive-selector": [
true,
"attribute",
"directivePrefix",
"camelCase"
],
"component-selector": [
true,
"element",
"compoenent-prefix",
"kebab-case"
]
}
}
Cambiar en ese archivo solucionará el problema.
Para las últimas versiones del archivo Angular CLI, angular-cli.json fue renombrado como angular.json. Todo lo demás es lo mismo.
tslint.json
"selector de componentes": [verdadero, "elemento", "aplicación", "caso kebab"]
este ''caso kebab'' obliga a cualquier selector de componentes a estar con este caso ''-''.
por ejemplo , puede tener un selector como '' app-test '', '' app-my '' como este.
Y en lo que respecta a su error, debe iniciar el selector de componentes con ''aplicación'' como acabo de mencionar en el ejemplo.
No creo que deba hacer ningún cambio en tslint.json, aunque resolvería su problema, pero no es una buena práctica cambiar en tslint.
Gracias