Angular2：行为很奇怪，即使组件未导入到app.module中，也会出现错误提示该组件未导入

Question

我正在忙于Angular2应用程序，并且遇到了一些非常奇怪的事情……我使用angular-cli创建了一个名为GoodsReceivedComponent的新组件。 当我将组件导入到app.module.ts和app.routing.ts中时，我没有收到任何构建错误，但是当我在app.routing.ts中添加了GoodsReceived的路径时，我收到一条错误消息，提示GoodsReceivedComponent不是任何模块的一部分，但是将其导入到我的app.module中。

我的代码：

货物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

Answer 1

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

这行：

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

应该：

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

请注意，“ from”之后的“ ./components”应为“ ./components”