Angular 6 Importing Feature Module Fails -- Function calls are not supported in decorators

Question

I'm new to Angular 6 having worked in AngularJS 1.x before. I'm currently trying to import a custom module into my main application and having an error that I think I'm misunderstanding. I've seen a couple of other SO posts realted to this, and I think this is some kind of issue with AOT compiling in Angular but I'm not sure how to fix it.

Basically, I have two modules in the same "root" directory. One of these modules -- www -- is my "main application". The other -- services -- is a custom application for handling services data. I'm making it this way so I can share the "services" module between www and other, future, applications/modules.

Application Structure

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

Www Module

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

Services Module

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

The errors I get when I run ng build are:

ERROR in Error during template compile of 'WwwModule'
Function calls are not supported in decorators but 'ServicesModule' was called.
Cannot redeclare block-scoped variable 'ngDevMode'.

Does anyone see what I'm doing wrong to include another Angular Module in my Angular application?

Thanks!

Hey @SureshKumarAriya! I ended up figuring the problem out after some more research. But tanks you for your reply! — RoboBear, Dec 18 '18 at 21:17

score 0 · Answer 1 · answered Dec 18 '18 at 21:17

As it turns out, this is an issue with the Modules and file structure for using shared/custom modules. Essentially, the problem was my rooting two separate ngModules in the same root directoy each with their own /node_modules/ dependencies. The basic solution is grouping the two NgModules under the same parent directory so they can "share" node_modules dependencies.

Since I'm using SVN and I didn't want to checkout the shared module in the project/app directory, I copied the src/ from the Services Module into the www/app/src/ folder, and included the services module from there.

Changed folder structure

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

Changes to Www 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 { }

For reference, these links helped point me in the right direction:

Hope this helps someone else!

Angular 6 Importing Feature Module Fails -- Function calls are not supported in decorators

1 Answers1