Question

我想将一些静态内容与角度应用程序一起存储在Web服务器（登录页面）的根目录中。我希望能够在用户访问“ / portal”应用程序时访问页面的“ /”（根目录）时提供静态内容。

我尝试将静态内容制作为单独的组件，但是由于使用的是预定义的模板，因此无法包含它们（由于重复的<doctype>等，我在编译时会遇到解析错误）

此外，我正在用express服务整个事情，所以我想到的是利用express的实用程序

app.use('/',express.static(path.join(__dirname, 'dist/landing')));
app.use('/portal',express.static(path.join(__dirname, 'dist')));

到目前为止，我已经完成了登录页面的工作，并且能够访问prtal部分，但是我在控制台上看到资源（vendor.js，runtime.js等）没有被加载（404）。 / p>

app.use和app.get的其他组合可能会让我进入门户并使之正常工作，但是每当刷新其中的页面（登录时），我都会得到一个空白页面（404）

我将<base>设置为href='/'，但更改它只会使事情更加复杂。

很抱歉要问这个问题，但是我是angular / express上的新手。有办法解决这个问题吗？我找不到一个涵盖使用Express提供静态文件和应用程序的示例

有人可以指导我吗？我尝试了app.use和app.get的每种组合，并阅读了许多文档，但并没有清楚地了解它是如何工作的。

谢谢。

Answer 1

Angular应用中的两件事就足够了：

<base href="/portal/">

在index.html

中

和提供者：[ ... {提供：APP_BASE_HREF，useValue：'/ portal'}， ]

在app.module

中

已编辑：对于开发模式（端口4200 Webpack服务器），请使用代理配置：

"/portal/*.js": {
"target": "http://localhost:4200/",
"secure": false,
"pathRewrite": {
    "^/portal": ""
  }
},

"/portal/*.css": {
"target": "http://localhost:4200/",
"secure": false,
"pathRewrite": {
   "^/portal": ""
  }
},

"/portal/favicon.ico": {
"target": "http://localhost:4200/",
"secure": false,
"pathRewrite": {
   "^/portal": ""
 }

}，

"/portal/assets": {
"target": "http://localhost:4200/",
"secure": false,
"pathRewrite": {
  "^/portal": ""
}

}

对于“生产”，无论您使用什么后端，都应该简单地配置为将/ portal / ...指向构建应用程序的静态目录。

沿Angular应用程序提供静态内容

1 个答案: