使用 angular 2 个自定义库

Question

我创建了一个自定义的 Angular 2 库，它在此处作为 npm 包发布 https://www.npmjs.com/package/test-angular-library-1

我的 angular2 应用程序使用来自 node_module 的特定库。我已经成功地将它安装到我的应用程序“$ npm install test-angular-library-1 --save” 请检查以下代码。

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
// Import library
import { SampleComponent } from 'test-angular-library-1';

@NgModule({
  imports:      [ BrowserModule, SampleComponent ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Index.html

...
  <body>
    <my-app>Loading AppComponent content here ...</my-app>    
    <sampleComponent></sampleComponent>
  </body>
...

我收到以下错误 404 - 找不到路径。它必须从 npm 包（节点模块）中获取文件。这里出了什么问题？

Answer 1

确保您已将新库映射到 bundler/loader。例如，下面是 Systemjs.config.js

的一个示例

                      (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',

                      // other libraries
                      'test-angular-library-1': 'npm:test-angular-library-1/test-angular-library-1'
                    },
                    // 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'
                      },
                      'js-base64':{
                           defaultExtension: 'js'
                     }

                    }
                  });
                })(this);

使用 angular 2 个自定义库

Consume angular 2 custom library

javascript

node.js

angular

node-modules

app.module.ts

Index.html