I am busy with an Angular2 app and experiencing something very strange... I created a new component using angular-cli called GoodsReceivedComponent. when I import the component into my app.module.ts and app.routing.ts I don't get any build errors but when I add the path to GoodsReceived in my app.routing.ts I get an error saying GoodsReceivedComponent isn't part of any module but it is imported into my app.module... Any idea what might be going wrong here?
my code:
goods-received.component.ts:
export class GoodsReceivedComponent implements OnInit {
in 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
],
in 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}
];
my error:
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
In the app.module.ts file there is a typo in the import statement
This line:
import { GoodsReceivedComponent } from './Components/goods-received/goods-received.component';
should be:
import { GoodsReceivedComponent } from './components/goods-received/goods-received.component';
Note the './Components' after 'from' should be './components'
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.