Do not include external libraries in the TypeScript compilation process

Is it possible to prevent imported libraries from being included in my result bundle? Consider the following code snippet:

import * as angular from 'angular';
const app = angular.module('app',[]);

And let's take a look at the build task below.

function buildTs(compileOptions) {
    browserify(compileOptions)
        .plugin(tsify, tsconfig.compileOptions)
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest(path.dest.js));
}

Upon completion of the build process, Angular library gets included in bundle.js. Is there a way to avoid this?

This is my tsConfig file:

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "noImplicitAny": false,
    "removeComments": true,
    "sourceMap": true,
    "types": [
      "angular",
      "angular-cookies",
      "angular-ui-bootstrap",
      "angular-ui-router",
      "jasmine",
      "angular-mocks"
    ]
  },
  "include": [
    "app"
  ],
  "exclude": [
    "node_modules"
  ]
}

No luck with removing types from tsConfig either :)

Answer №1

To exclude AngularJS from browserify and add it later in index.html, you can use the following code:

var browserify = require("browserify")

browserify()
.ignore('angular')

Is there a way to include multiple files without using .ignore(name) each time? Can I use an array or something similar?

var tsProject = ts.createProject('tsconfig.json');
gulp.task('scripts', function() { 
    var tsResult = gulp.src("lib/**/*.ts") 

    // or 
    tsProject.src() 
      .pipe(tsProject()); 

    return tsResult.js.pipe(gulp.dest('release'));
});

This method offers a cleaner approach to building Typescript files. In the src section, you can specify your own list of regular expression source files.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The argument labeled as 'shop' does not fit the criteria for the parameter 'items' or 'cart'

I've been doing some research but haven't had any luck finding a solution. I'm fairly new to Angular and currently working on a webstore project. I followed a tutorial, but encountered an error along the way. import { select, Store } from & ...

Change the name of the interface from the imported type

When working with Google Apps Script, I have implemented the Advanced Calendar Service, originally labeled as "Calendar". However, I have renamed it to "CalendarService". How can I incorporate this name change when utilizing the type definitions for Apps S ...

Role-based dynamic layout

I am currently working on a website that requires user login functionality. To achieve this, I am utilizing materialise-css and Angularjs for the front-end development, while the back-end is powered by Java-Hibernate (as Spring is not an option in my case) ...

Creating nested routes with parameters in NestJS is a powerful feature that allows for dynamic routing

I have a requirement to create an API with routes that share a common URL part along with a parameter. For my particular case, the routes should follow this structure: /accounts/:account/resource1/:someParam /accounts/:account/resource2/:someParam/whate ...

Heroku causing issues with the functionality of my Rails and Angular.js application through the minification of JS files

I'm currently working on a new Rails 4.2.0 app with Angular.js deployed on Heroku. Here's the angular.js controller I've implemented: angular.module("CarDealer.controllers",[]).controller('carsController', function ($scope, carDea ...

Storing Images in MongoDB Using the MEAN Stack

Currently, I am in the process of developing an angular application that utilizes a MongoDB based Database. One of the features I am working on involves allowing users to upload files and store them in the DB. The drag and drop UI has been implemented succ ...

What benefits could you derive from utilizing an interface to generate a fresh Array? (Pulumi)

Just delving into the world of TypeScript and Pulumi/IaC. I'm trying to wrap my head around a code snippet where an array of key values is being created using an interface: import * as cPulumi from "@company/pulumi"; interface TestInterface ...

The assignment of type 'null' to type 'number' is not valid

In my user.model.ts file, I have a UserID with the type 'number'. In my user.component.ts file, I have a function that resets my form. resetForm(form?: NgForm) { if(form!=null) form.resetForm(); this.service.formData = { UserID ...

What is the best way to access an AngularJs directive's controller function from a specific attribute within the directive element?

Trying to execute a function in a controller which is part of a custom angular directive. Here is the code snippet: Solution 1: (Not working: Controller's function does not write to the console) HTML: <div ng-app="MyApp"> <my-directive ...

Develop a customized configuration module for managing ESLint, Prettier, and resolving import issues efficiently

Currently, I am developing a configuration npm module for my personal project. This repository includes Prettier, ESLint, tsconfig, and other tools that I have set up. You can find my configuration tools repository here: https://github.com/Seyrinian/seyri ...

Explaining the data link between a service and component: understanding Subject and BehaviorSubject

Can someone explain the concepts of Subject and BehaviorSubject in Angular to me? I'm new to Angular and struggling to understand. I've tried searching online, but I still can't grasp how they work. The same goes for Observable and Observer ...

Having trouble capturing events in the AngularJS Controller

Currently, I am in the process of setting up a user authentication system. In my research, I came across the 401 HTTP status code and the HTTP Auth Interceptor Module. After downloading the module using bower and adding it to my app module, I realized tha ...

Meta tags, social sharing buttons, and the AngularJS framework

I am in the process of developing a website that utilizes multiple views. The content within the tag and the meta tags on each page are controlled by a $rootScope variable, resulting in code like this: <html> <head> <title ng-bind="page ...

Using the React Hooks ESLint plugin with TypeScript for improved code quality and performance, avoiding the use of plugins in

Is it accurate to say that the eslint plugin mentioned in this link cannot be used with tslint? I attempted to include it in my tslint.json like this: "plugins": ["react-hooks"], "rules: { "react-hooks/rules-of-hooks": "error", "react-hooks/exhaustiv ...

Comparing the cost of memory and performance between using classes and interfaces

As I delve into writing TypeScript for my Angular project, one burning question arises — should I use an Interface or a Class to create my domain objects? My quest is to uncover solid data regarding the actual implications of opting for the Class route. ...

Dynamically obtaining the content of a tag using jQuery

Although this question may have been asked multiple times before, I am encountering a peculiar issue. Let me explain the scenario: Within this tag, there is a dynamically loaded integer: <i id="my_id">{{integer value}}</i> I am attempting t ...

Your search parameter is not formatted correctly

I am currently working on filtering a collection based on different fields such as name by extracting the values from the URL parameters. For example: http://localhost:3000/patient?filter=name:jack I have implemented a method to retrieve and convert these ...

Strategies for redesigning a platform to optimize for mobile app development

I am currently in the process of enhancing a user-facing portal that was originally built using Python 2.7, Django 1.6, and MySQL. Our goal now is to transition this portal into a mobile app, which poses a challenge due to the tight coupling of templates, ...

The data from Restangular is currently being divided

RestService.one('suppliers', 'me').getList('websites').then( (data) -> $scope.websites = data $scope.websites.patch() ) I'm conducting a quick test with this code snippet. When mak ...

Recording the screen with electron and utilizing the angularJS framework

I've been exploring the implementation of the electron recording method into my electron and angularJS desktop application. Since I am using angularJS to maintain services, controllers, and views, I have a button in one of my views (HTML file) that i ...