Angular2：使用 angular-cli 创建的应用程序之间的依赖关系答案

【问题标题】：Angular2: Dependencies Between Apps created with angular-cliAngular2：使用 angular-cli 创建的应用程序之间的依赖关系
【发布时间】：2016-06-24 04:12:37
【问题描述】：

我正在使用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/common@2.0.0-rc.1
    ├── @angular/compiler@2.0.0-rc.1
    ├── @angular/core@2.0.0-rc.1
    ├── @angular/http@2.0.0-rc.1
    ├── @angular/platform-browser@2.0.0-rc.1
    ├── @angular/platform-browser-dynamic@2.0.0-rc.1
    ├── @angular/router@2.0.0-rc.1
    ├─┬ angular-cli@1.0.0-beta.5

    $ 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'; & co）和system-config.ts（使用this和this）一起玩，没有任何运气。我总是有一个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

谢谢。

【问题讨论】：

标签： angular angular2-services angular2-cli

【解决方案1】：

在你的 src/app/mysecondapp.component.ts 中，尝试替换：

import { MyFirstAppService } from 'MyFirstApp';

由此

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

我希望它会工作:)

【讨论】：

没有。 Cannot find module './app/MyFirstApp'.

【解决方案2】：

Angular2-cli 项目的开发者希望支持库/插件flavoured project for the 1.0.0 release。

目前，我们可以做些什么来让它发挥作用：

在库 package.json 中添加一个 main
npm install yourlib --save 在您的其他应用中
配置您的第二个应用程序，以便它根据您的需要打包您的库。一个 gulp 的例子：

var copyScripts = require('ionic-gulp-scripts-copy');
```
gulp.task('assets', function(){
  return copyScripts({src:'node_modules/your-lib/dist/**/*', dest:'our-dest'});
});
```

【讨论】：