Angular 11 '错误 NG2007：Class 正在使用 Angular 功能但未修饰。 但是 class 是装饰的

Question

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'

Answer 1

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
    ...
  },
  ...
}

Answer 2

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.