如何仅将一个组件捆绑到一个文件 js 文件并在另一个项目中引用答案

【问题标题】：How to bundle only a component to one file js file and refer in another project如何仅将一个组件捆绑到一个文件 js 文件并在另一个项目中引用
【发布时间】：2018-05-13 18:44:50
【问题描述】：

我需要将我的组件捆绑到一个 js 文件中。原因是我需要将其添加到另一个正在运行的项目中。

import { Component } from '@angular/core';

    @Component({
      selector: 'sample-comp',
      templateUrl: './sample-comp.html',
      styleUrls: ['./sample-comp.css']
    })
    export class AppComponent {
      title = 'app works!';
    }

例如，这是我的组件。捆绑后我需要一个文件，下面是我的 HTML 和 CSS 示例-comp.html

<h1>
  test
</h1>

sample-comp.css

   h1{
     font-size: 15px;
    }

阅读后我想到了使用 gulp 作为任务运行器，我需要输出类似sample-comp.js

从'@angular/core'导入{组件}；

@Component({
  selector: 'sample-comp',
  template: `<h1>test</h1>`,
  style: `h1{font-size: 15px;}`
})
export class AppComponent {
  title = 'app works!';
}

请提出使用任何插件的任何方法来实现此目的

【问题讨论】：

标签： angular webpack gulp bundling-and-minification

【解决方案1】：

声明一个NgModule，将您的组件添加到exports 数组中，然后将您的模块导入到您的其他模块中。

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  exports: [ AppComponent ]
  providers: []
})
export class MyModule { }

import { NgModule } from '@angular/core';

@NgModule({
  imports : [ MyModule ]
  providers: []
})
export class MyOtherModule { }

您可以在MyOtherModule 中的任何位置使用您的AppComponent。

【讨论】：

感谢您抽出时间来回答。但是有了这个我无法实现我想要的。
好的，抱歉，我误解了您的需求

【解决方案2】：

在网上搜索了几下后，我发现有 gulp 插件，我们可以通过它轻松实现这个gulp-angular4-embedfromurl 请通读文档发现有用

【讨论】：