问题描述
我正在使用 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/[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 { 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项目的开发人员希望支持库/附加组件添加了1.0.0版本的项目.
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:
- 在库package.json中添加一个主文件
- npm安装yourlib-保存在其他应用程序中
-
配置您的第二个应用程序,以便它根据您的需要打包您的lib. gulp的示例:
- Add a main in the library package.json
- npm install yourlib --save in your other apps
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创建的应用之间的依赖关系的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!