应用错误收集

消耗角度2自定义库

时间：2016-12-31 19:59:46

标签： javascript node.js angular node-modules

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

我的angular2应用程序使用node_module中的特定库。我已成功将其安装到我的应用程序＆＃34; $ npm install test-angular-library-1 --save＆＃34; 请检查以下代码。

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包（节点模块）获取文件。这里有什么问题？

1 个答案:

答案 0 :(得分：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);