Il semble que je ne puisse pas faire fonctionner les directives dans mon application. Je n'obtiens aucune erreur et lorsque je reproduis dans stackblitz, cela fonctionne bien. J'étais j'ai eu ce problème il y a un certain temps lorsque j'ai essayé d'implémenter cette directive pour la première fois, j'ai hésité en disant que c'était en fait un problème dans mon application avec les "directives personnalisées" elles-mêmes... personne n'a fini par répondre à cette question. Je viens maintenant vers vous avec plus d'informations.
Faites-moi savoir. Voyez-vous quelque chose qui ne va pas dans ma configuration ? Qu'est-ce qui me manque ? J'ai l'impression d'avoir tout essayé.
Voici ce que j'ai essayé :
Travaux dans Stackblitz : Je sais comment faire une directive .
Mais cette directive très simple ne fonctionne pas dans mon application (voir le code en bas) (précision : ne fonctionne pas = je ne vois pas le console.log ou l'attribut que la directive shadow est censée appliquer)... Modèle : 
Directive : 
Module : 
J'ai essayé de le déclarer dans le module le plus proche comme ci-dessus, mais j'ai aussi essayé dans app.module. De plus, j'ai essayé d'importer par le biais d'un module dédié (je ne pense pas avoir besoin de l'exportation mais cela ne devrait pas faire de mal). Module dédié : 
Modèle :
<!-- <div #windowsnap class="blade-container" (mouseup)="BladeSnappiness()" (mousedown)="CloseSidebar()"> -->
<div #windowsnap class="blade-container" windowsnap>
<!-- level 1 -->
<org-management-blade *ngIf="level1 === 'orgBlade'"> </org-management-blade>
<org-profile *ngIf="level1 === 'orgProfile'"> </org-profile>
<!-- level 2 -->
<org-setup *ngIf="level2 === 'orgSetup'"></org-setup>
<!-- level 3 -->
<org-create-admin *ngIf="level4 === 'orgCreateAdmin'"></org-create-admin>
<org-new-security-profile *ngIf="level4 === 'newSecProfile'"></org-new-security-profile>
<org-railroad-filter *ngIf="level4 === 'newSecRailroadFilter'"></org-railroad-filter>
<!-- level 4 -->
<org-security-permissions *ngIf="level5 === 'newSecPerms'"></org-security-permissions>
<!-- level 5 -->
</div>Directive :
import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';
@Directive({ selector: '[windowsnap]' })
export class ShadowDirective {
constructor(elem: ElementRef, renderer: Renderer2) {
renderer.setStyle(elem.nativeElement, 'background-color', 'blue');
}
@HostListener('mouseenter') CloseSidebar() {
console.log('windowsnap directive');
}
}Module :
@NgModule({
imports: [
CommonModule,
ReactiveFormsModule,
ScrolltocomponentModule,
MaskedTextBoxAllModule,
AgGridModule,
// ShadowModule
],
providers: [
],
declarations: [
OrgManagementComponent,
OrgManagementBladeComponent,
OrgSetupComponent,
OrgInfoComponent,
OrgAdminsComponent,
OrgSecurityProfilesComponent,
OrgRailroadFilterComponent,
OrgSecurityPermissionsComponent,
OrgNewSecurityProfileComponent,
OrgCustMappingComponent,
OrgCreateAdminComponent,
OrgProfileComponent,
ShadowDirective
]
})
export class OrgManagementModule { }Module dédié :
import { ShadowDirective } from './shadow.directive';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
],
declarations: [
ShadowDirective
],
providers: [
],
exports: [
ShadowDirective
]
})
export class ShadowModule { }package.json :
{
"name": *omitted*,
"version": "0.0.1",
"scripts": {
"ng": "ng",
"start": "ng serve --ssl true",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"dev": "babel-watch server.js",
"compodoc": "./node_modules/.bin/compodoc -p src/tsconfig.app.json"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.1",
"@angular/common": "^6.0.1",
"@angular/compiler": "^6.0.1",
"@angular/core": "^6.0.1",
"@angular/elements": "^6.0.6",
"@angular/forms": "^6.0.1",
"@angular/http": "^6.0.1",
"@angular/platform-browser": "^6.0.1",
"@angular/platform-browser-dynamic": "^6.0.1",
"@angular/platform-server": "^6.0.1",
"@angular/router": "^6.0.1",
"@microsoft/microsoft-graph-types": "1.3.0",
"@nguniversal/module-map-ngfactory-loader": "^6.0.0",
"@syncfusion/ej2-ng-inputs": "^16.2.53",
"ag-grid": "^18.1.2",
"ag-grid-angular": "^18.1.0",
"ag-grid-enterprise": "^18.1.1",
"angular2-uuid": "^1.1.1",
"aspnet-prerendering": "^3.0.1",
"core-js": "^2.5.6",
"document-register-element": "^1.7.2",
"powerbi-client": "^2.6.4",
"rxjs": "^6.1.0",
"rxjs-compat": "^6.1.0",
"syncfusion-javascript": "^16.3.22",
"touch": "^3.1.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.1",
"@angular-devkit/build-ng-packagr": "~0.6.8",
"@angular/cli": "~6.0.1",
"@angular/compiler-cli": "^6.0.1",
"@angular/language-service": "^6.0.1",
"@azure/msal-angular": "^0.1.2",
"@compodoc/compodoc": "^1.1.5",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^2.0.2",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"msal": "^0.2.3",
"ng-packagr": "^3.0.0-rc.2",
"protractor": "^5.4.0",
"ts-node": "~5.0.1",
"tsickle": ">=0.25.5",
"tslib": "^1.7.1",
"tslint": "~5.9.1",
"typescript": "~2.7.2"
}
}stackblitz package.json
@angular/common5.0.0
@angular/compiler5.0.0
@angular/core5.0.0
@angular/forms5.0.0
@angular/platform-browser5.0.0
@angular/platform-browser-dynamic5.0.0
@angular/router5.0.0
@ng-bootstrap/ng-bootstrap1.0.0
core-js2.5.1
rxjs5.5.2
zone.js
