Serving static html outside Angular4

Question

I am a beginner in Angular 4/ Angular 2. I am building an app which consists of

1) static html files( aboutus.html, pricing.html, contact us.html etc), with corresponding css, js files 2) single page application with complex functionality

The first part #1 does not need Angular at all as it's completely static. After login a user comes to #2. From the Angular tutorials that I went through, it seems I need to combine #1 and #2 together and still have to create components etc out of #1, which I feel is unnecessary.

Is there a way, I can build this project such that I can use the static html as is and use Angular only for the dynamic single page app? Any helpful links or examples would be much appreciated.

Solution 1

You can't use the router to integrate static html pages, but you still can use normal HTML links. There is no need to name the file that contains the Angular application index.html

Solution 2

If you want to serve static files locally with ng serve, you need to add them either in your assets folder or add to the assets config. See https://github.com/angular/angular-cli/issues/5029

Solution 3

You can put your static html files into the /assets/ folder.

For example, if you put your aboutus.html file into the folder /assets/static/, then you can link to http://localhost/assets/static/aboutus.html

Solution 4

In the assets key under apps, you can include any directory you like that you want angular-cli to treat as static. For example, you can declare a folder called static, and serve up static pages from there.

For v6 applications, assets lives under browser:

https://github.com/angular/angular-cli/blob/v6.0.0-rc.8/packages/%40angular/cli/lib/config/schema.json#L521

View more solutions

Comments

[Günter Zöchbauer]

Why do you think you can't do what you want?

[geeky_monster]

The tutorials i went through seemed to suggest me that, since everything started with index.html and all routes came there. I dont know how to do it.

[Günter Zöchbauer]

You can't use the router to integrate static html pages, but you still can use normal HTML links. There is no need to name the file that contains the Angular application index.html

[Tatsuyuki Ishi]

I'm assuming you're using angular-cli, right?

[geeky_monster]

@TatsuyukiIshi - I downloaded the quickstarter seed project from here - angular.io/docs/ts/latest/guide/setup.html

[Tatsuyuki Ishi]

Then, things are easier. You just build them separately and copy combine them for production.

[charlietfl]

Simplest might be just put angular app in a different directory although can use it anywhere

[geeky_monster]

@GünterZöchbauer - So you mean I call the main application as app.html or something similar and i can have different static pages for pricing.html etc

[Günter Zöchbauer]

Sure, that should work fine.

[geeky_monster]

@GünterZöchbauer - I tried what you recommended and it works. If you want, you can put what you said as the answer and I shall accept it. Thanks so much :)

[geeky_monster]

@GünterZöchbauer -Basically I renamed the Angular file to app.html and made index.html a static file and it worked like charm!

[bryan60]

There is a reason to not do this. If you think users will be switching back and forth between the static pages and the app, then you should NOT do this, as the app will need to reload every single time they navigate back.

[Villie]

With the static HTML will I be able to use the same css styles?

[Alexei - check Codidact]

Simply placing the files under the assets folder did not work for me, but configuring them from angular.json. Also this answer allows to place static content outside of the assets folder.