如何在不使用CLI的情况下部署Angular2项目 [英] How to deploy Angular2 project without using CLI

问题描述

这是我为用angular 2制作的项目制作的Folder结构.为了适应这里，我删除了Node-Module文件夹和其他文件夹.对于样式，我只使用了Bootstrap.我没有使用过Angular-CLI.谁能指导我该如何部署它?我应该用口水吗?我的脚步应该是什么.我在stackoverflow上经历了很多答案，但是所有人都在使用GULP和CLI.是否必须同时使用两者，如果是，请指导如何实现部署.遗憾的是，在Anular2官方网站上没有提到有关部署的信息.欢迎任何帮助，指导和建议.

This is the Folder structure i have made for a project made in angular 2. I have deleted the Node-Module folder and other folder in order to fit it here. For styling i have only used Bootstrap. I have not used Angular-CLI. Can anyone guide me how should i deploy it ? Should i use gulp ? what should my steps be. I have gone through a lot of answers on stackoverflow but all were using GULP and CLI. Is it must to use both, if so please guide how to achieve deployment. Sadly there is nothing mentioned about deployment in Anular2 official website. Any help, guidance and suggestion is welcomed.

|--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文件:

This is my system.config.js file:

(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);

推荐答案

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

I solved this problem by using webpack. My webpack makes a bundle.js which includes all the .js .ts .html files and converts it into bundle.js. which i import in Index.html. This bundle.js contains all the things required for it to run. Other things required by my site, like style.css and some bootstrap libraries have to be included externally in index.html. Steps that you need to follow are:

1. 在dev.dependency中的package.json中包括"compression-webpack-plugin":"^ 0.3.2"包
2. 使用webpack时，要记住的其他事情很少.您需要使用正确的语法将模板导入componenet，并且路由中的更改很少.

3. 我也在package.json中更改了我的构建脚本.添加了使Webpack正常工作的代码

1. Include "compression-webpack-plugin": "^0.3.2" package in package.json in dev-dependency
2. There are few more things to keep in mind when you use webpack. You need to use correct syntax to import your templates in componenet and there are few changes in routes.

3. I have changed my build script as well in package.json. Added code for webpack to work

构建":"npm run tsc&& npm run clean& mkdir _dist&& webpack --devtool inline-source-map，

"build": "npm run tsc && npm run clean && mkdir _dist && webpack --devtool inline-source-map",

您需要配置Webpack. webpack.config.js包含我已经完成的所有配置，看起来像这样.

You need to configure your webpack. webpack.config.js contains all the configuration that i have done, It looks something like this.

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
    }
}

这篇关于如何在不使用CLI的情况下部署Angular2项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！