Javascript 不使用模板引擎将express路由到ng2_Javascript_Node.js_Express_Angular

Javascript 不使用模板引擎将express路由到ng2

javascript node.js express angular

Javascript 不使用模板引擎将express路由到ng2,javascript,node.js,express,angular,Javascript,Node.js,Express,Angular,我已经生成了默认的express应用程序，我对其进行了修改，使其app.js文件中包含以下行 app.set('views', path.join(__dirname, '/views')); app.engine('html', require('jade').renderFile); app.set('view engine', 'html'); 在./views目录中，我最初拥有layout.jade、index.jade和error.jade。好的，到目前为止还不错。当项目运行时，我会

我已经生成了默认的express应用程序，我对其进行了修改，使其

app.js

文件中包含以下行

app.set('views', path.join(__dirname, '/views'));
app.engine('html', require('jade').renderFile);
app.set('view engine', 'html');

在./views目录中，我最初拥有

layout.jade

、

index.jade

和

error.jade

。好的，到目前为止还不错。当项目运行时，我会看到索引或错误布局

现在。。。我想添加一个最小的angular2安装，目的是让ng2管理一个当前使用

index.jade

的单页应用程序

所以我放了一个

app.component.ts

：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})

export class AppComponent { }

然后我将

index.jade

更改为

index.html

，并添加了：

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../public/stylesheets/style.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>


角度2快速入门
System.import（'app'）.catch（函数（err）{console.error（err）；}）；
加载。。。

然而，有了html模板引擎和新的

error.html

和

index.html

文件，我总是看到错误页面，而不是我的ng2托管索引。知道为什么吗？

现在最好的选择是使用ejs（引擎）并将其配置为接受和呈现html

代码：

app.set（'views'，path.join（'views'）
app.set（'view engine'，'ejs'）；//模板引擎

app.engine（'html'，require（'ejs'）.renderFile）//将引擎转到使用html

注意：所有视图或模板都应该.html扩展名

现在最好的选择是使用ejs（引擎）并将其配置为接受和呈现html

代码：

app.set（'views'，path.join（'views'）
app.set（'view engine'，'ejs'）；//模板引擎

app.engine（'html'，require（'ejs'）.renderFile）//将引擎转到使用html

注意：您的所有视图或模板都应该是.html扩展名

您明白了吗？下面的建议是ejs，但我也不想使用模板引擎。在index.html文件中使用angular 2选择器的正确方式是什么。这样我就可以把前端传给angular 2，而不会出现任何奇怪的错误。比如当我刷新页面时，你明白了吗？下面的建议是ejs，但我也不想使用模板引擎。在index.html文件中使用angular 2选择器的正确方式是什么。这样我就可以把前端传给angular 2，而不会出现任何奇怪的错误。比如当我刷新页面时等等。

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../public/stylesheets/style.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>