Creating a single file in Angular2 for plunker can be achieved by combining all the necessary

I stumbled upon this plunker while exploring Angular2 as a starting point. However, I noticed that it performs quite sluggishly, mainly because it tries to transpile everything each time it reloads:

var angularVersion = '2.0.0-rc.4';

System.config({
  baseUrl: '/',
  paths: {
    'npmcdn:*': 'https://npmcdn.com/*'
  }
});

System.config({
  transpiler: 'typescript', 
  typescriptOptions: { emitDecoratorMetadata: true },

  meta: {
    '*': {
      deps: [ 'zone.js', 'reflect-metadata' ]
    }
  }
});

System.config({
  packageConfigPaths: [
    "npmcdn:@*/*/package.json"
  ],

  map: {
    '@angular/core': 'npmcdn:@angular/core@'+angularVersion,
    '@angular/compiler': 'npmcdn:@angular/compiler@'+angularVersion,
    '@angular/common': 'npmcdn:@angular/common@'+angularVersion,
    '@angular/platform-browser': 'npmcdn:@angular/platform-browser@'+angularVersion,
    '@angular/platform-browser-dynamic': 'npmcdn:@angular/platform-browser-dynamic@'+angularVersion,
    'rxjs': 'npmcdn:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b292331281b6e756b756b76393e2f3a756d">aemail</a>',
    'zone.js': 'npmcdn:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdb7a2a3a8e3a7be8dfde3fbe3fcff">aemail</a>',
    'reflect-metadata': 'npmcdn:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a687f7c767f796e37777f6e7b7e7e5b446b615f6b7c7d751b667b657b6b785f7d737a717c737b767b785f3cff">aemail</a>',
    "crypto": "@empty"
  },

  packages: {
    'app': {
      defaultExtension: 'ts',
      main: './index.ts'
    }
  }
});

I have been contemplating the idea of creating a precompiled single file bundle containing all the Angular2 vendor dependencies to enhance performance, transpiling only your application code while excluding the libraries. Is there an existing solution for this?

Please advise!

typescriptangularplunker

Answer №1

The Angular2 quickstart utilizes an aggregated UMD module. To see it in action, check out the live demo. The SystemJS configuration has been modified to load the UMD module instead of individual files. Below is the crucial snippet from the file.

ngPackageNames.forEach(function(pkgName) {

    // Bundled (~40 requests):
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };

    // Individual files (~300 requests):
    //packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

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

Encountering difficulty importing TypeScript files dynamically within a Deno executable

When attempting to import a file from aws in an exe using its public link based on user input, I am facing difficulties For example, I generated my exe with the command below deno compile --allow-all main.ts Users execute this exe using commands like ./e ...

javascripttypescriptimportdeno

Unveiling the types of an object's keys in Typescript

I am currently utilizing an object to store a variety of potential colors, as seen below. const cardColors = { primaryGradientColor: "", secondaryGradientColor: "", titleTextColor: "", borderColor: "&quo ...

typescriptreact-typescript

Discover a more efficient method for expanding multiple interfaces

Hey there, I'm having some trouble with TypeScript and generics. Is there a better way to structure the following code for optimal cleanliness and efficiency? export interface Fruit { colour: string; age: number; edible: boolean; } export inte ...

typescripttypesinterface

Integrate the use of `Refresh Token` into an `Angular` application

In my current project, I am tackling the integration of Spring Security with OAuth2 and JWT: The author suggests that I can access resources using a token in the following manner: To access a resource, use the following command (assuming you have config ...

angularspring-bootoauth-2.0spring-security-oauth2angular-oauth2-oidc

Exploring the attributes of a record through a combination of string template types

I'm utilizing a string template type to denote ids with a significant prefix, such as dta-t-${string} where dta-t- encodes certain details about the entity. I have various record types that are indexed by unions of string templates: type ActivityTempl ...

typescript

Visual Studio Code continues to compile code automatically without requiring me to save any changes

Question: VSC triggers compilation even without any file changes in Angular(6) project ng serve It's frustrating when Visual Studio Code starts compiling repeatedly, even when no changes have been made. How can I prevent this from happening? I&apos ...

angulartypescriptcompilation

Using Angular 7 to set the value of an object returned by an observable to a variable

I encountered an issue while trying to assign the return value from a service to a component. ngOnInit() { this.getInspectionData(); } getInspectionData() { this.auctionService.getInspectionResult(`df570718-018a-47d8-97a2-f943a9786536`) ...

angulartypescriptfrontendangular-httpclient

Assign a predetermined value to a dropdown list within a FormGroup

I have received 2 sets of data from my API: { "content": [{ "id": 1, "roleName": "admin", }, { "id": 2, "roleName": "user", }, { "id": 3, "roleName": "other", } ], "last": true, "totalEleme ...

javascriptangularjstypescript

Having trouble getting combineLatest to properly normalize data in Angular using RxJS

Difficulty arose when attempting to normalize data prior to merging it into a new stream, resulting in no changes. I need to verify whether the user has liked the post using a Promise function before including it in the Posts Observable. this.data$ = comb ...

angularasynchronousrxjs

Both undefined and null are sometimes allowed as values in conditional types, even when they should not be

Do you think this code should trigger a compiler error? type Test<T extends number | string> = { v: T extends number ? true : false } const test: Test<1> = { v: undefined } Is there something I am overlooking? Appreciate your help! ...

typescripttypescript-typingstypescript-generics

Tips for creating a universal function for two interlinked types

My goal is to establish an abstract relationship between different sub-types of Message and Response, allowing for a generic function that takes a Message as input and returns a corresponding Response. Specifically, when the function is called with type Me ...

typescriptgenerics

How can we pass the onClick prop from a child component to a parent component in React with Typescript?

Currently, I am utilizing React along with TypeScript. I am curious about the process of passing an event from the parent component to a child component using props. Here is an example for better understanding: parent.tsx const ParentComponent: React.F ...

javascriptreactjstypescript

Is there a way to invoke a client-side function from the server?

Is there a way to display an alert at the top of the browser if the SQL query returns empty results? I tried using the "alert" function, but I'm struggling with customizing its appearance. I have a function in my HTML code that triggers an alert, but ...

htmltypescriptexpress

The logout feature experiences a malfunction when invoked from the app.component.ts file

I have an authentication Service with a Logout() function implemented as shown below: export class AuthService { isAuthenticated = new BehaviorSubject(false); constructor(private router: Router) { } Logout() { console.log('Logout'); ...

angularionic-framework

Guide to making a Typescript interface by combining elements from two separate interfaces without utilizing inheritance

Programming Language: Typescript I am looking to combine the properties of two interfaces as the value of an indexable-type within a third interface. Interface 1: export interface Employee { id: string name: string } Interface 2: export interfa ...

javascripttypescriptinheritanceinterface

What is the best tool for setting up an ftp connection to a z/OS mainframe and downloading files to the local machine within an angular web application?

My goal is to allow the user of the webapp to enter a specific file located on the server via a text field, and then have that file downloaded to their local machine. There's also an optional feature where the user can input the login credentials for ...

angularftpmainframezosmvs

Obtaining network information in Angular

Greetings! I am currently working on my angular application and I need to obtain information about the network. Specifically, I want to know if there is a network connection available and which WiFi network it is connected to. Although I can monitor the ...

angularwifi

Which is better for storing a collection of Components in a Service: Array or QueryList?

I have developed a PopupService with the following structure: export class PopupService { popups: PopupComponent[] = []; open(popup: PopupComponent) { this.popups.forEach(popup => popup.active = false); popup.active = true; } close(p ...

angularangular-services

Encountering a Problem with TypeScript Decorators

I've been diving into TypeScript by working on TS-based Lit Elements and refactoring a small project of mine. However, I'm starting to feel frustrated because I can't seem to figure out what's wrong with this code. Even though it' ...

typescriptdecoratorlit

Streamlining all icons to a single downward rotation

I am currently managing a large table of "auditpoints", some of which are designated as "automated". When an auditpoint is automated, it is marked with a gear icon in the row. However, each row also receives two other icons: a pencil and a toggle button. W ...

javascriptjquerycsstypescript