How to include an Angular 7 application in an existing html file and website?
Question
I have on one side an existing website, on the other I have an Angular 7 application component.
I'd like to edit my existing someusecase.html and reuse my Angular 7 application like so eg
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to import Angular 7 App?</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app-root></app-root>
</body>
</html>
What would I need to include in the html for this to work? I'm after eg something equivalent to:
<script src="/ui/node_modules/angular/angular.min.js"></script>
<script src="/ui/components/Application.js"></script>
In other words, is it possible to reuse and activate an Angular 7 Application within a <div> scope inside an existing webpage?
1 answers
solution1
3 ACCPTED 2019-06-19 08:29:42
1) Run
ng build
2) got into the dist folder
3) Copy & paste all of the files there, to your original app, except for the index.html file.
4) Open the not-copied index.html file
5) Copy all of the <script> tags in this file, into your someusecase.html file, at the same spot .
6) use your app component selector wherever you want your angular application to be displayed.
Note that this is only informational : in real life, this should be automated, because you would have to do this manipulation on every build .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.