Question

我忙于使用Angular2应用程序并遇到一些非常奇怪的东西......我使用名为GoodsReceivedComponent的angular-cli创建了一个新组件。当我将组件导入我的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'

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

1 个答案: