How to create a single bundle with CSS and JS files?

user_5024507 0
Viewed 105

I'm creating web components in Angular by grabbing .js files which include runtime.js, polyfills.js and main.js and concatenating them into single file called list.js by using below code

const fs = require('fs-extra');
const concat = require('concat');

(async function build() {

    const files = [
        './dist/dls-webcomponents/runtime.js',
        './dist/dls-webcomponents/polyfills.js',
        './dist/dls-webcomponents/main.js'             
    ]

    await fs.ensureDir('elements')

    await concat(files, 'elements/list.js')

})()

angular.json

"scripts": {
     ...
    "build:elements": "ng build --prod --output-hashing none && node build-helper.js "
  }

While generating the production build angular is creating above .js files along with styles.css file.

Is there anyway that I can include this styles in above list.js file?

angular-builder web-component angular build
1 Answers

I was able to pack the css into the js by removing the styles in the angular.json file:

  "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.json",
        "inlineStyleLanguage": "scss",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
          "src/styles.scss",
          "node_modules/ol/ol.css"
        ],
        "scripts": []
      },

Simply remove the styles like here:

 "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.json",
        "inlineStyleLanguage": "scss",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "scripts": []
      },
user_87946670
Related