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):

import { ListerAppComponent } from 'node_modules/angular-lister/app/app.component'

@NgModule({
    imports:      [
        ...
    ],declarations: [
        ...,ListerAppComponent
    ],bootstrap:    [ ...]
})

我收到以下错误

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

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

编辑:

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

的package.json:

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

system.config.js:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },// map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',// angular bundles
            '@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
            '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'
        },// packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',defaultExtension: 'js'
            },rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

node_modules / agnular,利斯特:

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

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

猜你在找的Angularjs相关文章