从Hapi js启动angular 4 [英] Launch angular 4 from Hapi js

问题描述

我有使用hapi js的后端和有angular 4的前端.我有2个服务器来启动我的前端和后端.

I have back-end with hapi js and front-end with angular 4. I have 2 servers to launch my front-end and my back-end.

我想从hapi js启动我的angular应用程序，但我不知道该怎么做.我发现 https://github.com/guillaume-chs/angular4-hapijs 但它不起作用.您还有更多示例吗?

I would like to launch my angular application from hapi js and I don't know how to do that. I found https://github.com/guillaume-chs/angular4-hapijs but it's not working. Do you have more examples?

谢谢

推荐答案

我猜hapi.js是父项目，而angular 4只是视图"，因此您需要在GET /服务上进行构建angular之后，位于dist文件夹下的静态index.html文件.

I guess that hapi.js is the parent project and angular 4 is just the "view", so what you need to do is on GET / serve the static index.html file that is under dist folder after the build of angular.

在将angular作为视图项目的node.js应用程序中，我使用此res.sendFile(${frontEndDist}/index.html)

In node.js app with angular as a view project I use this res.sendFile(${frontEndDist}/index.html)

ngOnInit()也许不需要if语句

this.http.get(this.portURL)
      .toPromise()
      .then((res: any) => {
        const json = res.json();
        this.port = json.port;
        console.log(`port ${this.port}`);

        this.url = location.origin.replace(/^http/, 'ws');
        if (location.origin.includes('localhost')) {
          this.url = this.url.replace('4200', '5000');
        } else {
          this.url = this.url.replace('4200', this.port.toString());
        }

        this.initWebSocketConnection();
        console.log(`url ${this.url}`);
      })
      .catch((reason) => {
        console.log(reason);
      });

在node.js应用程序中

In node.js app

const server = express()
  .use(express.static(frontEndDist))
  .use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
  })
  .get('/port', (req, res) => {
    res.json({port: port})
  })
  .get('*', (req, res) => {
    res.sendFile(`${frontEndDist}/index.html`);
  })
  .listen(port, () => {
    console.log(`Listening on ${port}`)
  });

我想您可以轻松地将其转换为hapi.js语法-与reply.file(//path to index.html)

I guess you can easily convert that to hapi.js syntax - something relevant to reply.file(//path to index.html)

这篇关于从Hapi js启动angular 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！