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-cli.json，以便outDir指向../public/app

即angular-cli.json

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

在子目录中开发Angular App

1 个答案: