Reputation: 4143
I'am using angular cli to build and run an angluar2 App.
When I run: ng server
everything goes fine. But when I run ng build -prod
it throws error:
ERROR in Unexpected directive 'ObservableComponent in /Users/projectName/Dev02/dashboard-app/src/app/book/observable.component.ts' imported by the module 'BookComponent in /Users/projectName/Dev02/dashboard-app/src/app/book/book.component.ts'. Please add a @NgModule annotation.
ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/projectName/Dev02/dashboard-app/src'
@ ./src/main.ts 3:0-74
@ multi ./src/main.ts
Here is the code for observable.component.ts:
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { BookService } from '../_service/book.service';
import { Book } from './book';
@Component({
selector: 'app-observable',
templateUrl: 'observable.component.html',
styleUrls: ['observable.component.css']
})
export class ObservableComponent implements OnInit {
constructor(private bookService: BookService) { }
ngOnInit(): void {
this.fetchBooks();
}
}
and book.component.ts:
import {NgModule, Component, OnInit } from '@angular/core';
import { ObservableComponent } from './observable.component';
import { PromiseComponent } from './promise.component';
@Component({
template: `
<div class="wrapper-obervable-pormise">
<div class="wrapper-observable">
<app-observable></app-observable>
</div>
<div class="wrapper-promise">
<app-promise></app-promise>
</div>
</div>
`,
styleUrls: ['./book.component.css']
})
@NgModule({
declarations: [
ObservableComponent,
PromiseComponent
],
imports: [
ObservableComponent,
PromiseComponent
],
exports: [
ObservableComponent,
PromiseComponent
]
})
export class BookComponent {}
Any Idea what's going wrong?
Upvotes: 0
Views: 694
Reputation: 4768
NgModule.imports only accepts modules; not components.
You should therefore, remove ObservableComponent
and PromiseComponent
from the imports array.
E.g.
@NgModule({
declarations: [
ObservableComponent,
PromiseComponent
],
imports: [],
exports: [
ObservableComponent,
PromiseComponent
]
})
From Angular Docs: The next section is where you configure the @NgModule by stating what components and directives belong to it (declarations) as well as which other modules it uses (imports). For more information on the structure of an @NgModule, be sure to read Bootstrapping.
Upvotes: 1