繁体   English   中英

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

[英]Angular 11 'error NG2007: Class is using Angular features but is not decorated.' But the class is Decorated

在我的 angular 工作区中,我有几个库和 2 个应用程序。

我的库中有一个组件 class“LogoutComponent”。 我使用 ng build mms-common --watch 编译了它。 我没有错误。

我目前正在使用的应用程序称为“我的”当我使用 ng serve my 时,我得到一个

错误:dist/mms-common/fesm2015/mms-common.js:99:7 - 错误 NG2007: Class 正在使用 Angular 功能但未修饰。 请添加一个明确的 Angular 装饰器。

99 class 注销组件 ~~~~~~~~~~~~~~~

但是我装饰了组件。 不仅如此,我现在还没有使用注销组件。 我尝试了以下方法:

  • 删除了 dist/mms-common 目录
  • 使用 --prod 标志编译 mms-common 目录
  • 删除了 dist/my 目录
  • 删除并重新创建了 LogoutComponent
  • 从 LogoutComponent 中删除除装饰器和基本 class 调用之外的所有代码
  • 使用和不使用 --prod 标志编译我的应用程序
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(['']);
  }

} 

我的库模块是

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 { }

我的公共 api 是

export * from './lib/models/user';
export * from './lib/services/user.service';
export * from './lib/mms-common.module';
export * from './lib/logout/logout.component'

我在运行ng serve时遇到了类似的情况。 对于第 3 方库和我的所有 Angular 组件,即使它们已被装饰,我也会收到该错误。

对我来说问题是我的目标是es6 我将tsconfig.json更改为目标es5

{
  "compileOnSave": true,
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "enableIvy": true,
  },
  "compilerOptions": {
    "lib": ["es6", "dom"],
    "module": "es6",
    "target": "es5", // <-- CHANGE THIS FROM es6 to es5
    ...
  },
  ...
}

所以答案就在“我的”项目中。 我创建了一个组件并使用了 mms-common 库导出的服务之一。 但是关于新组件的导入声明是:

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

正确的导入形式应该是

import { UserService } from 'mms-common';

问题本身是由 Visual Studio 代码自动完成造成的。

这确实解决了问题,但为什么编译器没有指向新组件。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM