多Angular2應用，單一供應商庫

我想主辦利用相同的框架包，從根node_modules和子域的各種Angular2應用：多Angular2應用，單一供應商庫

domain.com
subdomain.domain.com
sub2.domain.com

文件夾結構

public_html 
├── SUBDOMAINS 
│   ├── sub2 
│   │   ├── assets 
│   │   └── src 
│   └── subdomain 
│    ├── assets 
│    └── src 
├── assets 
├── boot.ts 
├── index.html 
├── node_modules 
├── package.json 
├── src 
└── tsconfig.json

我希望能夠利用根應用的資源，而不是需要複製的代碼。

來源

2016-05-12 Dov Benyomin Sohacheski

什麼是你angular2版本？你如何打包你的資產？我有'webpack'的設置，如果你有興趣，我會發布它。 – Abdulrahman

我正在使用'System.js'並運行最新版本的Angular。 –

我想你需要使用'gulp'來捆綁'SystemJS'資源。我沒有自己做，但[檢查此答案]（http://stackoverflow.com/a/34616199/3125880）。他還使用'jspm'。這與你需要的基本相同，你只需要修改目的地。 – Abdulrahman

這樣做的一種方法是使用webpack和gulp。您需要在您的tsconfig.json中使用commonjs作爲模塊。

使用webpack將每個單獨的項目ts文件打包爲一個包。
在gulp任務的幫助下，您可以將每個項目分組在不同的
目標文件夾中。
爲每個項目目標文件夾創建index.html文件，並且將其中的js/ts包作爲腳本包含在其中。

使用webpack dev服務器爲每個項目index.html文件監聽不同的端口。

gulp.task("webpack-dev-serverWeb", function(callback) { 
var myConfig = Object.create(webpackConfig); 
new myWebpackDevServer(mywebpack(myConfig), { 
    publicPath: "/" + myConfig.output.publicPath, 
    stats: { 
     colors: true 
    } 
}).listen(8080, "localhost", function(err) { 
    if (err) throw new gutil.PluginError("webpack-dev-server", err); 
    gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/your_path_to_index.html_for_port_8080/index.html"); 
});

來源

2016-05-20 07:29:33 AishApp

多Angular2應用，單一供應商庫

回答

相關問題