angular/angular-cli

simplejason

@simplejason

Hi, does this PR mean we can not use --deploy-url next angular version(v13) since it is marked as deprecated? angular/angular-cli#21537

Alexander Nestorov

@alexandernst

I'm building (prod build) a mid-size project and the process is taking between 4 and 6gb of RAM and 4 cores at full for about ~15min. There is nothing "weird" going on in the project (hacks, assets being embedded, dirty hacks, etc..), just plain TS. I've searched for possible solutions, but I didn't find anything relevant, except maybe a suggestion to disable de "buildOptimizer" in angular.json. Is there any concrete reason why the build process is using so much resources? Is there any way I can "debug" the process and see what exactly is using these resources?

chenhb-zte

@chenhb-zte

Hi my proxy.config.json can not work well while requesting more data. Chrome perform "request is not finished yet". BUT it is work well while using nginx after building the codes. Who can help me? Thanks

Shivam Verma

@shivam-geek

I want to set up themes in an Angular Project,

so I will have a configuration/module file that will decide which components need to be pick for that theme

Suppose

I have a theme 11 and a theme 12

theme 11 is using menu-v1, cart-v2, checkout-v3
theme 12 is using menu-v2 cart-v3, checkout-v1

so, can I lazy load that theme bundle on the basis of theme ID,

unsama

@unsama

Hello guys, i want to make ecommerce on angular with paypal and firbase integration, does anyone have examples or help me from where i can start

balteo

@balteo

Hello
I have an issue since upgrading to angular 12. The index.html generated by ng build is broken. We have a custom <script> tag in our source index.html:

from src:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Wysiwyg</title>
    <base href="/" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <script>
      function docReady(fn) {
      ...
     }
      </script>
  </head>

  <body class="bootstrap_theme" id="intranet">
  ...
  </body>
</html>

When we serve or build the project, the resulting index.html is broken:

from dist:

...
       <script>
                          }
...

Has someone met this issue? Can someone please help?

Sarfaraz alam

@SarfarazAlam-SQL

Hi, anybody help me
SetInterval is not clear onDestroy

dpachecorod

@dpachecorod

Hi! When building to production with localize flag in true, the bundles are created correct in each locale but the strings are being replaced in client side. Is there any way that the build already has the right translation for each locale? I need this for the SEO.

Wilson

@wilson-young

Hi
i need to run multiple angular cli command for some feature like CRUD
is there posible to save bunch of commands in file and receive parameter like component name
when i need to create i just can run 1 set npm or ng command
and it will automate all the commands.

Sunday Power Inemesit

@power-f-GOD

Hi, guys.

Please, I'm having an issue where setting inlineCritical: false in angular.json doesn't seem to work as inline <style>'s are still being injected by Angular (CLI).

Has anyone faced this situation and have a solution to it?

I'll appreciate if this is answered asap.

Thank you.

Sunday Power Inemesit

@power-f-GOD

😢💔

lopn

@lopn

ng11 build prod so slowly ,how can i optimization it

How to view the compilation time of each step

Where should I optimize my code

my project build prod need 900s ,More and more unacceptable

help

Bharath Muppa 🚀

@myselfbharath_twitter

Cant find a better way to create web workers in angular library and use it other angular app, with webpack5 we don't need worker loader right?

Yagor

@yagoferrer

Hi! is there a way to use ng serve to run a custom script when changes in a specific folder changed?

similar to what nodemon does

Kayn

@duykhang53

Hi, I have a npm package to build then deploy angular project using SSH connection, how do I get it listed under ng deploy examples? The command is ng add ngx-ssh-deploy

Thomas Kaul

@dtslvr

I'm upgrading a decent angular project to Angular 13. When I run ng serve, I get the following error:

 Generating browser application bundles (phase: building).../Users/dev/application/client/app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/MainTemplate.js:215
                                        throw new Error(
                                              ^

Error: MainTemplate.hooks.hotBootstrap has been removed (use your own RuntimeModule instead)
    at Object.tap (/Users/dev/application/client/app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/MainTemplate.js:215:12)
    at WebWorkerMainTemplatePlugin.apply (/Users/dev/application/client/app/node_modules/webpack/lib/webworker/WebWorkerMainTemplatePlugin.js:139:35)
    at /Users/dev/application/client/app/node_modules/webpack/lib/webworker/WebWorkerTemplatePlugin.js:16:39
    at Hook.eval [as call] (eval at create (/Users/dev/application/client/app/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/dev/application/client/app/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/Users/dev/application/client/app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1054:30)
    at /Users/dev/application/client/app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1099:29
    at eval (eval at create (/Users/dev/application/client/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at runNextTicks (node:internal/process/task_queues:65:3)
    at processImmediate (node:internal/timers:437:9)
error Command failed with exit code 1.

My guess is an outdated library. Is there any way to find out which one it is?

Firas Koubàa

@FirassKoubaa

Hi everybody , does anybody know where to find codingame solutions and examples of Angular recruitment tests ?

Redon Januzi

@redonijanuzi_gitlab

Hello guys, has any one found a solution to this error?

Redon Januzi

@redonijanuzi_gitlab

downgrading to windows 10 solved my problems

pikapikaqiu

@uchihayuki:matrix.org

[m]

Hi, is it possible to release an angular library with both typescript source code and source map. I want to debug through vscode chrome remote debugger by setting breakpoints in the consuming app. Thank you.

pikapikaqiu

@uchihayuki:matrix.org

[m]

is it possible to see the default webpack.config.js used by angular 11 in both dev and prod env?

Artur

@6matko

Hi. I am trying to upgrade my Angular from 9 to 13 but I am using SSR and Web-Workers. Everything was fine until import.meta is required for web-worker initialization, e.g.: new Worker(new URL('./my-worker.worker', import.meta.url), { type: 'module' });. Due this I am getting "The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node12', or 'nodenext'." error. Any ideas how can I workaround this issue ?

Sagato

@Sagato

Hi ppl,

Angular Library noApp project. I want global Tailwindcsss´styles and storybook.
angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "button": {
      "projectType": "library",
      "root": "projects/button",
      "sourceRoot": "projects/button/src",
      "prefix": "ui",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "project": "projects/button/ng-package.json",
            "styles": [
              "./styles.css"
            ]
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/button/tsconfig.lib.prod.json",
            },
            "development": {
              "tsConfig": "projects/button/tsconfig.lib.json"
            }
          },
          "defaultConfiguration": "production"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/button/src/test.ts",
            "tsConfig": "projects/button/tsconfig.spec.json",
            "karmaConfig": "projects/button/karma.conf.js"
          }
        }
      }
    }
  },
  "defaultProject": "button"
}

package

{
  "name": "base",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
    "storybook": "npm run docs:json && start-storybook -p 6006",
    "build-storybook": "npm run docs:json && build-storybook"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.3.0",
    "@angular/common": "~13.3.0",
    "@angular/compiler": "~13.3.0",
    "@angular/core": "~13.3.0",
    "@angular/elements": "^13.3.0",
    "@angular/forms": "~13.3.0",
    "@angular/platform-browser": "~13.3.0",
    "@angular/platform-browser-dynamic": "~13.3.0",
    "@angular/router": "~13.3.0",
    "@storybook/angular": "^6.4.19",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.3.0",
    "@angular/cli": "~13.3.0",
    "@angular/compiler-cli": "~13.3.0",
    "@babel/core": "^7.17.8",
    "@compodoc/compodoc": "^1.1.19",
    "@storybook/addon-actions": "^6.4.19",
    "@storybook/addon-essentials": "^6.4.19",
    "@storybook/addon-interactions": "^6.4.19",
    "@storybook/addon-links": "^6.4.19",
    "@storybook/builder-webpack5": "^6.4.19",
    "@storybook/manager-webpack5": "^6.4.19",
    "@storybook/testing-library": "^0.0.9",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "autoprefixer": "^10.4.4",
    "babel-loader": "^8.2.4",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "ng-packagr": "^13.0.0",
    "postcss": "^8.4.12",
    "tailwindcss": "^3.0.23",
    "typescript": "~4.6.2"
  }
}

Sagato

@Sagato

I have styles.css with the necessary tailwind imports in root. When I put the styles attribute under the architect -> build -> options I get an error message when I try to build, but the styles are applied, if I remove the styles property from the build options, I can build but it doesnt apply styles.

Schema validation failed with the following errors:
  Data path "" must NOT have additional properties(styles).

Sagato

@Sagato

anyone an idea?

Saunak Nandi

@SaunakNandi

Hello buddies I am new to angular and I am getting this error
ng serve
An unhandled exception occurred: Invalid or unexpected token
See "C:\Users\User\AppData\Local\Temp\ng-Yw7b98\angular-errors.log" for further details.
Can anyone help me what to do

Amit Beckenstein

@amitbeck

Hey guys, I'm experiencing an issue with modules imported for side effects not being included in the bundle. I read the tree shaking docs, added "sideEffects" to my package.json and even tried adding a rule with sideEffects: true but to no avail. Can anyone help? More details in my SO question (https://stackoverflow.com/questions/72390897/why-are-these-modules-imported-for-side-effects-not-included-in-webpack-bundle). I also commented on a similar issue in GitHub asking a webpack team member for help.

Manas Upadhyay

@manas12:matrix.org

[m]

Hey guys
I have build docker image of Angular Project and deployed to EKS
while hitting the API I am getting an error of getaddrinfo enotfound

Ghost

@ghost~5c545ac6d73408ce4fb69dfe

Hey everyone. I just started experiencing a very weird issue when trying to build my angular app. I get the error "An unhandled exception occurred: The requested module '@angular/compiler' does not provide an export named 'ClassStmt'" when trying to run dev locally or build.

"dependencies": {
"@angular/animations": "~13.2.2",
"@angular/cdk": "^13.0.3",
"@angular/common": "~13.2.2",
"@angular/compiler": "~13.2.2",
"@angular/core": "~13.2.2",
"@angular/elements": "^13.2.2",
"@angular/forms": "^13.2.2",
"@angular/material": "13.0.3",
"@angular/platform-browser": "~13.2.2",
"@angular/platform-browser-dynamic": "~13.2.2",
"@angular/router": "~13.2.2",
"tslib": "^2.3.0",
"zone.js": "~0.11.5"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.0.4",
"@angular-eslint/builder": "^13.0.1",
"@angular-eslint/eslint-plugin": "^13.0.1",
"@angular-eslint/eslint-plugin-template": "^13.0.1",
"@angular-eslint/schematics": "^13.0.1",
"@angular-eslint/template-parser": "^13.0.1",
"@angular/cli": "~13.0.4",
"@angular/compiler-cli": "~13.0.0",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "5.3.0",
"@typescript-eslint/parser": "5.3.0",
"eslint": "^8.3.0",
"eslint-config-prettier": "^8.3.0",
"typescript": "~4.4.3"
}`

I think when I ran npm install, a new patch was applied somewhere or something because it worked fine a few months ago, now on the main branch I get this error. Super weird.

Ghost

@ghost~5c545ac6d73408ce4fb69dfe

I figured out the above error

Edward Prendergast

@EdwardIII

hey! not sure if this is the right chan. i'm on a project where some components live outside the sourceroot, but i'm having a hard time trying to get karma-reporter to show them in the coverage. it just shows polyfill.ts, test.ts, etc at 100%. i've tried lots of tweaks to karma.config.js but nothing seems to change the output. all the tests run, it just meant adding some additional require.context's to test.ts

aymenbraiek

@aymenbraiek

Hello, I'm looking for an example of a popup form to add products.

Nguyễn Tùng Dương

@DuongTungNguyen0899

hello all, i don't why I error

can anyone help me!!!

This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION!

⠋ Generating browser application bundles (phase: setup)...An unhandled exception occurred: Script file node_modules/rellax/rellax.min.js does not exist.
See "C:\Users\DUONGN~1.KIL\AppData\Local\Temp\ng-dmOk6H\angular-errors.log" for further details.
⠹ Generating browser application bundles (phase: setup)...

Matthias Jacobi

@m-jacobi

Currently we are using Angular version 13 for our project and cannot update to version 14 right now. Unfortunately the update of @angular-devkit/build-angular to version 13.3.9 does not fix the Terser security problem. Can anyone say if there will be a new version of @angular-devkit/build-angular

aymenbraiek

@aymenbraiek

Hi, can anyone give me a suggestion about technology I can use to build notifications in my app?

2 replies

Haribalajiravi

@Haribalajiravi

Hello Everyone,
I am using NX,
I need to rename my angular library prefix let's say my library prefix is 'dummy-project' ... Now I want to change it to 'dummy-project-A'. I have used this library component on some of my apps, its hard to do manually.. is there any nx plugin can help on this?

Kfir Ozer

@kfirufk

this is more of an opinion kind of question.. but i feel like i'm missing something! i hear a lot of people are using Angular NX, i tried to read some articles about it, and i'm really confused... what's wrong with angular cli ? am i missing something? nx is a standard framework to build projects for react and next and... well i use angular.. i can easily create modules and whatever i need just with the cli.. i love using ng update for packages, is there some magic features in angular NX that i missed ?

Where communities thrive

People

Repo info

Activity