23

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.

Improve this question
12
  • Why do you think you can't do what you want? Commented Apr 20, 2017 at 12:50
  • 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. Commented Apr 20, 2017 at 12:51
  • 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 Commented Apr 20, 2017 at 12:52
  • 1
    @GünterZöchbauer -Basically I renamed the Angular file to app.html and made index.html a static file and it worked like charm! Commented Apr 20, 2017 at 13:51
  • 1
    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. Commented Oct 31, 2017 at 16:55

4 Answers 4

Reset to default
16

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

13

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

Improve this answer

1 Comment

Is there a way to change the route? Other than changing the file path inside the project.
7

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

Improve this answer

Comments

2

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

Improve this answer

2 Comments

With the static HTML will I be able to use the same css styles?
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.