将Angular2应用程序的必要依赖项上传到web主机中

Uploading necessary dependencies for Angular2 App into a web host

本文关键字：web 主机 依赖 应用程序 Angular2      更新时间：2023-09-26

我是Angular2的新手，对node.js和angular2框架的功能和关系有点困惑。

我可以在本地主机上使用lite服务器运行我的应用程序，但我的问题是将应用程序上传到托管服务。没有任何关于应用程序准备好后该做什么的教程或指南，所以我一直在尝试使用webpack进行捆绑，但我没有成功。我知道上传npm安装的所有node_modules是一种糟糕的做法，但我尝试制作这样的捆绑包是正确的吗？

另一个澄清是，我的应用程序是否可以通过上传html、css和js文件（包括node_modules中的文件）来运行我的应用？还是我需要配置一个允许Node.js运行我的应用程序的主机？

在Angular2中，如果您使用Typescript，则需要对Web应用程序进行transfile，此transfile会将文件放在/dist文件夹中。如果你使用ES6，你就使用你开发的根文件夹中的应用程序。

如果你在浏览器中打开你/dist文件夹的"index.html"，angular2中的应用程序就会工作。

在index.html中，您有以下代码

System.import('system-config.js').then(function () {
  System.import('main');
}).catch(console.error.bind(console));

在/dist的main.js中，您有以下代码

var _1 = require('./app/');

在这个文件夹中需要你有这个（例如）

var ng_fire_component_1 = require('./ng-fire.component');

这需要调用webbapp的主要组件。。。在这个逻辑中，当ng-fire.component是你的根组件时，你的应用程序只会打开index.html。

在节点中，你只需要创建一个web服务器，这个web服务器（如果使用express js）你需要调用index.html

router.get('/', function(req, res){
  res.sendfile('yourAPPfolder/index.html');
});

当您打开www.yourweb.com/或localhost:yourPort/时，您的webApp将再次运行

对于最后一个问题，如果使用服务器，您必须导入该文件夹中的文件夹/dist，您拥有所有需要的文件。

我修复了棱角分明的ci(https://cli.angular.io)对于angular2的工作。。。如果您需要其他供应商文件或供应商文件夹，您可以在angular-cli-build.js 文件中添加

例如：

    /* global require, module */
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
    module.exports = function(defaults) {
      return new Angular2App(defaults, {
        vendorNpmFiles: [
          'systemjs/dist/system-polyfills.js',
          'systemjs/dist/system.src.js',
          'zone.js/dist/*.js',
          'es6-shim/es6-shim.js',
          'reflect-metadata/*.js',
          'rxjs/**/*.js',
          '@angular/**/*.js'
        ]
      });
    };
相关文章：