Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 of 3 tasks
jaydiablo opened this issue Jul 15, 2020 · 6 comments
Open
1 of 3 tasks

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

jaydiablo opened this issue Jul 15, 2020 · 6 comments

Comments

@jaydiablo
Copy link

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
Copy link
Collaborator

Are you sure this is adding it to the bundle?

@jaydiablo
Copy link
Author

@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:

Screen Shot 2020-07-15 at 11 39 29 AM

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:

Screen Shot 2020-07-15 at 11 42 49 AM

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
Copy link
Author

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
Copy link
Author

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

From "Debugger" tab in Firefox (sourcemaps):

Screen Shot 2020-07-15 at 1 02 00 PM

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:

Screen Shot 2020-07-15 at 1 00 59 PM

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
Copy link
Collaborator

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
Copy link
Author

@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. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants