我是新来的,所以请原谅我的愚蠢.

Details

  • 我已经安装了Angular CLI的最新版本
  • 默认情况下,应用程序运行良好

Issue

  • 我决定创建一个新模块,并将其导入应用程序模块
  • 这是我在Angular 2中做过几次的,效果非常好
  • 但是,由于我今天早上运行了Angular CLI的最新版本,导入模块会中断,我收到以下错误:

编译器.es5.js:1689未捕获错误:模块"ProjectsModule"导入了意外的指令"ProjectsListComponent".请添加@NgModule注释.

App Module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { environment } from '../environments/environment';
import { ProjectsModule } from './projects/projects.module';
import { HttpModule } from '@angular/http';


@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    ProjectsModule,
    AngularFireModule.initializeApp(environment.firebase, 'AngularFireTestOne'), // imports firebase/app needed for everything
    AngularFireDatabaseModule, // imports firebase/database, only needed for database features
    AngularFireAuthModule // imports firebase/auth, only needed for auth features
  ],

  declarations: [AppComponent],

  bootstrap: [AppComponent]

})

export class AppModule { }

Projects Module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ProjectsListComponent } from './projects-list.component';
import { RouterModule } from '@angular/router';

@NgModule({

    declarations: [
        ProjectsListComponent
    ],


  imports: [
    BrowserModule,
    ProjectsListComponent,
    RouterModule.forChild([
      { path: 'projects', component: ProjectsListComponent }
    ])
  ]
})

export class ProjectsModule { }

我设置模块的过程与我使用Angular 2时没有任何不同.然而,在Angular Cli、firebase和Angular fire之间的兼容性出现问题后,我决定今天上午获取最新信息.

我对这件事的理解遇到了困难,因此我非常感谢大家对这件事的任何帮助.

非常感谢.

推荐答案

问题是在你的ProjectsModule中输入ProjectsListComponent.如果想在ProjectsModule之外使用它,不应该导入它,而是将其添加到导出数组中.

其他问题是你的项目路由.您应该将这些添加到可导出变量中,否则它与AOT不兼容.你应该——永远不要——把BrowserModule输入到你的AppModule之外的任何地方.使用CommonModule访问*ngIf, *ngFor...etc指令:

@NgModule({
  declarations: [
     ProjectsListComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(ProjectRoutes)
  ],
  exports: [
     ProjectsListComponent
  ]
})

export class ProjectsModule {}

project.routes.ts

export const ProjectRoutes: Routes = [
      { path: 'projects', component: ProjectsListComponent }
]

Typescript相关问答推荐

当类型不能undefined时,如何使编译器抛出错误?

如何让这个函数正确推断返回类型?

如何准确确定此特定场景中的类型?

根据第一个参数的值设置第二个参数的类型

在TypeScript中使用泛型的灵活返回值类型

我们过go 不能从TypeScript中的联合中同时访问所有属性?

类型{...}的TypeScript参数不能赋给类型为never的参数''

有没有办法解决相互影响的路由之间的合并?

带switch 的函数的返回类型的类型缩小

ANGLE独立组件布线错误:没有ActivatedRouting提供程序

迭代通过具有泛型值的映射类型记录

复选框Angular 在Ngfor中的其他块中重复

缩小对象具有某一类型的任意字段的范围

如何将类似数组的对象(字符串::匹配结果)转换为类型脚本中的数组?

如何使用泛型函数参数定义类型脚本函数

如何从接口中省略接口

类型实例化过深,可能是无限的&TypeScrip中的TupleUnion错误

窄SomeType与SomeType[]

如何键入';v型';

带有过滤键的 Typescript 映射类型