2016-10-28 157 views
8

這是我爲在角度2中製作的項目製作的文件夾結構。我已經刪除了節點模塊文件夾和其他文件夾以便適合它。對於造型我只使用Bootstrap。我沒有使用Angular-CLI。任何人都可以指導我如何部署它?我應該使用吞嚥嗎?我的步驟應該是什麼。我已經通過了很多關於stackoverflow的答案,但都使用了GULP和CLI。是否必須同時使用,如果是的話請指導如何實現部署。可悲的是,在Anular2官方網站上沒有提到關於部署的內容。歡迎任何幫助,指導和建議。如何在不使用CLI的情況下部署Angular2項目

|--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:[email protected]/lib/plugin.js', 
     'typescript':    'npm:[email protected]/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); 

回答

2

我使用webpack解決了這個問題。我的webpack製作了一個bundle.js,其中包含所有.js .ts .html文件並將其轉換爲bundle.js。我在Index.html中導入。這個bundle.js包含了它運行所需的所有東西。我的網站需要的其他東西,如style.css和一些引導程序庫必須包含在index.html的外部。你需要遵循 步驟是:

  1. 包括「壓縮的WebPack-插件」:在DEV-依賴「^ 0.3.2」包中的package.json
  2. 有一些事情保持當你使用webpack的時候記住。您需要使用正確的語法將模板導入到組件中,並且路由中的更改很少。
  3. 我已經在package.json中更改了我的構建腳本。增加了的WebPack代碼工作

    「建」: 「故宮運行TSC & & NPM潤潔& &的mkdir _dist & &的WebPack --devtool直列源圖」,

  4. 你需要配置你的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 
    } 
} 
0

TLDR答案:看Angular2 Quickstart Docs並瞭解如何一切正常,然後找出你想要用來構建你的項目來量身定製您的需求。如果你只是練習,只需按照教程和嘗試組合。我還建議您嘗試使用tour of heroes tutorial以獲取更多說明。


我有同樣的問題,你跑到我不知道如何開始Angular2,因爲它似乎有很多涉及的步驟。此外,您在網上找到的很多項目在他們的工作中都非常有限。在大多數情況下,它們只是關於如何開始在前端使用systemjs和CLI任務使用angular2的教程 - 這很好,因爲它們有助於理解啓動應用程序需要什麼或處理您可能遇到的任何問題。

說了最佳構建對於您想要做什麼以及想要如何構建項目是主觀的。例如,我自己使用Gulp方法,因爲它是我熟悉的工具,除了輸入gulp之外不想做任何其他的cli。這樣做的缺點是,沒有教程說明如何按我想要的方式拼湊和運行Angular2,並增加了綁定到適合我需求的後端的困難。

我知道這可能不是您想要的答案,而是將其作爲提示。爲了理解你想要做什麼,請使用Angular 2以Docs的方式引導你,並注意他們如何構建項目以及如何互動。當你這樣做時,無視其他所有關於Gulp或其他人正在使用的內容的信息;確保你明白你需要什麼。從那裏我會建議把你的技能和其他工具的知識,以建立一個更強大的軟件包,可以處理您的需求和你想要完成的。此外,如果你想要一步一步的Angular tour of heroes tutorial是相當具有描述性和開始的好方法。

1

最後角的傢伙聽了我的問題,並給了一個非常廣泛的解決方案。他們更新了他們的網站,並在他們的網站中包含了上述步驟。請仔細閱讀本文以獲得正確的指導Webpack for Angular2

相關問題