Develop Reference

Unexpected value 'DecoratorFactory' imported by the module 'AppModule' in Kendo UI

I am trying to start an Angular / Kendo UI project but the browser gives me the following error in the console:
Error: Unexpected value 'DecoratorFactory' imported by the module 'AppModule'. Please add a #NgModule annotation.
(there's no error in the CLI while compiling, only at runtime)
This is my app.module.ts file:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule, Injectable } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { TabModule } from 'angular-tabs-component';
import { HttpClient, HttpClientModule, HttpClientJsonpModule } from '#angular/common/http';
import { NotificationModule } from '#progress/kendo-angular-notification';
import { FormsModule } from '#angular/forms';
import { GridModule } from '#progress/kendo-angular-grid';
import { LayoutModule } from '#progress/kendo-angular-layout';
import { ToolBarModule } from '#progress/kendo-angular-toolbar';
import { DialogModule } from '#progress/kendo-angular-dialog';
import { EditService } from './edit.service';
import { ReactiveFormsModule } from '#angular/forms';
import { GridEditFormComponent } from './edit-form.component';
#NgModule({
imports: [ BrowserModule, BrowserAnimationsModule, AppRoutingModule, TabModule, HttpClientModule, HttpClientJsonpModule, FormsModule, GridModule, NotificationModule,
Injectable, LayoutModule, ToolBarModule, DialogModule, EditService, ReactiveFormsModule, GridEditFormComponent ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
I needed to import NgModule, else the #NgModule interface declaration gives me this error:
Cannot find name 'NgModule'. Did you mean 'module'?
Note: this is not a duplicate of this question (I followed the instructions but that didn't fix the error).

Unexpected value 'undefined' imported by the module 'AppModule' angular js 6

I want to use Owl Carousel slider in my Angular page. I have installed Owl Carousel and imported all needed code. However, I get this error when I run the file:
Unexpected value 'undefined' imported by the module 'AppModule' angular js 6
Can anyone kindly find the error for me?
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { HeaderComponent } from './header/header.component';
import { NavbarComponent } from './navbar/navbar.component';
import { FooterComponent } from './footer/footer.component';
import { AppRoutingModule } from './app-routing.module';
import {OwlCarousel} from 'angular-owl-carousel2';
import { SlickModule } from 'ngx-slick';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent,
HeaderComponent,
NavbarComponent,
FooterComponent
],
imports: [
BrowserModule,
AppRoutingModule,
OwlCarousel,
SlickModule.forRoot()
//RouterModule.forRoot(appRoutes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

ERROR while adding custom module to parent app module in angular

I am trying to add new module to make my angular application more modular and for lazy loading.
app.module
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { HttpModule,BrowserXhr } from "#angular/http";
import { LabService } from './lab/lab.service';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { OphistoryModule } from './Ophistory/ophistory.Module' //after adding this module ERROR is thrown
#NgModule({
imports:[
BrowserModule,
HttpModule,
FormsModule,
RouterModule.forRoot([
{path: 'labDetails/:labName',component:LabDetailsComponent},
{path:'showRoboLog/:labName',component:RoboLogComponent},
{path:'',component:LabComponent}
]),
OphistoryModule
],
declarations: [
AppComponent
],
bootstrap:[ AppComponent ]
})
export class AppModule {}
app.component
import { Component } from '#angular/core';
import { Http } from '#angular/http';
import { LabComponent } from './lab/lab.component';
import { LabService } from './lab/lab.service';
#Component({
selector: 'my-app',
template: `
<router-outlet></router-outlet>
`,
providers: [LabService]
})
export class AppComponent {
constructor() {
}
pageTitle: string = 'ABC';
}
The problem I am facing after adding the module OphistoryModule is an error message saying
my-app' is not a known element:
But when I give the same name to the selector of my newly added module it is working fine.
Here are the custom module and component
ophistory.module
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser'
import { OphistoryComponent } from './ophistory.component'
import {CommonModule} from '#angular/common'
#NgModule({
imports: [RouterModule.forChild([
{path: 'test',component:OphistoryComponent}
]),CommonModule],
declarations:[OphistoryComponent]
})
export class OphistoryModule {}
ophistory.component
import { Component } from '#angular/core'
import { LabService } from '../lab/lab.service'
#Component({
selector:'my-ap',
templateUrl:'./ophistory.component.html'
})
export class OphistoryComponent {
constructor (private _service:LabService){}
}
Can anyone confirm if it is a bug in angular 2 or any other solution you have?

Angular2 (CLI): separate common components and logic-components

In angular 1.4 i was using ng6 boilerplate and it was generating an awesome structure, like:
app
common
components
services
etc...
Now i'm trying to learn angular2 with typescript. I'm using Angular CLI.
And i wanna port some of structure from angular 1.4: i mean to separate, for example, select-component from customer-component etc.
And i created such structure:
components - is a module, customer is a module, list - is a component.
How in my app.component.html i can use list-component? Like:
<app-customer-list></app-customer-list>
I have troubles with importing modules & components.
I do it in a such way:
**app.module.ts**
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
import { ComponentsModule } from './components/components.module';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ComponentsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
--
**components.module.ts**
import { NgModule } from '#angular/core';
import { CustomerModule } from './customer/customer.module';
#NgModule({
imports: [
CustomerModule
],
declarations: []
})
export class ComponentsModule { }
--
**customer.module.ts**
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { CustomerComponent } from './customer.component';
import { ListComponent } from './list/list.component';
#NgModule({
imports: [
CommonModule
]
declarations: [CustomerComponent, ListComponent]
})
export class CustomerModule { }
--
**list.component.ts**
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-customer-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
What i do wrong? How can i correctly import them?

You are forgetting to export your components/modules in those modules that you are sharing with other modules:
**customer.module.ts**
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { CustomerComponent } from './customer.component';
import { ListComponent } from './list/list.component';
#NgModule({
imports: [
CommonModule
]
declarations: [CustomerComponent, ListComponent],
exports: [CustomerComponent, ListComponent]
})
export class CustomerModule { }
**components.module.ts**
import { NgModule } from '#angular/core';
import { CustomerModule } from './customer/customer.module';
#NgModule({
imports: [
CustomerModule
],
exports: [CustomerModule]
declarations: []
})

Component.js file not created for new component angular 2

I am adding a new user component and also import in app.module file but when run server user.component js file not created
folder structure
typescript
components
user
user.component.ts
app.component.ts
app.module.ts
main.ts
app.module.js
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { UserComponent } from './components/user/user.component';
#NgModule({
imports: [ BrowserModule ],
declarations: [
AppComponent,
UserComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
user.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'user-listing',
template: '<h4>Users here</h4>'
})
export class UserComponent {
}