Angular2:使用angular-cli创建的应用之间的依赖关系 [英] Angular2: Dependencies Between Apps created with angular-cli

问题描述

我正在使用 Angular2-cli 创建两个应用程序:MyFirstApp& MySecondApp.我希望将MySecondApp导入MyFirstApp，以便可以重用指令/服务/组件. 导入MyFirstApp时，出现以下编译错误:Cannot find module 'MyFirstApp'.

I am using the Angular2-cli to create two applications: MyFirstApp & MySecondApp. I whish MySecondApp to import MyFirstApp so I can reuse directive/service/component. When I import MyFirstApp, I have the following compilation error: 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 { MyFirstAppServiceService } from './../../node_modules/my-first-app/src/app/my-first-app-service.service'; & co)并与system-config.ts一起玩(使用此和此)，没有任何运气.我总是有一个Cannot find module 'MyFirstApp'.

I tried many version of import { MyFirstAppService } from 'MyFirstApp'; (i.e. import { MyFirstAppServiceService } from './../../node_modules/my-first-app/src/app/my-first-app-service.service'; & co) and played with system-config.ts (using this and this) without any luck. I always have a Cannot find module 'MyFirstApp'.

有什么建议吗?

修改: 通过如下调整system-config.ts(第1至14行):

Edit: By tweaking system-config.ts (lines 1 to 14) as follows:

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'吗?

I can do import { MyFirstAppServiceService } from 'my-first-app/src/app/my-first-app-service.service';. .../dist/... doesn't work. Doesn't seems to be the right way to do it though... Should'nt it be possible to do import { MyFirstAppServiceService } from 'my-first-app/my-first-app-service.service' ?

请注意，生成的vendors/my-first-app/目录不包含代码MyFirstApp

Note that the resulting vendors/my-first-app/ directory doesn't contain the code of 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

谢谢.

推荐答案

Angular2-cli项目的开发人员希望支持库/附加组件

Developers of the Angular2-cli project want to support library/addons flavoured project for the 1.0.0 release.

目前，我们可以做些什么来使它起作用:

For now, what we can do to make it works:

1. 在库package.json中添加一个主文件
2. npm安装yourlib-保存在其他应用程序中

3. 配置您的第二个应用程序，以便它根据您的需要打包您的lib. gulp的示例:

1. Add a main in the library package.json
2. npm install yourlib --save in your other apps

3. Configure your second app so it packages your lib according to your needs. An example with gulp:

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

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

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

这篇关于Angular2:使用angular-cli创建的应用之间的依赖关系的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！