Solvedangular Module not found: Error: Can't resolve '@angular/router/src/router'

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
I am trying to build and I get following error:
Module not found: Error: Can't resolve '@angular/router/src/router'

Expected behavior
Successfull build

Minimal reproduction of the problem with instructions

If the current behavior is a bug or you can illustrate your feature request better with an example,
please provide the STEPS TO REPRODUCE and if possible a MINIMAL DEMO of the problem via

import { ActivatedRouteSnapshot } from '@angular/router';
import { DefaultRouteReuseStrategy } from '@angular/router/src/router';

export class CustomRouteReuseStrategy extends DefaultRouteReuseStrategy {

    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        let name = future.component && (<any>future.component).name;
        return super.shouldReuseRoute(future, curr) && name !== 'DetailSameComponent';
    }

}

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

Please tell us about your environment:
Windows 10, VS Code, webpack, angular-cli

  • Angular version: 4.0.0

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
    all

  • Language: TypeScript 2.2.2

  • Node (for AoT issues): node --version = 6.9.1

15 Answers

✔️Accepted Answer

// For latest Angular, like 5.X , you have to update the import strings:
I ended up with this service (for which I'm passing data: {reuse: false} in a route config, whenever I need it to work):

import {RouteReuseStrategy} from '@angular/router/';
import {ActivatedRouteSnapshot, DetachedRouteHandle} from '@angular/router';
import {Injectable} from '@angular/core';


export class DefaultRouteReuseStrategy implements RouteReuseStrategy {
    shouldDetach(route: ActivatedRouteSnapshot): boolean { return false; }
    store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {}
    shouldAttach(route: ActivatedRouteSnapshot): boolean { return false; }
    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle|null { return null; }
    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        return future.routeConfig === curr.routeConfig;
    }
}

@Injectable()
export class CustomRouteReuseStrategy extends DefaultRouteReuseStrategy {
    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        const reuse = (future.data && future.data.hasOwnProperty('reuse')) ? future.data.reuse : true;
        return super.shouldReuseRoute(future, curr) && reuse;
    }
}

@ipassynk thanks for sharing the approach!

More Issues: