Importer un composant d'un autre dépôt

Question

J'ai créé un repo dans bitbucket qui s'appelle "angular-lister", la structure du repo est :

J'ai ensuite créé un autre dépôt qui a la même structure (en quelque sorte, je ne peux pas mettre d'image ici et cela n'a pas vraiment d'importance).
Dans ce deuxième repo j'ai installé mon repo en utilisant npm i --save path/to/angular-lister.git et j'ai vu qu'il a été ajouté à mon package json + il est situé sous mon dossier node_modules.

J'essaie d'importer un composant d'angular-lister (app/app.component) mais je n'y arrive pas.

C'est mon app.module.ts du deuxième repo ( PAS de liste angulaire ):

import { ListerAppComponent } from 'node_modules/angular-lister/app/app.component'

@NgModule({
    imports:      [
        ...
    ],
    declarations: [
        ...,
        ListerAppComponent
    ],
    bootstrap:    [ ...]
})

et j'obtiens l'erreur suivante :

zone.js:1382 GET http://localhost:3000/node_modules/angular-lister/app/app.component 404 (non trouvé)

Pourquoi ça, qu'est-ce que je fais de mal ici ?

EDIT :

contenu des fichiers dans le projet principal (qui utilise angular-lister)

package.json :

{
  "name": "angular-project",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.1.1",
    "@angular/compiler": "~2.1.1",
    "@angular/core": "~2.1.1",
    "@angular/forms": "~2.1.1",
    "@angular/http": "~2.1.1",
    "@angular/platform-browser": "~2.1.1",
    "@angular/platform-browser-dynamic": "~2.1.1",
    "@angular/router": "~3.1.1",
    "@angular/upgrade": "~2.1.1",
    "angular-in-memory-web-api": "~0.1.13",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "angular-lister": "git+https://bitbucket.org/project/angular-lister.git",
    "font-awesome": "^4.7.0",
    "ng2-bootstrap": "^1.1.16",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "tinymce": "^4.4.3",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.45",
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3"
  }
}

system.config.js :

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
            // other libraries
            'rxjs':                      'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
            'ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js',
            'moment': 'node_modules/moment/moment.js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

node_modules/agnular-lister :

Answer 1

node_modules ne devrait pas être là puisque vous demandez déjà à SystemJS de vérifier ce dossier. Modifiez-le simplement de cette façon :

import { ListerAppComponent } from './angular-lister/app/app.component'

Gardez à l'esprit que vous ne pouvez pas simplement importer le projet, vous devez créer un paquet npm et exporter la bonne chose. ce tutoriel est un bon point de départ pour comprendre son fonctionnement.