Question

我正在使用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 {}

任何想法出了什么问题？

Answer 1

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

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

例如

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

从Angular Docs：：下一部分是您在@NgModule上配置的方式，方法是声明@NgModule属于哪个组件和指令（声明）以及它使用的其他模块（导入）。有关@NgModule的结构的更多信息，请确保阅读Bootstrapping。

ng build -prod返回错误

1 个答案: