Doesn't work with AoT about angular-ga

[SamVerschueren]

I fixed it. I think it's an issue in angular-cli. See this comment angular/angular#14228 (comment).

My main entrypoint of my library was not index.js but dist/index.js. It looks like angular-cli didn't work correctly with that project structure.

@jvandemo Might be important for your generator because it generates the files to dist which caused everything to fail with all those fuzzy error messages. Thanks for looking into this @ocombe!

[ocombe]

Are you sure that the problem is with your library and not the project generated with angular cli?

[ocombe]

Maybe it is because you're missing the "module" property in your package.json ?

Also probably unrelated, but you should offer the possibility to overwrite the GA_TOKEN with something like this:
here: https://github.com/SamVerschueren/angular-ga/blob/master/src/ga.service.ts#L16 you're injecting a constant, but you should probably use an OpaqueToken:

in ga.token:

export const GA_TOKEN = new OpaqueToken('GA_TOKEN');

in ga.module (in the "providers" of the forRoot):

{provide GA_TOKEN, useValue: "angular-ga TrackingId"}

And then it should work exactly the same in the service, the difference is that now you can overwrite the GA_TOKEN easily (for tests, or else).

[SamVerschueren]

@ocombe The GA_TOKEN was meant to be an OpaqueToken so people can inject the tracking id with a configuration provider like this.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { GoogleAnalyticsModule, GA_TOKEN } from 'angular-ga';

import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        GoogleAnalyticsModule.forRoot({
            provide: GA_TOKEN,
            useValue: 'UA-TOKEN-1'
        })
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

But I have an issue with using OpaqueToken inside my library which I reported here. So the token is meant to be used as provider key and not as raw value.

Maybe it is because you're missing the "module" property in your package.json ?

Already tried that, doesn't seem to be doing anything. What does it do actually? Is it documented somewhere?

[ocombe]

It's meant to replace the "js:next" property for modern bundlers such as webpack. It's supposed to point to the non-bundled entry of your library (while "main" points to the umd/commonjs bundle).

[jvandemo]

@SamVerschueren — Thank you, so if I understand correctly index.js can still be in dist but the main in package.json should be set to index.js and not dist/index.js?

Thanks for reaching out!

[SamVerschueren]

@jvandemo No not exactly. The index.js must be present in the root or else angular-cli will fail (for now). It does not take the main property in package.json into account. So I decided to move all my code into a src directory and transpile to the root directory to keep them both separated.

[jvandemo]

@SamVerschueren — Interesting, thank you for sharing. Curious to see how this will evolve with Angular CLI. I'll dig into it as well. Thanks Sam! 👍

[SamVerschueren]

@jvandemo Oh I forgot, it looks like it's an Angular internal issue rather then webpack. The AoT compiler doesn't seem to take the main file into account. angular/angular#14171

[jvandemo]

@SamVerschueren — Did you fix it only by setting outDir to ./ in tsconfig.json? Or did you change anything else as well? Thanks!

[SamVerschueren]

Basically yes. Here's the commit 20235b4. I moved all the source files to src, including index.ts because that makes most sense to me so that the generated files are separate from the source files. That might just be me though and is not necessary. And then I let it generate the output to the root instead of dist like you said.

[jvandemo]

Excellent, thank you, Sam. I will compare with the official library recommendations from the Google team when they are released. Much appreciated! 👍

[jvandemo]

@SamVerschueren FYI: I just updated the generator to support the new Angular Package Format, which now produces a Flat ES Module that is compatible with AOT compilation.

The error seems to be caused by not having a typings key in package.json.

/cc @ocombe