Directive not working in Ionic 4

Ionic Framework
1

Hello,

I’m having a problem with directives in Ionic 4. I’m trying to make a simple directive that just outputs something with console.log. To begin with, I tried importing the directive into app.module and declaring it, then importing it into my component and adding the attribute to the HTML element, but nothing happens. No errors, no logs in the console or anything.

Then I did a bit of reading and found out that some people have had trouble with directives and “lazy loading” in Ionic 4. I’ve since tried creating a “SharedModule” that imports, declares and exports the directive, then importing it to my app.module and component, but it still doesn’t seem to work at all as before.

I’m not sure if I’m doing this right so I’d really appreciate if anyone could scan my code and see if something doesn’t look right. Here are the main parts:

directives/marker.directive.ts

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[atlasMarker]'
})
export class MarkerDirective {

  constructor(element:ElementRef) {
    console.log(element);
  }

}

shared/shared.module.ts

import { NgModule } from '@angular/core';
import { MarkerDirective } from '../directives/marker.directive';

@NgModule({
  declarations: [
    MarkerDirective
  ],
  exports: [
    MarkerDirective
  ]
})
export class SharedModule { }

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  entryComponents: [],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    SharedModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

map/map.page.ts

import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';
import { HttpService } from '../services/http.service';
import { MapService } from '../services/map.service';
import mapboxgl from 'mapbox-gl/dist/mapbox-gl';

import { SharedModule } from '../shared/shared.module';

@Component({
  selector: 'app-map',
  templateUrl: './map.page.html',
  styleUrls: ['./map.page.scss'],
})
export class MapPage {

  map:mapboxgl.Map;
  poll:any;

  constructor(
    private navController:NavController,
    private httpService:HttpService,
    private mapService:MapService
  ) { }

  ionViewDidEnter() {
    this.mapService.openMap();

    this.poll = this.httpService.poll('map/poll', {}, 4000).subscribe((data) => {
      console.log(data);
    });
  }

  ionViewDidLeave() {
   this.mapService.closeMap(); 
   this.poll.unsubscribe();
  }
}

map/map.page.html

<ion-content>
  <div id="map"></div>

  <div atlasMarker>Test</div>
</ion-content>

Sorry for the amount of code here. I’m not sure what’s happening so I thought it’d be better to include most of it. I did remove some parts that have nothing to do with the problem. I’m hoping there’s a simple solutions that I’m just not seeing.

Thanks very much to anyone that has a look!

2

Just got it work. I forgot to declare the directive in the component’s module!

2 Likes
3

I got some error when tying this. please help me

ERROR Error: "Uncaught (in promise): Error: Unexpected module 'SharedModule' declared by the module 'Tab1PageModule'. Please add a @Pipe/@Directive/@Component annotation.
4

When I remove the directive from app.module.ts, and then add it to the declaration of page,where I am using it, then it has started working for me.

3 Likes