请添加一个@Pipe/@Directive/@Component注释。错误

Question

我在这里陷入了困境。我遇到这样的错误。

compiler.es5.js:1694未捕获错误：模块“AppModule”声明的意外值“LoginComponent”。请添加一个@Pipe/@Directive/@Component注释。语法错误（compiler.es5.js:1694）位于compiler.es5.js:15595位于Array.forEach（<匿名>）位于CompileMetadataResolver.webpackJsonp…/..//compiler/@anglel/compiler.es5.js。CompileMetadataResolver.getNgModuleMetadata（compiler.es5.js:15577）位于JitCompiler.webpackJsonp…/..//compiler/@anglel/compiler.es5.js。Jit编译器_loadModules（compiler.es5.js:26965）位于JitCompiler.webpackJsonp…/..//compiler/@anglel/compiler.es5.js。Jit编译器_compileModuleAndComponents（compiler.es5.js:26938）位于JitCompiler.webpackJsonp…/..//编译器/@angular/compailer.es5.js。JitCompiler.compileModuleAsync（compiler.es5.js:26867）位于PlatformRef_.webpackJsonp…/..//core/@anglel/core.es5.js。平台参考号_bootstrapModuleWithZone（core.es5.js:4536）在平台参考.webpackJsonp…/..//core/@anglel/core.es5.js。PlatformRef_.bootstrapModule（core.es5.js:4522）位于对象…/../..//src/main.ts（main.ts:11）

我的登录组件如下所示

从“@anglel/Core”导入{Component}；@组件({选择器：“登录组件”，templateUrl:“/login.component.html“})导出类LoginComponent{}

应用模块.ts

从“@anglel/platform-browser”导入{BrowserModule}；从“@angleg/core”导入{NgModule}；从“@anglel/forms”导入{FormsModule}；从“@anglel/common”导入{CommonModule}从“@anglel/http”导入{HttpModule}；从“@angle/forms”导入{ReactiveFormsModule}；从“@anglel/router”导入{RouterModule，Routes}；从“”导入{AppComponent}/主/应用程序组件'；从“”导入{LoginComponent}/login/login.component'；const appRoutes:路由=[｛路径：“”，重定向到：“登录”，路径匹配：“完整”｝，{path:“home”，组件：AppComponent}，{path:“login”，组件：LoginComponent}];@Ng模块({导入：[浏览器模块，RouterModule.forRoot（appRoutes），],声明：[应用程序组件，登录组件],提供者：[]，引导：[AppComponent]})导出类AppModule{}

当我尝试将LoginComponent导入到声明中时，出现了此错误。我是不是遗漏了什么。

Answer 1

虽然不是上述具体示例的解决方案，但您收到此错误消息的原因可能有很多。当我意外地将共享模块添加到模块声明列表而不是导入列表时，我得到了它。

在app.module.ts中：

从“”导入｛SharedModule｝/modules/shared/shared.module'；@Ng模块({声明：[//不应该在此处添加。。。],导入：[共享模块],

Answer 2

如果要导出该模块中的另一个类，请确保它不在中间@组件和您的类组件例如：

@组件（｛…｝）导出类ExampleClass{}导出类ComponentClass{}-->这将导致此错误。

修复：

导出类ExampleClass{}@组件（{…}）导出类ComponentClass{}

Answer 3

您的导入中有一个拼写错误登录组件的文件

从“@anglel/Core”导入{Component}；

它是小写的c（c），不是大写

从“@angular/core”导入｛Component｝；

Answer 4

当您错误地将共享服务添加到appmodules中的“declaration”而不是添加到“provider”时，会出现此错误。

Answer 5

就我而言，我不小心在申报单中添加了包裹，但它应该是进口的。

Answer 6

另一个解决方案如下，发生这种情况时，我把家庭服务在里面申报科在里面应用模块.ts而我应该把家庭服务在里面提供者部分正如你在下面看到的家庭服务在里面声明：[]位置不正确家庭服务在中提供商：[]在正确的位置。

从“@anglel/platform-browser”导入{BrowserModule}；从“@angleg/core”导入{NgModule}；从“@anglel/http”导入{HttpModule}；从“”导入{AppRoutingModule}/app-routing.module'；从“”导入{AppComponent}/应用程序组件'；从'导入{HomeComponent}/components/home/home.component'；从“”导入{HomeService}/组件/home/home.service'；@Ng模块({声明：[应用程序组件，家庭组件，HomeService//此处会出现错误],导入：[浏览器模块，浏览器动画模块，应用程序路由模块],提供者：[HomeService//设置HomeService的正确位置],引导：[AppComponent]})导出类AppModule{}

希望这对你有帮助。

Answer 7

我声明了一个没有styleUrls属性的组件，如下所示：

@组件({选择器：“app-server”，templateUrl:“/server.component.html'})

而不是：

@组件({选择器：“app-server”，templateUrl:“/server.component.html'，styleUrls:['./server.component.css']})

添加styleUrls属性解决了这个问题。

Answer 8

当我在组件装饰器中使用另一个类而不是组件时，我遇到了同样的错误。

组件类必须紧跟在组件装饰器之后

@组件({选择器：“app-smsgtrecon”，templateUrl:“/smsgtrecon.component.html'，styleUrls:['./smsgtrecon.component.css']，提供者：[ChecklistDatabase]})//此原因问题将此问题移至组件装饰器/***待办事项节点*/导出类TodoItemNode{children:TodoItemNode[]；item：字符串；}导出类SmsgtreconComponent实现OnInit{

将TodoItemNode移动到组件装饰器的顶部后，它工作了

解决方案

//此原因问题将此问题移至组件装饰器/***待办事项节点*/导出类TodoItemNode{children:TodoItemNode[]；item：字符串；}@组件({选择器：“app-smsgtrecon”，templateUrl:“/smsgtrecon.component.html'，styleUrls:['./smsgtrecon.component.css']，提供者：[ChecklistDatabase]})导出类SmsgtreconComponent实现OnInit{

Answer 9

在我的案例中，我错误地添加了以下内容：

@组件({选择器：“app-some-item”，templateUrl:“/some-item.component.html'，styleUrls:['./some-item.component.scss']，提供者：[ConfirmationService]})声明var配置：任意；

而正确的形式是：

声明var配置：任意；@组件({选择器：“app-some-item”，templateUrl:“/some-item.component.html'，styleUrls:['./some-item.component.scss']，提供者：[ConfirmationService]})

Answer 10

当我错误地将服务添加到app.module.ts的声明部分时，出现了此错误

Answer 11

如果导入错误，则会出现上述错误。例如，有时可以在TestBed.configureTestingModule中添加服务文件。以及导入材质组件时，例如从

从“@angler/material/dialog”导入{MatDialogModule}

不是来自

从“@angler/material”导入{MatDialogModule}

Answer 12

我想用浏览器模块在共享模块中（导入和导出）。这是不允许的，所以我不得不使用通用模块相反，它奏效了。

Answer 13

我讨厌这样，但重新开始ng发球这可能是因为我在项目中创建了新的文件夹和文件，而angular-cli没有检测到它们。

Answer 14

可能的原因之一是从没有.组件后缀。文件名应为组件名称组件.ts.组件名称.ts将产生此错误

Answer 15

TLDR公司; 服务或模块应进入进口

---

在我的例子中，这个问题只有在运行测试时才出现，因为我在`declaration中意外地添加了我的模块但应该是进口货而不是这样：

beforeEach（异步（（）=>{测试床配置测试模块({声明：[MyComponent，MyCustomModule]，}).compileComponents（）；}));

更改为：

beforeEach（异步（（）=>{测试床配置测试模块({声明：[MyComponent]，导入：[MyCustomModule]}).compileComponents（）；}));