How to integrate an angular2+ application into an existing HTML site as a simple JS file

Question

How can i add/integrate an Angular 6 application into an existing HTML site, can I include it as a single JS file ?

How can I bundle an Angular App into a single JS file ?

Thanks

when you build angular application you will get a lot of bundled js css and assets files but in end you can just include some vendor polyfils and i think main and style files and they should load angular application correctly. That is if you build them with corret setup for hosting route where it will be included — Xesenix, Jun 25 '19 at 14:18
when you build angular application you get the dist folder with your project check content of `index.html` all that needs to be loaded for angular application should be referenced there. The second part is that you need to use proper flags for output path when building so for example `ng build app --base-href='/some/serve/path' --deploy-url='/some/serve/path'` — Xesenix, Jun 25 '19 at 14:27
so when you have in your `index.html` `` you need all those things injected into your existing page and all files referenced put somewhere on server you can use `angular.json` to move some of those files into correct place on server — Xesenix, Jun 25 '19 at 14:31

score 0 · Answer 1 · answered Jun 25 '19 at 14:29

Here is a CodePen working with Angular stubbed into it. Remember this is development mode and you'll want to compile for production to get all the deployable files webpacked and ready.

Angular files (development files hosted at a CDN, add them to head)

https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.2.1/rxjs.umd.min.js https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.js https://unpkg.com/@angular/core@6.0.5/bundles/core.umd.js https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.26/zone.min.js https://unpkg.com/@angular/common@6.0.5/bundles/common.umd.js https://unpkg.com/@angular/compiler@6.0.5/bundles/compiler.umd.js https://unpkg.com/@angular/platform-browser@6.0.5/bundles/platform-browser.umd.js https://unpkg.com/@angular/platform-browser-dynamic@6.0.5/bundles/platform-browser-dynamic.umd.js https://unpkg.com/@angular/forms@6.0.5/bundles/forms.umd.js

Your index.html file

<my-app></my-app> // Angular should load in here

Your .ts file (compile it to js to add to head)

@Component({
  selector: 'my-app',
  template: `
   <input-textarea (OutputEvent)="receiveValue($event)"></input-textarea>
   <expander [textInput]="value"></expander>
  `
})
class AppComponent {  
   value: string = '';
   constructor() {}

   public receiveValue(val){
      this.value = val;
   }
}



// main.js
const { BrowserModule } = ng.platformBrowser;
const { NgModule } = ng.core;
const { CommonModule } = ng.common;

@NgModule({
  imports: [
    BrowserModule,
    CommonModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: []
})
class AppModule {}

const { platformBrowserDynamic } = ng.platformBrowserDynamic; 

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

How to integrate an angular2+ application into an existing HTML site as a simple JS file

1 Answers1