如何将 Angular 2 Frontend Express JS 变量导出到 Angular 2 组件？答案

【问题标题】：How can I export Angular 2 Frontend Express JS variable to a Angular 2 component?如何将 Angular 2 Frontend Express JS 变量导出到 Angular 2 组件？
【发布时间】：2019-08-20 12:24:03
【问题描述】：

根据我的研究，我正在使用我的代码执行以下操作。目前我在控制台中收到以下错误，我不明白为什么。我按照教程逐行进行。

任何帮助将不胜感激。我正在尝试从我的 routes.js 文件中导出 nameid 变量以在 Angular 组件中使用。

angular-master/express/config/routes.js

var xmldoc = require('xmldoc');
var DOMParser = require('dom-parser');
module.exports = function (app, config, passport) {

  app.get('/', function (req, res) {
      res.redirect('/home')
  });

  app.get('/login',
    passport.authenticate(config.passport.strategy,
      {
        successRedirect: '/',
        failureRedirect: '/login'
      })
  );

  app.post('/', function(req, res) {
    console.log('body saml:', req.body.SAMLResponse);
    const body = req.body.SAMLResponse;
    var b = new Buffer(body, 'base64');
	let text = b.toString('ascii');
    //var inflated = pako.inflateRaw(b, {to:'string'}); 
    console.log('formmatted saml',text);
     var document = new xmldoc.XmlDocument(text);
	 console.log('formmatted document',document);
     var status = document.descendantWithPath("samlp:Status").firstChild.attr;
    
   var attr = text.includes("AttributeStatement");
   var nameid = text.substring(text.lastIndexOf("<NameID>") + 8,text.lastIndexOf("</NameID>"));
   module.exports.nameid = nameid;
    console.log("status id:", status['Value']);
	console.log(attr);
	  console.log('LDAP DB username: ' + nameid);
  
  

};

angular-master/src/app/site/user-history/user-history.component.ts

import { Component, OnInit } from '@angular/core';
import { RouterLink } from '@angular/router';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { element } from 'protractor';
import { ActivatedRoute } from '@angular/router';
import { Router } from '@angular/router';

var routes = require('./../../../../express/config/routes.js');


@Component({
  selector: 'app-user-history',
  templateUrl: './user-history.component.html',
  styleUrls: ['../style.css']
})
export class UserHistoryComponent implements OnInit {


  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) {}


  ngOnInit() {
	  console.log(routes.nameid); 


}

我的控制台显示以下错误：

xmldoc.js:5 Uncaught ReferenceError: global is not defined
    at xmldoc.js:5
    at Object../node_modules/xmldoc/lib/xmldoc.js (xmldoc.js:339)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/xmldoc/index.js (index.js:3)
    at __webpack_require__ (bootstrap:76)
    at Object../express/config/routes.js (routes.js:1)
    at __webpack_require__ (bootstrap:76)
    at Object../src/app/site/user-history/user-history.component.ts (user-history.component.ts:23)
    at __webpack_require__ (bootstrap:76)
    at Object../src/app/site/site.module.ts (main.js:8001)
(anonymous) @ xmldoc.js:5
./node_modules/xmldoc/lib/xmldoc.js @ xmldoc.js:339
__webpack_require__ @ bootstrap:76
./node_modules/xmldoc/index.js @ index.js:3
__webpack_require__ @ bootstrap:76
./express/config/routes.js @ routes.js:1
__webpack_require__ @ bootstrap:76
./src/app/site/user-history/user-history.component.ts @ user-history.component.ts:23
__webpack_require__ @ bootstrap:76
./src/app/site/site.module.ts @ main.js:8001
__webpack_require__ @ bootstrap:76
./src/app/app.module.ts @ app.component.ts:13
__webpack_require__ @ bootstrap:76
./src/main.ts @ environmentLoader.ts:21
__webpack_require__ @ bootstrap:76
0 @ main.ts:16
__webpack_require__ @ bootstrap:76
checkDeferredModules @ bootstrap:43
webpackJsonpCallback @ bootstrap:30
(anonymous) @ main.js:1

【问题讨论】：

将标签更改为 angularjs --> angular 版本低于 2
希望您了解 Express 通常存在于服务器上而 Angular 存在于浏览器中——事实上两者都是 JavaScript 并不会改变任何东西。
说实话我不明白。我有两个我认为是 express 的例子。我用来调用我的数据库的 express 后端和一个 express，它位于我的 Angular 环境中用于 SAML 登录的文件夹中。这有任何意义吗？我只是想将 Angular 环境的 Express 文件夹中的 routes.js 文件中的变量传递给 Angular 组件。这可能吗？

标签： javascript angular typescript express

【解决方案1】：

糟糕，您必须使用 import 而不是 require。

import * as routes from './../../../../express/config/routes.js';
ngOnInit() {
  console.log(routes.nameid); 
}

但是为什么要在前端调用后端变量呢？它们是独立的服务器

【讨论】：

感谢您与我们联系 - 我目前仍在控制台中收到相同的错误。我的最终目标是捕获在登录过程中创建的 SAML 元数据的一部分，以便在 Angular 的数据库调用中使用。有没有其他方法可以做到这一点？

【解决方案2】：

你要明白Node js是服务端框架，Angular是前端框架，都需要编译。

由于两者都是 javascript，您认为可以在前端导入服务器代码。但是 Angular 的 package.json 和 angular.json 文件不知道 routes.js 并且它不会编译它。

Angular 将作为纯 HTML 和 javascript 加载到浏览器中。

您需要创建一个 API 并尝试实现此目的。

【讨论】：

【解决方案3】：

global 是 nodejs 的全局对象，就像浏览器中的 window 一样。它是 nodejs-only，在浏览器环境中不存在。这就解释了错误。

问题是，express 代码存在于服务器上的 nodejs 运行时中。 Angular 代码存在于浏览器中。这是两个孤立的环境，无法像您尝试那样访问彼此的变量。这简直是不可能的。

【讨论】：

【解决方案4】：

您可能已经尝试过这种方法，但请尝试导入您正在使用的特定变量，而不是所有内容。

例如： import { nameid } from './../../../../express/config/routes.js'

【讨论】：