在子目录中开发Angular应用 [英] Develop Angular App in Sub-Directory

问题描述

有什么方法可以配置ng-serve命令以在根目录中提供静态html文件，并在子目录中提供有角度的应用程序?

Is there any way I can configure the ng-serve command to serve static html files at the root directory, and serve an angular app at a sub-directory?

我正在开发一个angular 2应用程序，出于SEO的原因，我想在子目录中托管实际应用程序，同时从根目录提供静态页面.像这样

I'm developing an angular 2 app, and for SEO reasons I want to host the actual app in a sub directory while serving static pages from the root directory. Something like this

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

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

I've found the ng build --base-href <base> which creates a production version of the angular app that can live in the <base> sub-directory, but this means I have to develop the angular app separately and then import the output into my final project. I'm hoping for an angualr-cli solution, but I'm open to any ideas.

推荐答案

您已经认识到，ng build --base-href <base>选项允许您创建应用的生产版本，该版本知道如何从<base>目录正常工作您的网站.那是难题的一部分-配置Angular使其能够从服务器的非根文件夹运行.

As you've realised, the ng build --base-href <base> option allows you to create a production build of your app that knows how to work properly from the <base> directory of your website. That's one part of the puzzle - configuring Angular to be able to run from a non-root folder of your server.

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

The second step is configuring your Angular CLI setup to put your build files in the correct location. Now, you can do this manually - have your ng-cli app in a completely separate folder and after you build it, copy the artifacts from the /dist folder of your Angular app into your website directory structure. This is the manual way of doing it. In this context, the items in the /dist folder of your angular app are basically static content from the point of view of a web server and can be treated as such.

但是，另一种选择是查看您的angular-cli.json并根据需要更改apps[0].outDir配置选项. outDir选项指定将ng build命令的输出放置在何处.默认情况下，它设置为/dist，但是可以将其更改为所需的任何内容.

But, another alternative is to look into your angular-cli.json and change the apps[0].outDir configuration option as needed. The outDir option specifies where to place the output of the ng build command. By default, it's set to /dist, but it can be changed to whatever you need it to be.

例如，如果我具有这样的结构:

So, for eg, if i have the structure like this:

./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

I can have my angular-app's angular-cli.json configured such that outDir is pointing to ../public/app

即在angular-cli.json中

that is, in angular-cli.json

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

这篇关于在子目录中开发Angular应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！