Angular cross module HttpClient invoking

Question

Environment

• Angular: 4.4.4
• Angular cli: 1.4.6
• rxjs: 5.4.3

File Structure (Follows Google's guideline)

- app
    - app.module
    - core (Imported into app.module directly)
        - core.module
        - http-request.service
    - user (Lazy loaded)
        - user.module
        - shared
            - user.service
    - role (Lazy loaded)
        - role.module
        - shared
            - role.service

Scenario

• Core module shares common services cross entire app. It is imported into app.module ONLY.
• User and role modules are lazy loaded.
• User module provides user service.
• Role module provides role service.

Issue

• The role's component calls role.service to get the data by using HttpClient. It worked.
• The user's component calls user.service to get the data by using HttpClient. It also worked.
• The role or user's component calls http-request.service with exactly the same code, error occured.
  • file: core.ec5.js
  • line: 13,500
  • error: Collection 'foo' not found
  • status: 404
  • statusText: 'Not Found'
  • url: /dynamic/foo/get
• The role's component calls user.service, same error.
• The user's component calls role.service, same error.

Current Finding

• In one module, imports and provides the http-request.service and other module's service.
• In one module imports another module.

Both worked. But looks weird.

Google Guideline

• Module should provide its own service.
• Any cross entire app's common service should be provided by core module and core module only.
• Core module should be imported by app module and no anywhere else.

The finding broke these guidelines. That makes it weird.

User Service

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class UserService {
    constructor(private httpClient: HttpClient) { }

    get(): Observable<any> {
        this.httpClient.get('/dynamic/foo/get');
    }
}

Http Request Service

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';

@Injectable()
export class HttpRequestService {
    constructor(private httpClient: HttpClient) { }

    get(url): Observable<any> {
        return this.httpClient.get(url);
    }
}

My Concern

• Why HttpClient has such strange behavior?