时间戳

首页 > 解决方案 > Angular 6 导入功能模块失败——装饰器不支持函数调用

angular - Angular 6 导入功能模块失败——装饰器不支持函数调用

问题描述

我是 Angular 6 的新手，之前曾在 AngularJS 1.x 中工作过。我目前正在尝试将自定义模块导入到我的主应用程序中，并且出现了我认为我误解的错误。我已经看过其他一些关于此的 SO 帖子，我认为这是 AOT 在 Angular 中编译的某种问题，但我不知道如何解决它。

基本上，我在同一个“根”目录中有两个模块。这些模块之一——www——是我的“主要应用程序”。另一个——服务——是用于处理服务数据的自定义应用程序。我这样做是为了在 www 和其他未来的应用程序/模块之间共享“服务”模块。

应用结构

|- www/
|-- app/
|--- src/
|---- app.module.ts
|- services/
|-- app/
|--- src/
|---- services.module.ts

万维网模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { WwwComponent } from './www.component';
import { ServicesModule | from './../../../services/app/src/services.module.ts';

@NgModule({
  declarations: [
    WwwComponent
  ],
  imports: [
    BrowserModule,
    ServicesModule
  ],
  providers: [],
  bootstrap: [WwwComponent]
})
export class WwwModule { }

服务模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ModuleWithProviders } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { ServicesComponent } from './services.component';

import { AuthService } from '../auth.service';
import { HttpService } from '../http.service';
import { TemplateService } from '../template/template.service';
import { ModalService } from '../modal/modal.service';

@NgModule({
    declarations: [
        ServicesComponent
    ],
    exports: [
        ServicesComponent
    ],
    imports: [
        BrowserModule,
        RouterModule,
        HttpClientModule
    ],
    providers: [
        AuthService,
        HttpService,
        TemplateService,
        ModalService
    ],
    bootstrap: [ServicesComponent]
})
export class ServicesModule {}

运行ng build时出现的错误是：

  1. 'WwwModule' 模板编译期间出现错误
  2. 装饰器不支持函数调用，但调用了“ServicesModule”。
  3. 无法重新声明块范围变量“ngDevMode”。

有没有人看到我在我的 Angular 应用程序中包含另一个 Angular 模块做错了什么？

谢谢！

标签： angularcompiler-errorsangular-moduleangular-aotimport-module

解决方案

事实证明，这是使用共享/自定义模块的模块和文件结构的问题。本质上，问题是我将两个单独的 ngModule 植根在同一个根目录中，每个都有自己的 /node_modules/ 依赖项。基本的解决方案是将两个 NgModule 分组在同一个父目录下，这样它们就可以“共享” node_modules 依赖项。

由于我使用的是 SVN，并且我不想签出 project/app 目录中的共享模块，因此我将 src/ 从服务模块复制到 www/app/src/ 文件夹中，并从那里包含服务模块.

更改文件夹结构

|- www/
|-- app/
|--- src/
|---- app.module.ts
|--- services/
|---- app/
|----- services.module.ts

对万维网 AppModule 的更改*

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { WwwComponent } from './www.component';
import { ServicesModule | from './../services/app/src/services.module.ts';

@NgModule({
  declarations: [
    WwwComponent
  ],
  imports: [
    BrowserModule,
    ServicesModule
  ],
  providers: [],
  bootstrap: [WwwComponent]
})
export class WwwModule { }

作为参考，这些链接帮助我指出了正确的方向：

  1. https://groups.google.com/forum/#!topic/angular/WUdr1ra0WF0
  2. AOT 编译和模块参考

希望这对其他人有帮助！

推荐阅读