Angular2: зависимости между приложениями, созданными с помощью angular-cli

Я использую Angular2-cli для создания двух приложений: MyFirstApp и MySecondApp. Я хочу MySecondApp импортировать MyFirstApp, чтобы я мог повторно использовать директиву/службу/компонент. Когда я импортирую MyFirstApp, у меня возникает следующая ошибка компиляции: Cannot find module 'MyFirstApp'.

Вот как воспроизвести:

    $ npm -v
    3.9.3

    $ node -v
    v6.2.1

    $ npm list  | grep 'angular'
    ├── @angular/[email protected]
    ├── @angular/[email protected]
    ├── @angular/[email protected]
    ├── @angular/[email protected]
    ├── @angular/[email protected]
    ├── @angular/[email protected]
    ├── @angular/[email protected]
    ├─┬ [email protected]

    $ ng new MyFirstApp
    $ cd MyFirstApp
    $ ng g service MyFirstAppService
    $ ng build
    $ cd ..
    $ ng new MySecondApp
    $ cd MySecondApp
    $ npm install ../MyFirstApp --save #Also tried w/ ng install ../MyFirstApp and github link
    $ vim src/app/my-second-app.component.ts

Измените src/app/my-second-app.component.ts, чтобы он выглядел так:

import { Component } from '@angular/core';
import { MyFirstAppService } from 'MyFirstApp';

@Component({
  moduleId: module.id,
  selector: 'MySecondApp',
  templateUrl: 'mysecondapp.component.html',
  styleUrls: ['mysecondapp.component.css']
})
export class MySecondAppAppComponent {
  title = 'MySecondApp works!';
}

Я пробовал многие версии import { MyFirstAppService } from 'MyFirstApp'; (т.е. import { MyFirstAppServiceService } from './../../node_modules/my-first-app/src/app/my-first-app-service.service'; и другие) и играл с system-config.ts (используя это и это) без при удаче. У меня всегда есть Cannot find module 'MyFirstApp'.

Какие-либо предложения ?

Редактировать: изменив system-config.ts (строки с 1 по 14) следующим образом:

const map: any = {
  'my-first-app': 'vendor/my-first-app/app/index.js'
};

/** User packages configuration. */
const packages: any = {
  'my-first-app': {
    format: 'cjs'
  }
};

Я могу сделать import { MyFirstAppServiceService } from 'my-first-app/src/app/my-first-app-service.service';. .../dist/... не работает. Однако это не кажется правильным способом сделать это... Разве нельзя сделать import { MyFirstAppServiceService } from 'my-first-app/my-first-app-service.service' ?

Обратите внимание, что полученный каталог vendors/my-first-app/ не содержит кода MyFirstApp.

$ # While in MySecondApp
$ tree dist/vendor/my-first-app 
dist/vendor/my-first-app
├── angular-cli-build.js
└── config
    ├── environment.js
    ├── karma.conf.js
    ├── karma-test-shim.js
    └── protractor.conf.js

Спасибо.


person Mathieu Nls    schedule 14.06.2016    source источник


Ответы (2)


В вашем src/app/mysecondapp.component.ts попробуйте заменить:

import { MyFirstAppService } from 'MyFirstApp';

Этим

import { MyFirstAppService } from './app/MyFirstApp';

Я надеюсь, что это сработает :)

person NotBad4U    schedule 14.06.2016
comment
Нет. Cannot find module './app/MyFirstApp'. - person Mathieu Nls; 15.06.2016

Разработчики проекта Angular2-cli хотят поддерживать библиотеку/аддоны приправленного проекта для Выпуск 1.0.0.

На данный момент, что мы можем сделать, чтобы заставить его работать:

  1. Добавляем основной в библиотеку package.json
  2. npm install yourlib --save в других ваших приложениях
  3. Настройте свое второе приложение, чтобы оно упаковывало вашу библиотеку в соответствии с вашими потребностями. Пример с глотком:

    var copyScripts = require('ionic-gulp-scripts-copy');

    gulp.task('assets', function(){
      return copyScripts({src:'node_modules/your-lib/dist/**/*', dest:'our-dest'});
    });
    
person Mathieu Nls    schedule 23.06.2016