Angular 2 module transpilation services

In my angular 2 application, there is a module called common. Here is how the project structure looks like:

main
--app
   /common
   --config
    //.ts configs for modules
   --services
    //angular services
   --models
   --store
    //ngrx store
   /component1
   /component2
   app.module.ts
   main.ts
--js
  //systemjs dependencies
  Gruntfile.js
  package.json
  tsconfig.json

The project currently transpiles to bundle.js and functions as expected. However, I now want to extract the contents of the common folder and bundle it separately. This way, I can load its dependency using system js and include it in app.module.ts to use in components.

I need guidance on how to get started. Do I need to modify the Gruntfile/tsconfig? Or should I create a separate package.json/index.ts to transpile the .ts dependencies?

Answer №1

If you are searching for a solution, the Bundle Arithmetic feature of SystemJS Builder might be what you need. Integrated into SystemJS, this feature performs efficiently and effectively.

However, using SystemJS to bundle your application instead of Grunt is necessary to utilize this feature.

The benefits of this approach simplify various scenarios, including your specific requirements, but may require some time for setup.

At present, TypeScript does not offer support for splitting bundles.

While dividing your app into multiple npm packages is an option, it could lead to complexity in development if your project is relatively small.

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

Unlocking the Potential of Checkbox Values in AngularJS

I am attempting to extract data from a $rootScope object that has been linked to the checkboxes. HTML: <tr ng-repeat="system_history in SystemHistoryResponse.system_history"> <td><input type="checkbox" ng-model="versionValues[system_histor ...

Utilize dojo to manually trigger a window resize event

Is there a way to manually trigger the window resize event (the one that occurs when you resize your browser window) using Dojo? I need this functionality to dynamically resize my C3 Charts. I came across the on module in Dojo, which allows for listening ...

The transformation of a Raphael element does not occur as expected when it is passed to a function within a loop

My attempt to rotate an object by a variable number of degrees in order to mimic a dial was unsuccessful. Initially, I tried the following steps: window.onload = function() { var paper = new Raphael(document.getElementById('canvas_container ...

Display webpage content in an Iframe using Javascript after PHP code has been executed

Despite researching keywords like PHP // Javascript // Load // URL online, I'm still struggling to fully grasp the concepts. Real-life case studies have been helpful, but I must admit that I'm feeling a bit overwhelmed at the moment. I created a ...

Next.js fails to properly render external links when utilizing the Link component

It was quite surprising to discover that a basic Link component doesn't function as expected in Next.js when attempting to use it with an external URL and HTML Button tag within. Here is my attempt at solving this issue: Attempt 1: <Link href="h ...

Is Nuxt's FingerprintJS Module the Ultimate Server and Client Solution?

I am currently using fingerprintJS in my NuxtJS+Firebase project VuexStore. When I call the function on the client side, I can retrieve the Visitor ID. However, I am encountering issues when trying to use it on the server side, such as in nuxtServerInit. ...

Revamping the settings page by featuring a single "save changes" button

Is it possible to create a settings.php page where users can update their personal information, such as username, password, and email, all within the same page? I know how to perform these tasks individually, but I'm unsure about integrating different ...

Adding dynamically generated HTML elements and binding them to an AngularJS controller is a powerful capability that

As I dive into learning angularJS, I am facing a challenge in determining the best architecture for my project. My single page app is designed in such a way that the URL must always remain unchanged; I do not want users to navigate beyond the root route. T ...

Why does the entire page in Next.JS get updated whenever I switch pages?

Currently, I am utilizing Next.JS to create a single-page application website in React. I have successfully set up routing (https://nextjs.org/docs/routing/dynamic-routes) In addition, I have also configured Layouts (https://nextjs.org/docs/basic-features ...

if statement for a method within the ng-click directive

Whenever I click the button, I want to either execute createRole() if RoleName is not set or EditRole() method if RoleName is set. However, for some reason, EditRole() is being executed for both cases. <button type="submit" ng-click="selectedItem.Rol ...

Increasing the date field value in Mongoose, ExpressJS, and AngularJS with additional days

I encountered an issue while attempting to extend the number of days for an existing Date field in mongoose. Despite no errors being displayed in the browser or console, something seems to be amiss. Can anyone identify the problem in this code snippet? ...

Calculating the combined cost of items in the shopping cart

I encountered a small problem while working on my project. I'm trying to calculate the total price of all items in the cart by summing them up, but my mind is drawing a blank at the moment. Below is the code snippet I am currently using: const { ca ...

Exploring the Potential of Jest in Combination with Angular 13 and Clarity Framework

I am in the process of upgrading an existing Angular application that utilizes VMware Clarity. After successfully updating from version 8.x to 10.x by following the Angular update guidelines, I encountered an issue with the jest configuration when attempti ...

Do you mean using a JSON object as a value?

When creating a JSON object where the value itself is an object, what is the correct way to write it? var data ='{"phone":{"gtd": "080"}}'; OR var data ='{"phone":"{gtd: 080}"}'; This question may seem straightforward. I am curious ...

An unhandled promise rejection occurred because no routes could be found to match. URL Segment:

I'm facing an issue with my application where it doesn't recognize the route even though I have defined and imported it in app.module. Whenever I try to redirect to a specific route upon data retrieval, I encounter this exception: onSubmit(){ ...

using VueJS, learn how to dynamically apply text to a data variable based on certain props

I'm facing an issue with conditional value assignment to the data variable based on props. The ternary operator is causing errors in my code. Here's a snippet for reference: <template> <div class="absolute left-3 top-1/2"> ...

Encountering an issue with the autocomplete feature in the jQuery library where it is stating "this.source is not a function."

Here's the code snippet I'm working with: $.ajax({ type: "GET", url: "https://url.com", dataType: "json", success: function (data) { $("#search").autocomplete({ source: data, select: function (even ...

determining the overall page displacement

I'm working with this code and I need help using the IF condition to check if the total page offset is greater-than 75%. How can I implement that here? function getLocalCoords(elem, ev) { var ox = 0, oy = 0; var first; var pageX, pageY; ...

Is incorporating re-routing into an action a beneficial approach?

My main concern involves action design strategies: determining the best timing and method for invoking actions. In my project using Mantra (utilizing React for the front-end and Meteor's FlowRouter for routing), there is a UI component that includes ...

Expanding the functionality of express.Router

Can someone help me with how to extend the functionality of express.Router? I attempted the following: class Test extends express.Router() { }; However, I encountered an error when trying this in Express. Does anyone have a solution for this issue? ...