Angular 2 Ahead-of-Time compiler: all clear on the error front, yet a nagging feeling of

I've spent the last 72 hours trying to figure out how to make Ahead-of-Time compilation work for my Angular 2 rc.6 application.

Currently, my application runs smoothly using Just-in-Time compilation.

I've made sure to install all necessary dependencies, run the ngc compiler, updated my main.ts to utilize platformBrowser(), and ran ngc again.

No errors are showing up in the console. The .ngfactory.ts files have been generated successfully, as well as the .js files. Everything seems fine for now. Here is how my structure looks like (it's messy, but I'll tidy it up once I get this working)

https://i.sstatic.net/KqPGV.png

The application is being executed from the dist/ directory. However, the issue arises when I modify map['app'] in systemjs.config.js from dist to dist/dev and then launch the application.

The major red flag appears when I notice that instead of decreasing, the number of HTTP requests and data size has actually increased significantly with AoT compilation. I am now facing 200 additional requests during bootstrap!

Moreover, despite the compilation process showing no errors, the app refuses to start. An unexpected 404 not found error occurs at the URL: http://localhost/traceur. What is going on? Why is "traceur" being mentioned? Isn't that related to in-browser transpilation? Where should I begin troubleshooting this issue?

angulartypescriptdeploymentcompilation

Answer №1

After closely following the official guides and setting up systemjs as my loader while using UMD bundles, I encountered an issue with incorrect mapping. I had to reconfigure my systemjs settings to ensure all packages were being loaded properly. However, I am now facing an issue with traceur.js being the only missing package. What could be causing this complication?

Update: I have attempted to map traceur in systemjs using the following configuration:

'traceur': 'node_modules/traceur/src/traceur'

However, this has resulted in nothing displaying on my page. It seems like my configuration with the packages may be incorrect from the start, as my application was requesting packages that were not mapping correctly with the UMD bundles. This misalignment could be causing the current issue.

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

Limit the selection of 'pickable' attributes following selections in the picking function (TypeScript)

In the codebase I'm working on, I recently added a useful util function: const pick = <T extends object, P extends keyof T, R = Pick<T,P>>( obj: T, keys: P[] ): R => { if (!obj) return {} as R return keys.reduce((acc, key) => { re ...

javascripttypescriptfunction

Is it possible for a Node.js/Express server to securely handle all UTF-8 characters?

At the moment, my setup involves a node server running Express that is connected to a PostgreSQL database with UTF-8 encoding support. In terms of frontend, I'm using Angular which has built-in measures for preventing unsafe injection. I am curious i ...

node.jsangularsecurityexpressutf-8

Encountering errors while running Angular 8's ng build prod command

After successfully migrating my project from Angular 7 to Angular 8, I encountered an issue when attempting to run 'ng build prod' which resulted in the following error: ERROR in Error during template compile of 'Ng2CompleterModule' Cou ...

javascriptangularmigration

Encountering issues with installing angular/cli due to errors popping up

When attempting to install Angular in my terminal after completing the setup, I encountered the following error message: I have already installed: Node v6.10.3 npm ERR! Darwin 17.7.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g ...

angularangular-cli

Why does FormGroup.Get() return null when there is a period in the name of the FormControl?

Issue: I am facing an issue with the formGroup I created using formbuilder. The problem arises when a control within the FormGroup contains a . in its name. When attempting to retrieve the formControl using the formGroup.get method, it returns null. Sampl ...

angularangular-reactive-formsformgroups

Exploring the Magic of Angular 5 Reactive Forms: Step-by-Step Guide to Dynamically Implement Validators and Displaying Errors upon Form Submission

My goal is to dynamically manage the required validator for form fields. It seems to be working fine when the user interacts with the field before submitting the form, as it validates onBlur and onSubmit. However, if a user submits the form without interac ...

angularangular5

What is the reason behind gcc not verifying the implicit declaration of a function when redefining malloc() in the command line using the -D flag?

Below is the original function from my file test.c: #include <stdlib.h> int main() { void *p = malloc(1); free(p); return 0; } When I redefine malloc in gcc using the -D flag, gcc compiles it without any complain ...

cgcccompilationcompiler-errorsc-preprocessor

Encountered an issue in GoJS with Angular 4: ERROR TypeError: Unable to access property 'class' of null at Function.F.fromJson.F.fromJSON

I have just started exploring GoJS and decided to create a sample project by utilizing the Kanban sample available on the GoJs website. I attempted to use Angular and Typescript for this, but encountered an error. AppComponent.html:1 ERROR TypeError: Cann ...

angularhtmltypescripttypescript2.0gojs

What is the best way to navigate to another Angular page when the window width is less than 800 pixels?

I have developed an Angular 8 application that showcases a table with numerous columns. When the window size is reduced, I want to switch to a layout displaying fewer columns that can be expanded vertically to show additional information. I have already ...

angularroutesresponsive

Ensuring a component is included in a module or nesting a component within a template

Struggling with Angular (not AngularJS) and facing an issue where my template is not referencing components correctly. It seems like the component is not being recognized, either due to incorrect declaration or importing in the right place. I need guidanc ...

angularcomponentsparent-childoutlet

How can you display or list the props of a React component alongside its documentation on the same page using TypeDoc?

/** * Definition of properties for the Component */ export interface ComponentProps { /** * Name of something */ name: string, /** * Action that occurs when component is clicked */ onClick: () => void } /** * @category Componen ...

reactjstypescripttypedoc

Encountered difficulty locating the module path 'stream/promises'

When importing the following in a typescript nodejs app import { pipeline } from "stream/promises"; Visual Studio Code (vscode) / eslint is showing an error message Unable to resolve path to module 'stream/promises' https://i.sstatic. ...

javascripttypescriptvisual-studio-codeimporteslint

Using the useRef hook in a TypeScript project to retrieve a boolean value

As I work on developing an application using Nextjs, I have encountered an issue while using react useRef with typescript. The problem arises when I use useRef without typescript, everything works smoothly. However, the moment I include HTMLDivEleement as ...

reactjstypescriptnext.js

Why is Mongoose returning null when using findOne?

Here is a sample request: interface IGetFullnameRequest extends IAuthenticatedRequest { readonly body: Readonly<{ fullname: string; }>; } This is the controller function to get the fullname: const getFullname = async (req: IGetFullna ...

node.jstypescriptmongoose

Distinguish among various mat accordion types

I created a custom wrapper for the mat accordion component in Angular Material to handle multiple accordions with different behaviors based on user interaction. Here is my implementation: Wrapper Mat Accordion HTML <mat-accordion> <mat-expa ...

angularangular-material

Troubleshooting column alignment with Bootstrap4 and Angular: Resolving issues with text alignment on

Being relatively new to Bootstrap 4, as I have only used version 3.3 on my previous project which did not utilize the flexbox grid system. Now that I am embarking on a new project, I find myself facing a challenge: I am struggling to apply the "text-alig ...

htmlangularflexboxbootstrap-4

Why does the error message "DeprecationWarning: 'originalKeywordKind' deprecated" keep popping up while I'm trying to compile my project?

Upon completing the compilation of my project, I encountered the error message provided below. What does this signify and what steps can I take to resolve it? - info Linting and checking validity of types DeprecationWarning: 'originalKeywordKind' ...

node.jsreactjstypescriptnext.js

Encountering complications in Edge browser due to triggering click on form submit button in Angular 2/4 forms

I have encountered a situation where I must trigger my form submission through code because the submit button is hidden from view. I utilize a method to simulate a button click (as there is a common button for all forms) using the following approach. cons ...

angularmicrosoft-edgeangular-formsangular-schema-form

What could be causing the lack of reflection of Angular changes in the browser post-build process?

I'm having trouble seeing changes reflected in my Angular project after making them. I've tried clearing the cache pages and cookies in Chrome, as well as enabling disable cache in the network tab of developer tools. In addition, I cleared the a ...

node.jsangulargoogle-chrome

There was an issue: Control with the name 'name' could not be located

Whenever I submit the form and try to go back, an error pops up saying "ERROR Error: Cannot find control with the name: 'name'". I'm not sure what I might be missing. Do I need to include additional checks? Below is my HTML file: <div ...

angulartypescript