Jesse Sliter Jesse Sliter - 9 months ago 46
AngularJS Question

Develop Angular App in Sub-Directory

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?




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


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.

Answer Source

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.

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.

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

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

that is, in angular-cli.json

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