Angular 2庫如何加載？

Question

如何為在NodeJS上運行的WebApp加載Angular 2庫？ 如果我不使用System.js，是否需要ng-app？ 還是我們需要在index.html中專門提及它？ （雖然看起來不是這樣）它在呈現DOM時如何檢測自定義組件？

Answer 1

它不需要像ng-app這樣的特殊標簽/屬性

關鍵是使用您的主要App類/組件作為參數來調用引導函數

    import {bootstrap} from 'angular2/platform/browser';
    import { App } from './app'; 
    import { SharedService } from './core/shared.service';  

    bootstrap(App, [SharedService] ) 
      .then(success => console.log(`Bootstrap success.`))
      .catch(error => console.log(error));   

如果要在服務器端呈現應用程序，則可以執行以下操作：

import * as express from 'express';
import {ng2engine} from 'angular2-universal-preview';

// Angular 2
import {App} from './src/app';

let app = express();

// Express View
app.engine('.ng2.html', ng2engine);
app.set('views', __dirname);
app.set('view engine', 'ng2.html');


// static files
app.use(express.static(__dirname));


app.use('/', (req, res) => {
  res.render('index', { App });
});



app.listen(3000, () => {
  console.log('Listen on http://localhost:3000');
});

Answer 2

您將需要System js才能在瀏覽器中加載angular應用程序。 如此處所述，系統js是

通用動態模塊加載器-在瀏覽器和NodeJS中加載ES6模塊，AMD，CommonJS和全局腳本。

這些代碼行：
<script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script>

在index.html中將再次import加載您的應用程序或應用程序代碼。

Angular2構建塊是需要從一個文件導出才能import到另一個文件的組件/模塊。 System.js在瀏覽器中加載這些模塊。 然后我們在index.html有一個組件，例如<my-app> ，它在Angular 2引導我們的應用程序后被替換。 您可以閱讀官方快速入門以獲取更多信息