Question

我处于需要将我的组件捆绑到一个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>

采样comp.css

   h1{
     font-size: 15px;
    }

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

的输出

从'@ angular / core'导入{Component};

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

请使用任何插件

建议任何方法来实现此目的

Answer 1

在网上搜索几次之后我发现有一个gulp插件我们可以轻松实现这个gulp-angular4-embedfromurl请仔细阅读文档找到有用的

Answer 2

声明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 { }

您可以在AppComponent。

的任何位置使用MyOtherModule

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

2 个答案: