Unable to build with AoT

[mxtommy]

Hi!

I'll first add that I'm very new to the javascript ecosystem, so forgive me if I get something wrong...

When I try and build my Angular project for production with AoT compiler, I get the following error:

ERROR in Unexpected value 'GaugesModule in C:/Users/<removed>/node_modules/ng-canvas-gauges/lib/index.js' imported by the module 'AppModule in C:/Users/<removed>/src/app/app.module.ts'. Please add a @NgModule annotation.

Going by this page: https://medium.com/@isaacplmann/getting-your-angular-2-library-ready-for-aot-90d1347bcad it seems hat you need to use another tool when building the package so that you have metadata?

Thanks!

[damiendubois]

Hello,

I have the same problem here. Any solution?

Kind regards,

Damien

[maiconn]

Hello,

I have the same problem here. Any solution?

Kind regards,
Maicon

[teejaydub]

Yup, me too - this makes the component unusable with current tools, no?

[cavalleydude]

I'm seeing the same issue. Any ideas for a workaround?

[marcossapp]

Nothing? Any idea?

[adsonvinicius]

Hi, after take a look i figured out how to make ng build --prod or ionic cordova build android --prod without errors.

First i got all this errors, then the developer said the example worked fine, then I downloaded the 2.0.0 version, and really worked fine, for ng build --prod, here is my package versions

Node: 8.9.1
OS: win32 x64
Angular: 4.4.6
... common, compiler, compiler-cli, core, forms, http
... platform-browser, platform-browser-dynamic, router

@angular/cli: 1.6.0-rc.2
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
typescript: 2.6.2
webpack-dev-middleware: 2.0.1
webpack-dev-server: 2.9.7
webpack-hot-middleware: 2.21.0
webpack: 3.10.0

Then I just updated to the latest version, passing through 2.0.1 to 2.03 and kept working properly.

After that I come to my app directory, replaced the node_modules/ng-canvas-gauges files for the one I build in example folder, and in app.module.ts i changed:

import { GaugesModule } from 'ng-canvas-gauges';

to

import { GaugesModule } from 'ng-canvas-gauges/src';

And did the same, updating to latest version as I did in example step.

Then I copied all files from lib folder in example (.js, .map, .ts) and put in src folder in my app directory (node_modules/ng-canvas-gauges) and after that I could build with AoT with no errors.

[cocaybica]

Hi,

I'm getting the same issue: (directories replaced by /.../)

Error: Unexpected value 'GaugesModule in /..../node_modules/ng-canvas-gauges/lib/index.d.ts' imported by the module 'AppModule in /..../src/app/app.module.ts'. Please add a @NgModule annotation.
at syntaxError (/..../node_modules/@angular/compiler/bundles/compiler.umd.js:1550:34)
at /..../node_modules/@angular/compiler/bundles/compiler.umd.js:14504:44
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (/..../node_modules/@angular/compiler/bundles/compiler.umd.js:14487:49)
at addNgModule (/..../node_modules/@angular/compiler/bundles/compiler.umd.js:23050:58)
at /..../node_modules/@angular/compiler/bundles/compiler.umd.js:23061:14
at Array.forEach (native)
at _createNgModules (/..../node_modules/@angular/compiler/bundles/compiler.umd.js:23060:26)
at analyzeNgModules (/..../node_modules/@angular/compiler/bundles/compiler.umd.js:22935:14)
at analyzeAndValidateNgModules (/..../node_modules/@angular/compiler/bundles/compiler.umd.js:22945:35)

I'm using ng-canvas-gauges on a Ionic Project

Here is my app,module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { InicioPage } from '../pages/inicio/inicio';
import { MonitorPage} from '../pages/monitor/monitor';
import { InternalPage} from '../pages/internal/internal';
import { HistorialPage } from '../pages/historial/historial';
import { CreditosPage } from '../pages/creditos/creditos';
import { BluetoothSerial } from '@ionic-native/bluetooth-serial';
import { GaugesModule } from 'ng-canvas-gauges/lib';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { IonicStorageModule } from '@ionic/storage';
import { UsuarioProvider } from '../providers/usuario/usuario';

@NgModule({
  declarations: [
    MyApp,
    InicioPage,
    MonitorPage,
    InternalPage,
    HistorialPage,
    CreditosPage    
  ],
  imports: [
    BrowserModule,
    GaugesModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    InicioPage,
    MonitorPage,
    InternalPage,
    HistorialPage,
    CreditosPage    
  ],
  providers: [
    StatusBar,
    SplashScreen,
    BluetoothSerial,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    UsuarioProvider
  ]
})
export class AppModule {}

Ionic Info:

cli packages: (/..../node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 2.1.3
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.6.0

System:

Android SDK Tools : 25.2.5
Node              : v8.1.4
npm               : 5.0.3
OS                : Linux 4.13

Environment Variables:

ANDROID_HOME : /home/projects/Android/SDK

Misc:

backend : pro

Despite this issue when I try to build, I can debug on a real device without any problem.

I'm trying to understand what @adsonvinicius did. Any guidance about this issue?

Thank you