Angular2：非常奇怪的行为，错误抱怨一个未导入的组件，即使它是在 app.module 中导入的答案

【问题标题】：Angular2: Very strange behaviour, error complaining about a component that's not imported even though it is imported in app.moduleAngular2：非常奇怪的行为，错误抱怨一个未导入的组件，即使它是在 app.module 中导入的
【发布时间】：2017-02-06 17:32:59
【问题描述】：

我正忙于一个 Angular2 应用程序并且遇到了一些非常奇怪的事情......我使用 angular-cli 创建了一个名为 GoodsReceivedComponent 的新组件。当我将组件导入我的 app.module.ts 和 app.routing.ts 时，我没有收到任何构建错误，但是当我在 app.routing.ts 中添加 GoodsReceived 的路径时，我收到一个错误，提示 GoodsReceivedComponent 不是任何模块的一部分，但它被导入我的 app.module... 知道这里可能出了什么问题吗？

我的代码：

goods-received.component.ts：

export class GoodsReceivedComponent implements OnInit {

在 app.module.ts 中：

import { GoodsReceivedComponent } from './Components/goods-received/goods-received.component';

declarations: [
    AppComponent,
    ProductComponent,
    CheckBarcodesComponent,
    HomeComponent,
    NavigationComponent,
    SettingsComponent,
    StockTransactionItemComponent,
    StockTakeComponent,
    spinners.CircleComponent,
    LoaderComponent,
    ErrorComponent,
    GoodsReceivedComponent  
  ],

在 app.routing.ts 中：

  import { GoodsReceivedComponent } from './components/goods-received/goods-received.component';

  const appRoutes : Routes = [
{path: "settings", component: SettingsComponent },
    {path: "checkBarcodes", component: CheckBarcodesComponent },
    {path: "home", component: HomeComponent},
    {path: "", redirectTo: 'home', pathMatch: 'full'},
    {path: "stockTake", component: StockTakeComponent}
    {path: "goodsReceived", component: GoodsReceivedComponent}
];

我的错误：

runtime_compiler.js:215Uncaught Error: Component GoodsReceivedComponent is not part of any NgModule or the module has not been imported into your module.
    at RuntimeCompiler._createCompiledHostTemplate (http://localhost:4200/main.bundle.js:38664:19)
    at http://localhost:4200/main.bundle.js:38623:37
    at Array.forEach (native)
    at http://localhost:4200/main.bundle.js:38621:45
    at Array.forEach (native)
    at RuntimeCompiler._compileComponents (http://localhost:4200/main.bundle.js:38612:43)
    at RuntimeCompiler._compileModuleAndComponents (http://localhost:4200/main.bundle.js:38539:37)
    at RuntimeCompiler.compileModuleAsync (http://localhost:4200/main.bundle.js:38530:21)
    at PlatformRef_._bootstrapModuleWithZone (http://localhost:4200/main.bundle.js:27267:25)
    at PlatformRef_.bootstrapModule (http://localhost:4200/main.bundle.js:27249:21)
RuntimeCompiler._createCompiledHostTemplate @ runtime_compiler.js:215
(anonymous) @ runtime_compiler.js:174
(anonymous) @ runtime_compiler.js:172
RuntimeCompiler._compileComponents @ runtime_compiler.js:163
RuntimeCompiler._compileModuleAndComponents @ runtime_compiler.js:90
RuntimeCompiler.compileModuleAsync @ runtime_compiler.js:81
PlatformRef_._bootstrapModuleWithZone @ application_ref.js:328
PlatformRef_.bootstrapModule @ application_ref.js:310
(anonymous) @ main.ts:12
__webpack_require__ @ bootstrap 1f81207…:52
(anonymous) @ zone.js:1428
__webpack_require__ @ bootstrap 1f81207…:52
webpackJsonpCallback @ bootstrap 1f81207…:23
(anonymous) @ main.bundle.js:1
client:38 [WDS] Errors while compiling.
client:80 [default] C:\Users\Deon\Documents\trade-link\barcode-checker\src\app\app.routing.ts:16:1 
',' expected.
errors @ client:80
sock.onmessage @ socket.js:37
EventTarget.dispatchEvent @ eventtarget.js:51
(anonymous) @ main.js:274
SockJS._transportMessage @ main.js:272
EventEmitter.emit @ emitter.js:50
WebSocketTransport.ws.onmessage @ websocket.js:35
wrapFn @ zone.js:698
ZoneDelegate.invokeTask @ zone.js:265
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:335

【问题讨论】：

你能显示完整的 app.module.ts 吗？我们甚至没有看到@NgModule
我建议你在这一行加逗号：{path: "stockTake", component: StockTakeComponent}
在 app.module.ts 中导入语句 import { GoodsReceivedComponent } from './Components/goods-received/goods-received.component';组件有大写“c”
谢谢@JSNinja 好点:) 请添加它作为答案，以便我可以接受它...奇怪的是 angular-cli 将 import 语句添加到 app.module.ts...

标签： html angular angular-cli

【解决方案1】：

在 app.module.ts 文件中，import 语句中有错字

这一行：

import { GoodsReceivedComponent } from './Components/goods-received/goods-received.component';

应该是：

import { GoodsReceivedComponent } from './components/goods-received/goods-received.component';

注意'from'后面的'./Components'应该是'./components'

【讨论】：