Question

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

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

谢谢！

Answer 1

不从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 {

}

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

1 个答案: