kulekci.net kulekci.net      About      My Presentations

Angular 2 Directive Error

For a while, I have been trying to learn AngularJS 2 and typescript. I really like them. Last day, an error occured which is “No Directive annotation found” while I was trying to create a directive and I don’t understand exception why throwing but I spent lots of time on it to solve. The error is :

members:16 Error: (SystemJS) No Directive annotation found on offClickDirective
  Error: No Directive annotation found on offClickDirective
      at new BaseException (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:5116:27)
      at DirectiveResolver.resolve (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:12790:23)
      at CompileMetadataResolver.getDirectiveMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:13097:55)
      at addDirective (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:13367:37)
      at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:13376:77)
      at Array.forEach (native)
      at CompileMetadataResolver._getTransitiveViewDirectivesAndPipes (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:13376:41)
      at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:13348:78)
      at Array.forEach (native)
      at CompileMetadataResolver._verifyModule (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:13348:43)
  Evaluating http://localhost:3000/dist/main.js
  Error loading http://localhost:3000/dist/main.js

I also imported necessary component and classes and this is my component file content:

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

@Directive({
  selector: '[offClick]',
  //inputs: ['offClick'],
  host: {
    '(click)':'onClick($event)'
  }
});

export class offClickDirective {
  @Input('offClick') offClickHandler;
  
  constructor() {}

  ngOnInit() {
    let self=this;
    setTimeout(() => {document.addEventListener('click', self.offClickHandler);}, 0);
  }
  
  ngOnDestroy() {
    let self=this;
    document.removeEventListener('click', self.offClickHandler);    
  }

  closeAllDropdown($event) {
    if ($event.target.classList.contains('dropdown-toggle')) {
        return
      }
      const dropdowns = document.querySelectorAll('.dropdown')
      for (let i = 0; i < dropdowns.length; i++) {
        dropdowns[i].classList.remove('open')
      }
  }

  onClick($event) {
    this.closeAllDropdown($event);
  }
}

After that, I thought that I had to define something to somewhere for example systemjs.config.js, …etc. And I searched it on Google. I found lots of issues and lots of comments about this situation. But, in fact, they were not relevant. Because all of them, was talking about version difference or importing problems. I had already imported all the necessary libraries. Finally, I came accros this post and also found the solution, too. The problem is “;” (semicolon) as usually. I remove my semicolon after @Directive definition and problem solved. This is the last version of the @Directive part of my code.

@Directive({
  selector: '[offClick]',
  //inputs: ['offClick'],
  host: {
    '(click)':'onClick($event)'
  }
}) // removed semicolon was here

Git Submodule

I did not use git submodules in production. This article for only information. Sometimes it can be really good option.

Working more than a year on git, i like that and i want to share some experience from here about submodule.

Submodule is great idea to attach external repos to your project to a path. Now, we can try to create a lib directory and we put some submodules in lib’s subdirectiories. I am exampling to you how the submodules is adding to a repo.

Adding a Submodule to your repository

git submodule add https://github.com/headjs/headjs.git lib/js/headjs
git submodule add https://github.com/marcuswestin/store.js.git lib/js/storejs
git submodule add https://github.com/cebe/smarty.git lib/template-engine/smarty
git submodule add https://github.com/fabpot/Twig.git lib/template-engine/twig

We add submodules to our project now you can see your added library on your status

git status

All your modules writing on “.gitmodules” file which is created by git. You can see with following code your gitmodules file content.

cat .gitmodules

For me, .gitmodules file content is following

[submodule "lib/js/storejs"]
    path = lib/js/storejs
    url = git://github.com/marcuswestin/store.js.git
[submodule "lib/js/headjs"]
    path = lib/js/headjs
    url = git://github.com/headjs/headjs.git
[submodule "lib/template-engine/twig"]
    path = lib/template-engine/twig
    url = https://github.com/fabpot/Twig.git
[submodule "lib/template-engine/smarty"]
    path = lib/template-engine/smarty
    url = https://github.com/cebe/smarty.git

Removing Submodule

If you want, you also can remove some submodules from your project. You can use to remove one or more of your submodule(s).

git submodule rm lib/js/headjs

### Updating Submodule

There are some updates your submodule while you are working with your project. For example, Twig template engine release a new version. You can use to update your submodules following lines in to your submodule’s path.

git submodule update

Cloning a Project with Submodules

To clone a project with its submodules, you can use –recursive parameter of git. You can check following commands.

$ git clone --recursive git@github.com:hkulekci/git-submodule-test.git

That’s all for now. To more information, you can look references part.

References :

PHP Large Size Array

In PHP, we use arrays lots of times and every our projects. In this article, I will try to handle some operations for large size array. For example, we can use in_array method to check if a value exists in an array.

$some_values = array(1, 2, 3, 4, 5);
var_dump(in_array(1, $some_values));
// bool(true)

The result is clear. $some_values array has “1” element as a value. Sometimes we must check all the array to compare each other. For example, we have a number list in an array and we try to check singularity of all elements.

First Example:

$some_values = array(1, 2, 3, 3, 4, 5);
$temporary_values = array();
for ($i = 0; $i < count($some_values); $i++) {
    $found = false;
    for ($j = 0; $j < count($temporary_values); $j++) {
        if ($temporary_values[$j] == $some_values[$i]) {
            $found = true;
            break;
        }
    }
    if (!$found) {
        // Checking or processing some other things
        $temporary_values[] = $some_values[i];
    }
}
print_r($temporary_values); // All elements of array is singular

Second Example:

$some_values = array(1, 2, 3, 4, 5);
$temporary_values = array();
for ($i = 0; $i < count($some_values); $i++) {
    if (!in_array($some_values[$i], $temporary_values)) {
        // Checking or processing some other things
        $temporary_values[] = $some_values[$i];
    }
}
print_r($temporary_values); // All elements of array is singular

In two example, run time is the same and they are O(n2) complexity in worst case. You can check in_array method to understand why they are the same. in_array method use php_search_array method directly. And they have a loop to move on array.

If we have some small array, in_array function save our time. Do we have large size array? If we have an array and it has 10,000+ elements. In this time, php return us some errors like that:

Fatal error: Maximum execution time of 30 seconds exceeded in .... on line 4

Because, our application execution time is more than our php configs. There are two solution for that. First one is change your max_execution_time from your php.ini file. Second one is change your application.

I will try to explain how we can change our application for this spesific problem. Firstly, we will get rid of inner loop.

$some_values = array("a1", "a2", "a3", "a4", "a5", ..., "a999999", "a1000000");
$temporary_array = array();
for ($i = 0; $i < count($some_values); $i++) {
    $temporary_array[$some_values[$i]] = $i;
}
$temporary_values = array();
foreach ($temporary_array as $key => $value) {
    $temporary_values[] = $key;
}
print_r($temporary_values); // All elements of array is singular

To minimize out code, we can use some php standart function. Firstly, we use array_flip to create temporary_array.

$some_values = array("a1", "a2", "a3", "a4", "a5", ..., "a999999", "a1000000");
$temporary_array = array_flip($some_values);
$temporary_values = array();
foreach ($temporary_array as $key => $value) {
    $temporary_values[] = $key;
}
print_r($temporary_values); // All elements of array is singular

Try to use array_keys to get keys of temporary_array.

$some_values = array("a1", "a2", "a3", "a4", "a5", ..., "a999999", "a1000000");
$temporary_array = array_flip($some_values);
$temporary_values = array_keys($temporary_array);
print_r($temporary_values); // All elements of array is singular

Now remove some unused variables from our code.

$some_values = array("a1", "a2", "a3", "a4", "a5", ..., "a999999", "a1000000");
$temporary_values = array_keys(array_flip($some_values));
print_r($temporary_values);

Thank you

Fork me on GitHub