Is there a specific method for conducting a production build using AngularCLI rc.1?

Just recently upgraded to angular-cli version 1.0.0-rc1 by following the guidelines provided on the wiki.

The application functions properly when I execute ng serve.

Similarly, the app works as expected when I run ng build.

However, encountering an issue when running

ng build --target=production --environment=prod
, resulting in the following error message:

Error message displayed post ng build --target=production --environment=prod
Hash: 1e69750dbc9679bddab0
Time: 69052ms

... (error details omitted for brevity)

ERROR in main.8839163bd6c77300ac2a.bundle.js from UglifyJs
Unexpected token: name (FooterComponent) [main.8839163bd6c77300ac2a.bundle.js:7,6]

Any suggestions on how to successfully compile the app for production?

Update 1: Providing an excerpt from one of the problematic files. Notably, ColumnTypes.TEXT is a publicly accessible value. Since these are merely decorators with no external dependencies, they work flawlessly for non-production builds.

import {autoserialize} from "cerialize";
import {ManyToOne, PrimaryGeneratedColumn, Column, JoinColumn, OneToOne, OneToMany, Table, ColumnTypes, CreateDateColumn} from "./export.dtos";

@Table()
export class DTOModifier {

  @PrimaryGeneratedColumn()
  @autoserialize id: number;

  @Column(ColumnTypes.TEXT, {nullable: true})
  @autoserialize label: string;
}

Also note:

static TEXT: ColumnType;

Answer №1

When performing a production build using angular-cli version beta.27 or above, you are essentially utilizing ahead-of-time compilation.

Ahead-of-Time compilation requires that the component members accessed from your templates are declared as public. If you have a component with a private class member named text, it will cause issues.

This is because ngc (the Angular compiler) transforms your template into a regular TypeScript class, and when compiling it, the temporary class generated does not have access to private component members.

Edit:

I cannot guarantee that this is the exact problem you are facing, but it's a common issue I encountered when creating production builds. Your errors may be similar due to this potential 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

Error: Unexpected character 'o' encountered in AngularJS syntax

Whenever I try to call this controller, it gives me an error. hiren.controller('hirenz' , function($scope , $http , $location , $routeParams){ $http.post((rootURL + "music") , {'alpha' : $routeParams.alpha , 'name' : $rou ...

Utilizing Angular and Ionic to load all content through XHR requests

We are currently facing a performance issue with our Angular + Ionic app that is being run through Cordova. Upon investigating in Chrome Dev Tools Network tab, we have identified two main issues: There is duplicate loading of CSS We are seeing XHR reques ...

Issue with deleting document in AngularJS and Mongoose not functioning properly

This may not be a flawless solution, but I have a ProductModel in which certain products contain a path to an image stored locally, image01Path. When I need to delete a product, my approach is to first remove the image from local storage and then proceed w ...

Safari Version 8.0.2 experiencing issues with fixed positioning

I am currently working on an angular application and I find myself inside a Twitter Bootstrap modal. My goal is to relocate a button that is located within the body of the modal to the footer of the modal using fixed positioning. This particular button tr ...

The issue of resolving custom paths imports in Typescript has been a persistent challenge for developers

Currently, I am developing a project in PHP and utilizing Typescript. I aim to follow a monorepo pattern similar to what NX offers. However, I am facing challenges when attempting to compile typescript for each of my apps. Here is the current structure of ...

Unable to deploy Angular2 application using Cli

i clicked on this link; https://github.com/angular/angular-cli/wiki npm version is 5.0.1 node version is 6.11.0 i executed the following command: npm install -g @angular/cli here's what I tried to fix it: npm uninstall -g @angular/cli npm cach ...

Angular.js reports that the custom HTTP response header is missing

Despite Chrome showing the correct POST response headers, my custom HTTP header X-Auth-Token is returning null in the callback function for the POST request. Angular.js seems to only be returning Cache-Control and Content-Type, with everything else showing ...

Hide the MaterialTopTabNavigator from view

Is there a way to hide the react native MaterialTopTabNavigator on the screen while still maintaining the swiping functionality between screens? I want the user to be able to swipe between screens but not see the tab navigator itself. const Tab = creat ...

"Exploring the world of Typescript with the Drawflow library

Currently, I am integrating the fantastic Drawflow library created by @Jerosoler (available at: https://github.com/jerosoler/Drawflow) into my PrimeNg project. User @BobBDE has provided typescript definitions for this library here: https://www.npmjs.com/p ...

Retrieve the parameter value from a directive within a controller

Looking to implement a directive and utilize the argument in your controller? <body ng-app="tstApp"> <navigationbar tst="hello"> </navigationbar> </body> To achieve this, you will need to create a directive along with its ...

Encountering difficulties in creating a new package for angular

I am having trouble generating a new package for Angular. Here are the software version details: npm -v v6.1.0 node -v v8.11.3 ng -v v6.0.8 When attempting to create the project with ng new project_name, I encounter the following error: https:// ...

Parent observable method encountering an error while grouping multiple HTTP calls in Angular

I am facing an issue with managing multiple http calls and handling errors that may occur during their execution. I want to be able to identify which calls have failed so that I can retry them using a different method. However, without visibility at the co ...

AngularJS Login Popup with SpringSecurity

I have successfully integrated spring security with my AngularJS webpage utilizing Rest API. However, I am facing an issue where every time I attempt to log in using the rest api from my customized login page, it prompts me for the login credentials in a p ...

Rejuvenating a template generated on the server in AngularJS

I have a specific partial which is a report - simply a static list of names and dates designed for viewing and printing purposes. For efficiency reasons, the report is rendered server-side, so when a report request is made, my API responds with HTML rathe ...

Guide on extracting unique key values from an array by utilizing a different key

I have an array containing the names of products along with their storage capacities. let products = [{name: "samsung A", storage: "128GB"}, {name: "samsung B", storage: "128GB"}, {name: "samsung C", storag ...

Having trouble with installing npm package from gitlab registry

I recently uploaded my npm package to the GitLab package registry. While the upload seemed successful, I am facing an issue trying to install the package in another project. When I run npm install, I encounter the following error: PS E:\faq\medu ...

JSX is restricted in files using the '.tsx' extension according to eslint rules (react/jsx-filename-extension)

When working in a .tsx file, why does eslint flag the following issue: The use of JSX is not permitted in files with the extension '.tsx' (eslint react/jsx-filename-extension) What steps can I take to adjust the eslint configuration and addres ...

Utilizing shared state in React components through props

Currently, I am utilizing a shared global state in the following manner: interface DashboardProps extends React.Props<Dashboard> { globalState? : GlobalState } export class Dashboard extends React.Component<DashboardProps, any>{ } Withi ...

Ways to enforce a specific type based on the provided parameter

Scenario Background: // Code snippet to do validation - not the main focus. type Validate<N, S> = [S] extends [N] ? N : never; // Note that by uncommenting below line, a circular constraint will be introduced when used in validateName(). // type Val ...

Does the TS keyof typeof <Object> rule prohibit the assignment of object.keys(<Object>)?

I'm having trouble understanding the issue with this code snippet. Here is the piece of code in question: export type SportsTypes = keyof typeof SportsIcons export const sports: SportsTypes[] = Object.keys(SportsIcons); The problem arises when I at ...