Question

根据我的研究，我正在对代码进行以下操作。目前，我的控制台出现以下错误，我看不出为什么。我一步一步地遵循了教程。

任何帮助将不胜感激。我正在尝试从我的route.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

Answer 1

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

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

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

Answer 2

您需要了解Node js是一个服务器端框架，而Angular是一个前端框架，两者都需要编译。

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

Angular将以纯HTML和javascript的形式加载到浏览器中。

您需要创建一个API并尝试实现这一目标。

Answer 3

global是nodejs全局对象，类似于浏览器中的window。它仅用于nodejs，在浏览器环境中不存在。这说明了错误。

事实是，表达代码存在于服务器上的nodejs运行时中。角代码存在于浏览器中。这是两个孤立的环境，无法像您尝试的那样访问彼此的变量。根本不可能。

Answer 4

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

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

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

4 个答案: