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”