CODEWITHSUNDEEP
angularangular-cli
k.vincent
k.vincent

Reputation: 4143

ng build -prod returns error

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

Answers (1)

Kildareflare
Kildareflare

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

Related Questions