在子目录中开发Angular App

Question

有没有什么办法可以配置ng-serve命令在根目录下提供静态html文件,并在子目录中提供角度应用程序？

---

我正在开发一个角度2应用程序,并且出于搜索引擎优化的原因,我想在从根目录提供静态页面时在子目录中托管实际应用程序.像这样的东西

./
    About.html
    Home.html
    Contact.html
    /app
       app.html //Angular app goes here

我发现ng build --base-href <base>它创建了一个可以存在于<base>子目录中的角度应用程序的生产版本,但这意味着我必须单独开发角度应用程序,然后将输出导入到我的最终项目中.我希望有一个angualr-cli解决方案,但我对任何想法持开放态度.

Answer 1

正如您ng build --base-href <base>所知,该选项允许您创建应用程序的生产版本,该版本知道如何从<base>您的网站目录中正常工作.这是难题的一部分 - 将Angular配置为能够从服务器的非根文件夹运行.

第二步是配置Angular CLI设置,将构建文件放在正确的位置.现在,您可以手动执行此操作 - 将ng-cli应用程序放在一个完全独立的文件夹中,然后在构建它之后,将工件从Angular应用程序的/ dist文件夹复制到您的网站目录结构中.这是手动方式.在此上下文中,角度应用程序的/ dist文件夹中的项目基本上是从Web服务器的角度来看的静态内容,可以这样处理.

但是,另一种方法是根据需要调查angular-cli.json并更改apps[0].outDir配置选项.该outDir选项指定放置ng build命令输出的位置.默认情况下,它设置为/dist,但可以更改为您需要的任何内容.

所以,例如,如果我有这样的结构:

./public
    About.html
    Home.html
    Contact.html
    /app
       app.html //Angular app BUILD OUTPUT goes here
/angular-app  // Angular app source code

我可以将我的angular-app angular-cli.json配置outDir为指向../public/app

也就是说,在angular-cli.json中

app: [ {
  "root": "src",
  "outDir": "../public/app",
  ......
} ]