ng build -prod 返回错误答案

【问题标题】：ng build -prod returns errorng build -prod 返回错误
【发布时间】：2020-04-25 06:37:01
【问题描述】：

我正在使用 angular cli 来构建和运行一个 angluar2 应用程序。

当我跑步时：ng server 一切正常。但是当我运行ng build -prod 时，它会抛出错误：

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

这是 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();
    }

}

和 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 {}

知道怎么回事吗？

【问题讨论】：

Unexpected directive 'ObservableComponent import by book 组件你能列出来吗
@Rahul Singh：我应该列出什么？不太明白。但我在这里找到了一种解决方法：Angular build under Angular cling build -prod --aot=false
Observable 组件和 Book
@Rahul Singh：添加
是共享模块吗

标签： angular angular-cli

【解决方案1】：

NgModule.imports 只接受模块；不是组件。

因此，您应该从导入数组中删除 ObservableComponent 和 PromiseComponent。

例如

@NgModule({
    declarations: [
        ObservableComponent,
        PromiseComponent
    ],
    imports: [],
    exports: [
        ObservableComponent,
        PromiseComponent
    ]
})

来自 Angular 文档： 下一部分是配置 @NgModule 的地方，通过说明属于它的组件和指令（声明）以及它使用的其他模块（导入）。有关@NgModule 结构的更多信息，请务必阅读Bootstrapping。

【讨论】：