@angular/compiler-cli - AOT failing for 'Angulartics2On'

[adave1]

C:\Users\da5\Documents\local repo\UST>"./node_modules/.bin/ngc" -p \src
Error: Unexpected value 'Angulartics2On' declared by the module 'AppModule'
at C:\Users\da5\Documents\local repo\UST\node_modules@angular\compiler\bundles\compiler.umd.js:14174:33
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (C:\Users\da5\Documents\local repo\UST\node_modules@angular\compiler\bundles\compiler.umd.js:14161:51)
at C:\Users\da5\Documents\local repo\UST\node_modules@angular\compiler\bundles\compiler.umd.js:12952:58
at Array.forEach (native)
at OfflineCompiler.analyzeModules (C:\Users\da5\Documents\local repo\UST\node_modules@angular\compiler\bundles\compiler.umd.js:12951:21)
at CodeGenerator.codegen (C:\Users\da5\Documents\local repo\UST\node_modules@angular\compiler-cli\src\codegen.js:105:47)
at codegen (C:\Users\da5\Documents\local repo\UST\node_modules@angular\compiler-cli\src\main.js:7:81)
at Object.main (C:\Users\da5\Documents\local repo\UST\node_modules@angular\compiler-cli\node_modules@angular\tsc-wrapped\src\main.js:30:16)
at Object. (C:\Users\da5\Documents\local repo\UST\node_modules@angular\compiler-cli\src\main.js:14:9)
Compilation failed

[adave1]

package.json file :

"dependencies": {
"@angular/common": "^2.0.0-rc.7",
"@angular/compiler": "^2.0.0-rc.7",
"@angular/compiler-cli": "^0.6.1",
"@angular/core": "^2.0.0-rc.7",
"@angular/forms": "^2.0.0-rc.7",
"@angular/http": "^2.0.0-rc.7",
"@angular/platform-browser": "^2.0.0-rc.7",
"@angular/platform-browser-dynamic": "^2.0.0-rc.7",
"@angular/router": "^3.0.0-rc.3",
"@angular/upgrade": "^2.0.0-rc.7",
"angular2-in-memory-web-api": "0.0.19",
"angulartics2": "^1.1.7",
"bootstrap": "^3.3.6",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "^5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.21"
},

[JonnyBGod]

Tks for report.

I have never played with AoT. Can you provide a repo to have a look at it?

[rolandoldengarm]

I'm using i18n and I'm also getting an error when compiling, as the XLF extraction is using ngc under the hood. Error being:

Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 92:25 in the original .ts file), resolving symbol AppModule in

@adave1 It seems you are not importing Angulartics module, but declaring the Angulartics2On directive. Is that true?

[OnlyByGrace]

When you install angulartics from npm, it only installs the .js and not the .ts files. If you manually download the .ts files and use those in your project, AOT does not complain.

Not sure why the JS isn't working. Something with the decorators not being found by Typescript, perhaps?

[austinheinrichs]

I am also having issues with the AOT compiler. I haven't figured out a workaround yet either. I get the same error as @rolandoldengarm. I simply followed the directions under the 'Include it in your application' section of the readme. Using a JIT build works just fine, however, ngc is not liking the Angulartics2Module.forRoot() import for some reason.

[Koslun]

When exporting the library I believe you have to explicitly export some metadata for the AOT to work properly. This is why it works when just dumping the library into your own code.

Here is the PR ng2-translate did to solve the issue. In one of their accompanying issues there is some explanation along with a link to a blog post detailing how to solve this in general.

Angular2-moment solved it in this commit: urish/ngx-moment@f100a33

Angular2-google-maps on the other hand is also still struggling with an open issue with AOT.

[JonnyBGod]

Cool @Koslun, thanks for all info.

I am too busy atm hope to have some time to fix this during the weekend. I have also been following ng2-translate for these issues.

[rolandoldengarm]

With ng2-bingmaps I had the same issue. Just running ngc, and copying the .metadata.json to the dist folder solved the issue. Let me try if this works for angulartics2 as well.

[rolandoldengarm]

See my PR. In my other project it has fixed the issue, my project is now ngc compatible when I copy all the .metadata.json files :) Hopefully this can be merged soon :) @JonnyBGod

[OnlyByGrace]

Is there a reason the .ts files are not included in npm? Most of the other libraries I'm working with work without this change because they include the typescript. AoT is typescript only, anyway.

I realize using the .metadata.json and .js files is the "proper" fix.

[austinheinrichs]

@rolandoldengarm Thanks for the hint. That takes care of that error, however, now my AOT build is complaining about importing the module as an object:
Unexpected value '[object Object]' imported by the module 'AppModule'

I started to try to rework the index.ts file mainly trying to modify the ngModule decorator to see if I can import the module with Angulartics2 as a provider to Angulartics2Module instead of calling forRoot(), but not successful so far. After making that change and running an npm run build I get unexpected value Angulartics2Module in imports.

[rolandoldengarm]

@austinheinrichs I can't replicate that. Are you able to post a plunkr that replicates the issue?

[austinheinrichs]

Hey guys,
Let me know if I need to create a new issue for this. I'm no longer getting that error after pulling down the latest merge. Looks like the issues exist more with rollup.js than anything.

'Angulartics2' is not exported by node_modules/angulartics2/index.js (imported by app/app.component.js). For help fixing this error see https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module

I created a quick AOT version of the angular2-quickstart project with Angulartics2 included. You can check it out here: https://github.com/austinheinrichs/angular2-quickstart-aot-angulartics2-test. I apologize in advance if it has a lot of extras in it, but I wanted to get this out there.

Wanted to clarify: The only reason I am including this rollup issue in this issue is because rollupjs seems to be the preferred bundler for angular2 in regards to AOT.

[rolandoldengarm]

Not sure, @austinheinrichs , I don't have experience with rollupjs. I'm using webpack as that's being used by angular-cli and don't have issues with webpack.
angulartics2/index.js exports Angulartics2 after importing it from /src/core/angulartics2

Does it work if you change it to
import { Angulartics2 } from 'angulartics2/src/core/angulartics2';

(in this file)

[austinheinrichs]

@rolandoldengarm I have no idea why I didn't try that. RollupJS is good with that 💯 ! Thanks for your help.

[Perezmarc]

Hey!
I'm still having trouble with this...
I'm using 1.5 in which this should be fixed but does not work.
Commenting the line /*Angulartics2Module.forRoot([ Angulartics2GoogleAnalytics ]),*/ AOT works properly.

[arangelp]

I am having the same problem as @Perezmarc with AOT
Using Angulartics2GoogleTagManager:
Angulartics2Module.forRoot([ Angulartics2GoogleTagManager ]) This line makes AOT fail

[JonnyBGod]

@Perezmarc @arangelp I am not using AOT in any of my projects atm. Can you provide a repo for me to work with? This would make it faster for me to deal with the problem.

[Koslun]

@JonnyBGod I made a repo for just that here: https://github.com/Koslun/angular-webpack2-starter/tree/minimal. It's a fork of the starter https://github.com/qdouble/angular-webpack2-starter.

Using the branch minimal I made only three commits to add & update a yarn.lock file to see the subtle changes of adding this library along with finally importing it.

If you step back one commit in the branch you will thus see that yarn run compile or npm run compile, which does the AoT, works. As described in the README you should also then be able to run the AoT code using yarn run prodserver. You can also observe that the JiT compiler works just fine by running yarn start or npm start.

As might be obvious, I also am encountering this issue on version 1.5.0 and 1.5.1. And as with the example repo I made I get the following error:

Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol APP_IMPORTS in /home/adam/apps/demos/angular-webpack2-starter/src/app/app.imports.ts, resolving symbol AppModule in /home/adam/apps/demos/angular-webpack2-starter/src/app/app.module.ts, resolving symbol AppModule in /home/adam/apps/demos/angular-webpack2-starter/src/app/app.module.ts
    at simplifyInContext (/home/adam/apps/demos/angular-webpack2-starter/node_modules/@angular/compiler-cli/src/static_reflector.js:475:23)
    at StaticReflector.simplify (/home/adam/apps/demos/angular-webpack2-starter/node_modules/@angular/compiler-cli/src/static_reflector.js:478:22)
    at StaticReflector.annotations (/home/adam/apps/demos/angular-webpack2-starter/node_modules/@angular/compiler-cli/src/static_reflector.js:60:36)
    at NgModuleResolver.resolve (/home/adam/apps/demos/angular-webpack2-starter/node_modules/@angular/compiler/bundles/compiler.umd.js:14261:46)
    at CompileMetadataResolver._loadNgModuleMetadata (/home/adam/apps/demos/angular-webpack2-starter/node_modules/@angular/compiler/bundles/compiler.umd.js:14646:45)
    at CompileMetadataResolver.getUnloadedNgModuleMetadata (/home/adam/apps/demos/angular-webpack2-starter/node_modules/@angular/compiler/bundles/compiler.umd.js:14636:23)
    at addNgModule (/home/adam/apps/demos/angular-webpack2-starter/node_modules/@angular/compiler/bundles/compiler.umd.js:12944:43)
    at /home/adam/apps/demos/angular-webpack2-starter/node_modules/@angular/compiler/bundles/compiler.umd.js:12957:16
    at Array.forEach (native)
    at _createNgModules (/home/adam/apps/demos/angular-webpack2-starter/node_modules/@angular/compiler/bundles/compiler.umd.js:12956:28)
Compilation failed

This is an error I have run into previously as I've been making my project AoT compatible. As described in the starter repo i forked in the AOT Don'ts list:

Don’t use functions in your providers, routes or declarations, export a function and then reference that function name

Meaning it is not enough to export metadata you also need to follow the above and other rules specific for AoT. Here's the rest according to that starter repo:

The following are some things that will make AOT compile fail.

Don’t use require statements for your templates or styles, use styleUrls and templateUrls, the angular2-template-loader plugin will change it to require at build time.
Don’t use default exports.
Don’t use form.controls.controlName, use form.get(‘controlName’)
Don’t use control.errors?.someError, use control.hasError(‘someError’)
Don’t use functions in your providers, routes or declarations, export a function and then reference that function name
Inputs, Outputs, View or Content Child(ren), Hostbindings, and any field you use from the template or annotate for Angular should be public

[JonnyBGod]

@Koslun Great thanks a lot. Will have a look at it and come up with necessary changes as soon as possible.

[JonnyBGod]

Just release a new version.
Tested with @Koslun provided repo and looks like it is working fine now.

Please test with your own environments and let me know if you still find any issues.

[Koslun]

@JonnyBGod After running yarn upgrade to grab the latest release on the test repo with my local environment (Ubuntu 16.04, node 6.9.1) it seems to work for me too. Seems to have cropped up another issue with my own project but it seems to work with that as well.

Thanks and great job with the quick fix! 👍

[arangelp]

Thanks for the fast fix! it works

[Perezmarc]

version 1.5.2? Not working for me... I'm using it in angular2-seed (https://github.com/mgechev/angular-seed)
I guess you can clone their repo :)
Thanks!

[JonnyBGod]

@Perezmarc Just tested and works fine.

app.component.ts

import { Component } from '@angular/core';
import { Config } from './shared/index';
import './operators';
import { Angulartics2GoogleAnalytics } from 'angulartics2';

/**
 * This class represents the main application component.
 */
@Component({
  moduleId: module.id,
  selector: 'sd-app',
  templateUrl: 'app.component.html',
})
export class AppComponent {
  constructor(angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics) {
    console.log('Environment config', Config);
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF } from '@angular/common';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { AboutModule } from './about/about.module';
import { HomeModule } from './home/home.module';
import { SharedModule } from './shared/shared.module';

import { Angulartics2Module, Angulartics2GoogleAnalytics } from 'angulartics2';

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    AppRoutingModule,
    AboutModule,
    HomeModule,
    SharedModule.forRoot(),
    Angulartics2Module.forRoot([ Angulartics2GoogleAnalytics ])
  ],
  declarations: [AppComponent],
  providers: [{
    provide: APP_BASE_HREF,
    useValue: '<%= APP_BASE %>'
  }],
  bootstrap: [AppComponent]

})
export class AppModule { }

[Perezmarc]

My mistake, I updated all the angular2 stack and works now. Thanks again for your help.