社区首页 >问答首页 >如何解析typescript导入以在node_modules中查找库？

问如何解析typescript导入以在node_modules中查找库？
EN

Stack Overflow用户

提问于 2017-03-24 19:36:57

回答 1查看 75关注 0票数 0

我有一个带有typescript的Angular 2.4应用程序。在我第一次尝试Angular 1时，我从未将节点模块推送到测试环境中。只是推送了编译后的代码。但是在Angular 2.4中，typescript正在从节点模块中“导入”这些库。因此，当我将捆绑的应用程序推送到测试环境时，它会失败，因为缺少节点模块。

是否必须将节点模块推送到测试环境中才能正常工作？您如何将您的angular 2应用程序部署到非本地环境。

谢谢!

javascript

angularjs

node.js

回答 1

Stack Overflow用户

发布于 2017-03-24 19:49:21

不从node_modules导入你的应用程序的任何模块。在systemjs.config.js中定义node_modules路径，然后使用您的应用程序。示例systemjs.config.js文件和在任何组件中使用node_modules组件都有以下代码。

systemjs.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: '/Template/js/kpxl/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',
            'primeng': 'npm:primeng',

            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.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'
            },
            primeng: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

任何组件

import { Component, OnInit, Input } from '@angular/core'
import { Http } from '@angular/http'
import { LazyLoadEvent, Button, Dialog } from 'primeng/primeng'

@Component({
    selector: 'error-log',
    moduleId: module.id,
    templateUrl: '/Settings/ErrorLog.html'
})
export class ErrorLog implements OnInit {

}