如何在不使用 CLI 的情况下部署 Angular2 项目答案

【问题标题】：How to deploy Angular2 project without using CLI如何在不使用 CLI 的情况下部署 Angular2 项目
【发布时间】：2017-04-11 15:21:22
【问题描述】：

这是我为 Angular 2 制作的项目制作的文件夹结构。我删除了 Node-Module 文件夹和其他文件夹，以便将其放置在此处。对于造型，我只使用了 Bootstrap。我没有使用过 Angular-CLI。谁能指导我应该如何部署它？我应该使用 gulp 吗？我的步骤应该是什么。我在 stackoverflow 上浏览了很多答案，但都在使用 GULP 和 CLI。是否必须同时使用，如果是请指导如何实现部署。遗憾的是，在 Anular2 官方网站上没有提到任何关于部署的内容。欢迎任何帮助、指导和建议。

|--app
|   |-- logo.png
|   |-- components
|   |   |-- main.component.ts
|   |   |-- config.component.ts
|   |   |-- download-resources.component.ts
|   |   |-- header-footer.component.ts
|   |   |-- licence.component.ts
|   |   |-- menu-bar.component.ts
|   |   |-- process-status.component.ts
|   |   |-- release-history.component.ts
|   |   |-- upload-release.component.ts
|   |   `-- version.component.ts
|   |-- main
|   |   `--module.ts
|   |-- main.ts
|   |-- models
|   |   |-- config.model.ts
|   |   |-- meta-info.model.ts
|   |   |-- process-status.model.ts
|   |   `-- version.model.ts
|   |-- services
|   |   |-- cc-info.service.ts
|   |   |-- config.service.ts
|   |   |-- release-history.service.ts
|   |   |-- shared.service.ts
|   |   |-- upload-release.service.ts
|   |   `-- version.service.ts
|   `-- template
|       |-- download-resources.component.html
|       |-- licence.component.html
|       |-- license-info.component.html
|       |-- machines.component.html
|       |-- menu-bar.component.html
|       |-- process-status.component.html
|       |-- release-history.component.html
|       |-- topology-info.component.html
|       |-- topology-upload.template.html
|       |-- upload-release.component.html
|       `-- version.component.html
|-- index.html
|-- package.json
|-- styles.css
|-- systemjs.config.js
|-- tsconfig.json
`-- typings.json

这是我的 system.config.js 文件：

(function (global) {
  System.config({
    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
    transpiler: 'ts',
    typescriptOptions: {
      tsconfig: true
    },
    meta: {
      'typescript': {
        "exports": "ts"
      }
    },
    paths: {
      // paths serve as alias
      'npm:': 'node_module'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'main-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',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',

      // other libraries
      'ng2-file-upload' : 'npm:ng2-file-upload',
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
      'ts':                        'npm:plugin-typescript@4.0.10/lib/plugin.js',
      'typescript':                'npm:typescript@2.0.2/lib/typescript.js',

    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.ts',
        defaultExtension: 'ts'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      },
      'ng2-file-upload':{
        main: 'ng2-file-upload.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

【问题讨论】：

标签： angular

【解决方案1】：

我通过使用 webpack 解决了这个问题。我的 webpack 制作了一个 bundle.js，其中包含所有 .js .ts .html 文件并将其转换为 bundle.js。我在 Index.html 中导入。这个 bundle.js 包含它运行所需的所有东西。我的站点需要的其他内容，例如 style.css 和一些引导库必须在外部包含在 index.html 中。您需要遵循的步骤是：

在 dev-dependency 的 package.json 中包含 "compression-webpack-plugin": "^0.3.2" 包
在使用 webpack 时，还有几件事需要牢记。您需要使用正确的语法将模板导入组件中，并且路由几乎没有变化。
我在 package.json 中也更改了我的构建脚本。添加了让 webpack 工作的代码

"build": "npm run tsc && npm run clean && mkdir _dist && webpack --devtool inline-source-map",
你需要配置你的 webpack。 webpack.config.js 包含我所做的所有配置，看起来像这样。

var webpack = require("webpack");
var CompressionPlugin = require("compression-webpack-plugin");  
module.exports = {
entry: {
 "app": "./app/main"
 },
        output: {
            path: __dirname,
            filename: "./_dist/bundle.js",
            publicPath: 'http://localhost:4242/app'
        },
 resolve: {
        extensions: ['', '.js', '.ts', '.html']
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {
  test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader']
            },
            {
                test: /\.html$/,
                loader: 'html'
            }
    ]
},
htmlLoader: {
    minimize: false
},
plugins: [
    new webpack.NoErrorsPlugin(),
],
devServer: {
    historyApiFallback: true,
 stats: 'minimal',
        inline: true,
        port: 4242
    }
}

【讨论】：

【解决方案2】：

最后，Angular 的人听取了我的问题并给出了一个非常广泛的解决方案。他们已经更新了他们的网站，并在他们的网站中包含了上述步骤。请通过此获得适当的指导Webpack for Angular2

【讨论】：

【解决方案3】：

TLDR 答案：查看Angular2 Quickstart Docs 并了解一切是如何工作的，然后找出您想使用什么来构建项目以满足您的需求。如果您只是在练习，请按照教程并尝试组合。我还建议尝试tour of heroes tutorial 来添加描述。

我遇到了同样的问题，我不知道如何从 Angular2 开始，因为它似乎涉及很多步骤。此外，您在网上找到的许多项目的功能都非常有限。在大多数情况下，它们只是关于如何使用 systemjs 和 CLI 任务在前端开始使用 angular2 的教程——它们有助于了解启动应用程序所需的内容或处理您可能遇到的任何问题。

话虽如此，最佳构建取决于您想要做什么以及您希望如何构建项目。例如，我自己使用 Gulp 方法，因为它是我熟悉的工具，除了输入 gulp 之外不想做任何 cli。这样做的缺点是没有教程说明如何拼凑并以我想要的方式运行 Angular2，而且在连接适合我需要的后端时增加了难度。

我知道这可能不是您想要的答案，但将其作为提示。为了了解您想要做什么，请按照Docs 引导您的方式使用 Angular 2，并注意他们如何构建项目以及一切如何交互。当您这样做时，请忽略有关 Gulp 或其他人正在使用的任何构建的所有其他信息；以确保您了解您的需求。从那里我建议利用你的技能和其他工具的知识来构建一个更强大的包，可以满足你的需求和你想要完成的事情。此外，如果您想要一步一步，Angular tour of heroes tutorial 非常具有描述性，是入门的好方法。

【讨论】：