angular – 从不同的仓库导入组件

前端之家收集整理的这篇文章主要介绍了angular – 从不同的仓库导入组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在bitbucket创建了一个名为“angular-lister”的repo,repo的结构是:

然后我创建了另一个具有相同结构的repo(有点像,不能把图片放在这里,它并不重要).
在第二个回购中,我使用npm i –save path / to / angular-lister.git安装了我的仓库,我看到它被添加到我的包json中,它位于我的node_modules文件夹下.

我试图从angular-lister(app / app.component)导入一个组件,但我无法做到.

这是我的第二个回购的app.module.ts(非angular-lister):

  1. import { ListerAppComponent } from 'node_modules/angular-lister/app/app.component'
  2.  
  3. @NgModule({
  4. imports: [
  5. ...
  6. ],declarations: [
  7. ...,ListerAppComponent
  8. ],bootstrap: [ ...]
  9. })

我收到以下错误

zone.js:1382 GET
07001
404 (Not Found)

为什么,我在这里做错了什么?

编辑:

主项目中的文件内容(使用angular-lister)

的package.json:

  1. {
  2. "name": "angular-project","version": "1.0.0","scripts": {
  3. "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ","lite": "lite-server","tsc": "tsc","tsc:w": "tsc -w"
  4. },"licenses": [
  5. {
  6. "type": "MIT","url": "https://github.com/angular/angular.io/blob/master/LICENSE"
  7. }
  8. ],"dependencies": {
  9. "@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"
  10. },"devDependencies": {
  11. "@types/core-js": "^0.9.34","@types/node": "^6.0.45","concurrently": "^3.0.0","lite-server": "^2.2.2","typescript": "^2.0.3"
  12. }
  13. }

system.config.js:

  1. /**
  2. * System configuration for Angular samples
  3. * Adjust as necessary for your application needs.
  4. */
  5. (function (global) {
  6. System.config({
  7. paths: {
  8. // paths serve as alias
  9. 'npm:': 'node_modules/'
  10. },// map tells the System loader where to look for things
  11. map: {
  12. // our app is within the app folder
  13. app: 'app',// angular bundles
  14. '@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
  15. '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'
  16. },// packages tells the System loader how to load when no filename and/or no extension
  17. packages: {
  18. app: {
  19. main: './main.js',defaultExtension: 'js'
  20. },rxjs: {
  21. defaultExtension: 'js'
  22. }
  23. }
  24. });
  25. })(this);

node_modules / agnular,利斯特:

node_modules不应该存在,因为您已经告诉SystemJS签入该文件夹.只需编辑它:
  1. import { ListerAppComponent } from './angular-lister/app/app.component'

请记住,您不能只导入项目,您必须创建一个npm包并导出正确的东西. this tutorial是理解其工作原理的一个很好的入口点.

猜你在找的Angularjs相关文章