0

In my angular workspace I have several libraries and 2 apps.

I have a Component class "LogoutComponent" in my library. I compiled it using ng build mms-common --watch. I have no errors.

The app I am currently working on is called "my" When I use ng serve my, I get an

Error: dist/mms-common/fesm2015/mms-common.js:99:7 - error NG2007: Class is using Angular features but is not decorated. Please add an explicit Angular decorator.

99 class LogoutComponent ~~~~~~~~~~~~~~~

But I have the component decorated. Not only that but I am not using the Logout Component at this time. I have tried the following:

  • deleted the dist/mms-common directory
  • compiled the mms-common directory using --prod flag
  • deleted the dist/my directory
  • deleted and recreated the LogoutComponent
  • removing all of the code from the LogoutComponent excluding the decorator and basic class call
  • compiled the my app with and without --prod flag
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { User } from '../models/user';
import { UserService } from '../services/user.service';

@Component({
  selector: 'lib-logout',
  templateUrl: './logout.component.html',
  styleUrls: ['./logout.component.css']
})
export class LogoutComponent implements OnInit {

  constructor(
    private router: Router,
    private userService: UserService
  ) { }

  ngOnInit(): void {
    this.userService.logout();
    this.userService.currentUser = new User();
    this.router.navigate(['']);
  }

}

My library module is

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { LogoutComponent } from './logout/logout.component';

@NgModule({
  declarations: [LogoutComponent],
  imports: [
    RouterModule
  ],
  exports: [LogoutComponent]
})
export class MMSCommonModule { }

my public-api is

export * from './lib/models/user';
export * from './lib/services/user.service';
export * from './lib/mms-common.module';
export * from './lib/logout/logout.component'
Ken
  • 423
  • 6
  • 13

2 Answers2

3

I had a similar situation when running ng serve. I was getting that error for 3rd party libraries and for all my Angular components even though they were decorated.

The problem for me was that I was targeting es6. I changed my tsconfig.json to target es5:

{
  "compileOnSave": true,
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "enableIvy": true,
  },
  "compilerOptions": {
    "lib": ["es6", "dom"],
    "module": "es6",
    "target": "es5", // <-- CHANGE THIS FROM es6 to es5
    ...
  },
  ...
}
colossatr0n
  • 2,215
  • 1
  • 12
  • 18
0

So the answer was in the "my" project. I had created a component and was using one of the services exported by the mms-common library. But the import statement on the new component was:

import { UserService } from 'dist/mms-common/fesm2015/mms-common';

The proper form of the import should have been

import { UserService } from 'mms-common';

The problem itself was created by visual studio code auto complete.

This does solve the problem but why did the compiler did not point to the new component.

Ken
  • 423
  • 6
  • 13