Shared angular 2 module throwing error while building aot

Question

I have created a shared angular 2 module for separating the reusable components. Everything works fine but getting the below error while building aot, pfb the error

Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in D:/Shared_Module/node_modules/@angular/core/src/di/metadata.d.ts, resolving symbol OpaqueToken in D:/ Shared_ Module/node_modules/@angular/core/src/di/opaque_token.d.ts, resolving symbol OpaqueToken in D:/Shared_ Module/node_modules/@angular/core/src/di/opaque_token.d.ts

PFB sample code and code structure

Base_Module
------------------
|
|___module.ts @NgModule
|
|___components
|
|___node_modules
|
|___package.json
|
|___tsconfig.json

Shared_Module
------------------
|
|___module.ts @NgModule
|
|___components -> Shared_Components
|
|___node_modules
|
|___package.json
|
|___tsconfig.json

Below is the module.ts from Base module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { Shared_Module } from './../../../../SharedModule/module'; --**Including the shared module here**

@NgModule({
  declarations: [
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    SharedModule  -- **New shared module**
  ],
  exports:   [],
  bootstrap: []
})

export class Base_Module { }

Below is the module.ts from shared module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

@NgModule({
  declarations: [
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  exports:   [Shared_Component],
  bootstrap: []
})

export class Shared_Module { }

Here is the tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },

  "files": [
    "src/app/module.ts",
    "src/main.ts"
  ],

  "angularCompilerOptions": {
   "genDir": "aot",
   "skipMetadataEmit" : true
}
}

App is working fine. What could be wrong with aot compilation. All helps are welcome. Thanks in advance!

score 0 · Answer 1 · answered May 15 '17 at 17:37

0

First, should import CommonModule, not BrowserModule (in shared module).

See here:

https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-browser-vs-common-module

Second, OpaqueToken is deprecated:

https://angular.io/docs/ts/latest/api/core/index/OpaqueToken-class.html

Use InjectionToken instead:

https://angular.io/docs/ts/latest/api/core/index/InjectionToken-class.html

See if these things help.

answered May 15 '17 at 17:37

chrispy

3,552
1
11
19

putting CommonModule instead of BrowserModule didn't work – Prats May 16 '17 at 04:27
yeah, that wasn't going to fix your problem, it's just best practice for a high performing app, per the link. – chrispy May 16 '17 at 14:14
@chrispy I am getting the same error but couldn't able to find out where and in which file the exact problem is. You said "OpaqueToken is deprecated" but where do I find OpaqueToken in code? – mohit Jun 13 '17 at 09:10
Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in /home/user/node/multi-store/node_modules/ep-shared/node_modules/@angular/core/core.d.ts, resolving symbol ɵf in /home/user/node/multi-store/node_modules/ep-shared/node_modules/@angular/core/core.d.ts, resolving symbol ɵf in /home/user/node/multi-store/node_modules/ep-shared/node_modules/@angular/core/core.d.t – mohit Jun 13 '17 at 11:31

Shared angular 2 module throwing error while building aot

1 Answers1