High cpu usage with ngc in watch mode

[darekf77]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

I am having issue with very high cpu usage in ngc with watch mode... (~140%-190%). I am using @angular/cli in version 1.7.4 but also there is a problem on 1.6.8

tsconfig-aot.dist.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "declaration": true,
    "removeComments": false,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "pretty": true,
    "stripInternal": true,
    "skipLibCheck": true,
    "outDir": "dist",
    "rootDir": "./tmp/src-inlined-dist",
    "lib": [
      "es2016",
      "dom"
    ]
  },
  "files": [
    "./tmp/src-inlined-dist/index.ts"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "src",
    "e2e",
    "bundle"
  ],
  "angularCompilerOptions": {
    "genDir": "dist",
    "debug": false,
    "skipTemplateCodegen": true,
    "skipMetadataEmit": false,
    "strictMetadataEmit": true
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ],
    "paths": {
      "components": [ "bundle" ]
    }
  },
  "exclude": [
    ".ng_build",
    "node_modules",
    "dist"
  ]
}

Project structure
├── .angular-cli.json
├── .editorconfig
├── .gitignore
├── .npmignore
├── .npmrc
├── .vscode
├── components
├── dist
├── e2e
├── gulpfile.js
├── index.d.ts
├── index.js
├── index.js.map
├── karma.conf.js
├── ng-package.json
├── package.json
├── protractor.conf.js
├── README.md
├── src
├── tmp
├── tsconfig-aot.bundle.json
├── tsconfig-aot.dist.json
├── tsconfig.json
└── tslint.json

directory: 12 file: 38 symboliclink: 1

Environment

For Tooling issues:

• Node version: 9.4
• Platform: Mac OSX sierra high

[IgorMinar]

moved to angular/angular-cli#10504

[hansl]

@IgorMinar this looks like a ngc issue (running ngc directly according to the screenshot), not angular CLI. What was the rationale for moving it there? I’ll keep both issue opened for now.

[darekf77]

Ok I found that when I've got linked my external npm project called "tnp" inside node_modules folder there is a problem with high cpu usage in ngc watch mode...

After removing link: node_modules/tnp problem doesn't exist...

My tnp project structure

.DS_Store
.git
.gitignore
.npmignore
.npmrc
.vscode
README.md
bin
dist
index.d.ts
index.js
index.js.map
node_modules
package.json
projects # this folder includes my project
src
tests
tmp
tsconfig.json
webpack.config.js

Folder projects inlcudes my project with ngc watch problem... but it is ignored anyway in tsconfig.json of this tnp project.

{
    "compilerOptions": {
        "noUnusedLocals": false,
        "target": "es5",
        "module": "commonjs",
        "declaration": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "outDir": "dist",
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "types": [
            "node"
        ],
        "lib": [
            "es2015",
            "es2015.promise",
            "es2015.generator",
            "es2015.collection",
            "es2015.core",
            "es2015.reflect",
            "es2016",
            "dom"
        ],
        "typeRoots": [
            "node_modules/@types"
        ],
        "baseUrl": "./src"
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "preview",
        "actions",
        "projects",
        "docs",
        "dist",
        "tests"
    ]
}

I am not sure why... but ngc does to much operations on this tnp project folder... and thats why constant high cpu

[alxhub]

Without a reproduction it's hard to know whether this issue still exists in today's versions of Angular. In general though, the View Engine compiler has never supported npm link, and I'm not surprised if it causes problems. I also don't see your tnp structure having .metadata.json files which I would expect for a compiled Angular library, which likely causes further issues.

The good news is that in Angular v9+ with Ivy, symlinks/npm link shouldn't have such issues.

[darekf77]

I can't see this issue anymore...

Anyway.. I notice that I had circular dependency in imports in 2 files..

file_a.ts
import { fnB } from './file_b';
export function fnA() {}

file_b.ts
import { fnA } from './file_a';
export function fnB() {}

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}