22
votes

I'm trying to get AOT compilation setup with angular-cli. I've got a directive that inherits from an abstract class, and I'm getting an error during compilation that angular can't determine what module the abstract class belongs to. I can't add it to the declarations array of the NgModule, so what's the right way to go about this? My code structure looks like this,

//...imports
export abstract class TutorialDirective  {
    //...base class logic
}

@Directive({
    selector: '[tut]',
    exportAs: 'tut'
})
export class DefaultTutorialDirective extends TutorialDirective {
    //...calls into the base class for some shared stuff.
}

Error looks like this

ERROR in Cannot determine the module for class TutorialDirective in /test-app/src/app/tutorial/directive/tutorial.directive.ts!

My AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

import { TutorialService } from './tutorial/tutorial.service';
import { TutorialDirective, DefaultTutorialDirective } from './tutorial/directive/tutorial.directive';

@NgModule({
  declarations: [
    AppComponent,
    DefaultTutorialDirective
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [TutorialService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ok after some debugging, if I make it not abstract and add it to declarations it works. Does this mean I can't mark a class as abstract? That doesn't seem right...

2
Add the code for your module app.module.tsAravind
@Aravind ok. I cannot add the TutorialDirective to the declarations array. Just letting you know.Steveadoo
Ok, if I make it not abstract and add it to declarations it works. Does this mean I can't mark a class as abstract? That doesn't seem right...Steveadoo
I didnt mean the declarations array. I meant about your application's module specification codeAravind
@Aravind I've posted that.Steveadoo

2 Answers

12
votes

Remove the @Component decorator from the abstract class, replacing it with an @Injectable() decorator.

0
votes

Yes.. It is true that if you create a abstract class and try using it as a directive controller, it will not work the reason is here at the documentation

Highlighted part of the documentation as below enter image description here

When ever you create a directive the Angular creates a new instance of the directive's controller class. When you use an abstract class, you cannot have instance for it and hence it fails in your case