Question

如何将Angular 6应用程序添加/集成到现有HTML站点中，我可以将其作为单个JS文件包含在内吗？

如何将Angular App捆绑到单个JS文件中？

谢谢

Answer 1

这里是一个CodePen，它与Angular一起使用。请记住，这是开发模式，您将需要进行编译以进行生产，以将所有可部署文件打包并打包。

角度文件（CDN上托管的开发文件，将其添加到头部）

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

您的index.html文件

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

您的.ts文件（将其编译为js以添加到头部）

@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));

如何将angular2 +应用程序作为简单的JS文件集成到现有HTML站点中

1 个答案: