Possible to not need @angular/router when using @uirouter?

[jaydiablo]

I'm submitting a ...

• bug report

• feature request

• question about the decisions made in the repository

• What is the motivation / use case for changing the behavior?

We're using this module with UIRouter and don't use the Angular router in our app. According to the docs for this module @angular/router is required to be installed but it "won't be used".

https://github.com/angulartics/angulartics2#using-with-ui-router

Unfortunately this ends up adding @angular/router to our webpack bundle, which is many kbs of unnecessary code. Is it possible to remove the dependency on @angular/router when a different router is used?

[scttcper]

Are you sure this is adding it to the bundle?

[jaydiablo]

@scttcper Yes, we started using this bundle-stats plugin (https://github.com/relative-ci/bundle-stats/) to monitor how the webpack bundle changes in our app with each code change.

I tried removing @angular/router from my package.json, but then the project won't build, as this module depends on it:

Module not found: Error: Can't resolve '@angular/router' in 'node_modules/angulartics2/fesm5'

Here's the relevant section from the bundle-stats report showing that @angular/router is added to the bundle:

I tried adding a webpack ignore plugin entry to prevent the module from being added to the bundle, which did do just that, but then the app won't run:

We're currently on Angular 8.2 (working our way up slowly) and version 8.3.0 of this module. The module is being loaded like so:

import { Angulartics2UirouterModule } from 'angulartics2/uiroutermodule';

From what I can tell, this line in angulartics/uiroutermodule/fesm5/angulartics2-uiroutermodule.js:

import { ANGULARTICS2_TOKEN, RouterlessTracking, Angulartics2, Angulartics2OnModule } from 'angulartics2';

includes angulartics/fesm5/angulartics2.js which has this import in it:

import { NavigationEnd, Router } from '@angular/router';

Technically the bit of code that uses those two imports from @angular/router isn't imported (they are in the AngularRouterTracking class) but since the symbols that are imported live in the same file, the entire file is included in the bundle. Apparently webpack can tree-shake such things, but only if the library is marked as not having sideEffects (https://webpack.js.org/guides/tree-shaking/) but that's a whole different animal (and something this library would have to define, if the imports truly have no side effects).

Let me know if there's any other details you'd like me to provide.

Thanks!

[jaydiablo]

It's possible that the Terser plugin in our production build would tree-shake that out, I'm trying to confirm that (the stats above are from the development build, which doesn't minify).

[jaydiablo]

It does appear that the @angular/router code does end up in the production bundle as well:

From "Debugger" tab in Firefox (sourcemaps):

I looked in the router.js file there for some strings that most likely wouldn't get mangled by the minifier and that were pretty unique to the angular router and found these two:

Which match these in router.js:

/**
 * A [DI token](guide/glossary/#di-token) for the router service.
 *
 * @publicApi
 */
var ROUTER_CONFIGURATION = new InjectionToken('ROUTER_CONFIGURATION');
/**
 * @docsNotRequired
 */
var ROUTER_FORROOT_GUARD = new InjectionToken('ROUTER_FORROOT_GUARD');

[scttcper]

Thanks for digging into it, something to look into. Honestly, you seem to be on top of your angular app. I think you'll only be disappointed by using angulartics2 and you should roll your own smaller custom solution.

It can start as simple as a service at the root level of the app the subscribes to router events.

[jaydiablo]

@scttcper thanks for the reply. We're migrating an AngularJS app to Angular and this lib came up as a good replacement for the angulartics AngularJS module we were/are using in the AngularJS code. We may switch to the Angular router after we're off AngularJS (it uses ui-router, so it made sense to use the hybrid router that the ui-router team provides while we're in a flux state of running both Angular versions) so the added kb of just this lib isn't a big deal, thanks for the advice though, we'll consider it. :)