Classes from TypeScript NPM Package are all bundled in the build result

See also questions close to this topic

• Divide form into different pages/views in angular

  I need to develop a SPA with angular 6 for insurance company. We have a form which has 9 questions. Customer wants one question should be displayed on the screen at a time and on clicking the button "Save & Continue", next question should be appear on the screen.

  For this scenario, can I create a parent component which holds 9 child components where each child component holds one question and only component would be visible and remaining 8 would be hidden always?

  Is that the right approach(hide/show components) to follow?
• Sharing pure utility functions in angular app and ngrx reducers

  I find that I often have simple, pure utility functions that I would like to use in multiple places in my angular app. In terms of angular best practices, these types of collections of functions should be in perhaps a shared service like UtilitiesService. This works great for most of angular, but when I want to use some of those functions in a reducer, I essentially have to rewrite it in a non-service type module and import it rather than injecting it.

  Am I overthinking this and should just put all of my pure utility functions into a plain non-injectable module, then use it in both reducers and throughout my components and services? Or is there another good way I'm not thinking of?
• Angular getting Cannot find module '@angular-devkit/core'

  When I do ng serve in my newly created angular project I get this:

  module.js:538
      throw err;
      ^
  
  Error: Cannot find module '@angular-devkit/core'
  

  Why is this happening?
• Vue Cli 3 Typescript. Cannot import css/sass to the <script> block

  I built new vue app with typescript using Vue Cli 3.

  When I try to import css or sass to my typescript file:

  import * as sassStyles from '@/assets/sass/my.module.scss';

  I got followning error:

  Cannot find module

  I found this article How to use CSS Modules with TypeScript and webpack but I have no idea how to integrate it with Vue Cli 3 who is abstracting away webpack config.

  Any idea what to put in vue.config.js to able to import css and sass files directly to block?

  I need to use typings-for-css-modules-loader instead of css-loader.
• Does tsc-watch consume TSC_NONPOLLING_WATCHER?

  I am working on microservice integration project. I run 8 typescript services at the same time using tsc-watch --preserveWatchOutput --onSuccess 'node build/index.js'.

  The processes consume 70% of my CPU, even when I make no source code at all. I figured there is some polling for changes going on and googled that setting environment variable TSC_NONPOLLING_WATCHER to "1" will stop the polling.

  This is the source of the hint: https://medium.com/@julioromano/writing-typescript-on-a-laptop-this-might-improve-your-battery-life-f503dd16f019

  It does however seem to have no effect at all. Also, the author mentions "tsc -w" and not tsc-watch. I do not quite understand what the difference is between tsc -w and tsc-watch.

  I would be thankful for any help.
• Update existing array by a new one and keep the array references

  I have an array of objects that i got from the database.

  I want to get that information again from the database and update the existing array with the new one that came from the database by keeping the existing references.

  i'm looking for something like that:

  Pseudocode:

  var myExistingArray - [{x:1,x:2,x:3}];
  
  
  refreshData(myExistingArray, dataFromServer);
  
  function refreshData(myExistingArray, dataFromServer) {
  
   updateArrayRegardingMatchedElements(myExistingArray);
   removeNotExistData(myExistingArray);
   addNewElements(myExistingArray);
  
  }
  

  I'm using lodash lib so if there is a solution based on that it will be great

  its not the same question of "*ngFor - How to refresh data without rebuild the DOM." Here i am asking how to keep the reference and in the other question i am asking how to work with angular ngfor.
• ERROR in The loader /src/app/app.component.scss didn't return a string

  

  I got this issue after config sass-loader to my webpack and I did search some solution for it but look like not work. Can anyone help me. Thank you!

  Here is my webpack.config.js file. I configured myself from scratch.

  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CopyWebpackPlugin = require('copy-webpack-plugin');
  const ScriptExtPlugin = require('script-ext-html-webpack-plugin');
  const { AngularCompilerPlugin } = require('@ngtools/webpack');
  
  
  module.exports = function () {
    return {
      entry: './src/main.ts',
      output: {
        path: __dirname + '/dist',
        filename: 'app.js'
      },
      resolve: {
        extensions: ['.ts', '.js']
      },
      performance: {
        maxEntrypointSize: 512000,
        maxAssetSize: 512000
      },
      module: {
        rules: [
          { test: /\.ts$/, loaders: ['@ngtools/webpack'] },
          { test: /\.css$/, loader: 'raw-loader' },
          { test: /\.html$/, loader: 'raw-loader' },
          {
            test: /\.scss$/,
            exclude: /node_modules/,
            use: [{
              loader: "css-loader", options: {
                sourceMap: true
              }
            }, {
              loader: "sass-loader", options: {
                sourceMap: true
              }
            }]
          },
          // Ignore warnings about System.import in Angular
          { test: /[\/\\]@angular[\/\\].+\.js$/, parser: { system: true } },
        ]
      },
      plugins: [
        new CopyWebpackPlugin([
          { from: 'src/assets', to: 'assets' }
        ]),
        new HtmlWebpackPlugin({
          template: __dirname + '/src/index.html',
          output: __dirname + '/dist',
          inject: 'head'
        }),
  
        new ScriptExtPlugin({
          defaultAttribute: 'defer'
        }),
        new AngularCompilerPlugin({
          tsConfigPath: './tsconfig.json',
          entryModule: './src/app/app.module#AppModule',
          sourceMap: true
        })
  
      ]
    };
  }
  

  I think the issue come from the way I configured sass to my project but I didn't know what it is.
• How to render ejs files in Webpack

  As part of a MOOC I created a CRUD application using Node JS, Javascript, Express, MongoDB, and EJS. Now, I want to convert it to a decentralized DAPP using Ethereum Solidity and Truffle Boxes aka boilerplate (at https://truffleframework.com/boxes). I am using Truffle Webpack boilerplate for this conversion inside which I plan to re-use the existing code and connect it with Solidity Code but the only challenge I have is in using my EJS files with webpack. I am unable to identify what changes shall I make in the Webpack config.js so that it renders the EJS files.

  Please help if someone has tried to implement EJS files in Webpack.

  Thanks in advance.