luckynick commented 4 years ago

🐞 Bug report

Command (mark with an `x`)

[ ] new
[X] build
[x] serve
[ ] test
[ ] e2e
[ ] generate
[ ] add
[ ] update
[ ] lint
[ ] xi18n
[ ] run
[ ] config
[ ] help
[ ] version
[ ] doc

Is this a regression?

The problem also was in NG7. I hoped it would be gone in NG9, but it is still there.

Description

There are lots of warnings when running ng build or ng serve. Looks like built-in Webpack of @angular-devkit/build-angular tries to process files which it shouldn't touch at all (like those in 'CVS' folder, which are used only by our version control system). Warnings reappear after each code recompilation. Such big amount of warning makes it problematic to track relevant errors of an application, in a way that quality of the development process gets worse.

See example of warnings: warnings.log

🔬 Minimal Reproduction

Could be useful:

I use require() in one of the @ Injectable()

Command: ng serve

Packages:


"dependencies": {
    "@angular-material-extensions/password-strength": "^6.0.0",
    "@angular/animations": "^9.1.0",
    "@angular/cdk": "^9.2.0",
    "@angular/common": "^9.1.0",
    "@angular/compiler": "^9.1.0",
    "@angular/core": "^9.1.0",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "^9.1.0",
    "@angular/material": "^9.2.0",
    "@angular/platform-browser": "^9.1.0",
    "@angular/platform-browser-dynamic": "^9.1.0",
    "@angular/platform-server": "^9.1.0",
    "@angular/router": "^9.1.0",
    "@kolkov/ngx-gallery": "^1.0.11",
    "@material-extended/mde": "^3.0.0",
    "@ngmodule/material-carousel": "^0.6.0",
    "@nguniversal/express-engine": "^9.0.2",
    "bootstrap": "^4.3.1",
    "byots": "2.9.0-dev.20180411.1.10",
    "cheerio": "^1.0.0-rc.3",
    "click-outside-handling": "0.0.2",
    "compression": "^1.7.4",
    "core-js": "^2.6.5",
    "domino": "^2.1.3",
    "express": "^4.15.2",
    "file-system": "^2.2.2",
    "font-awesome": "^4.7.0",
    "jquery": "^3.4.1",
    "material-design-icons": "^3.0.1",
    "ngx-toastr": "^12.0.0",
    "primeicons": "^1.0.0-beta.10",
    "regexp-replace-loader": "^1.0.1",
    "routing-tools": "0.0.6",
    "rxjs": "^6.5.2",
    "rxjs-compat": "^6.5.2",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.0",
    "@angular/cli": "^9.1.0",
    "@angular/compiler-cli": "^9.1.0",
    "@nguniversal/builders": "^9.0.2",
    "@types/express": "^4.17.0",
    "@types/jasmine": "2.8.8",
    "@types/node": "^12.11.1",
    "angular-ide": "^0.9.73",
    "codelyzer": "^5.1.2",
    "jasmine-core": "^3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^2.0.5",
    "karma-firefox-launcher": "^1.1.0",
    "karma-ie-launcher": "^1.0.0",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.0",
    "ts-loader": "^5.2.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "^3.8.3",
    "webpack-cli": "^3.3.2"
  }

## 🔥 Exception or Error First kind:


WARNING in ./src/app/CVS/Entries 2:29
Module parse failed: Unexpected token (2:29)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| D/alter_css////
> /app.component.html/1.11/Thu Jul 18 14:40:08 2019//
| /app.component.scss/1.15/Tue Mar 31 11:52:45 2020//
| /app.component.ts/1.17/Fri Mar 27 12:38:44 2020//

Second kind:


WARNING in ./src/app/app.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
  ╷
9 │ $primary-color: mat-color($candy-app-primary) !default;
  │                           ^^^^^^^^^^^^^^^^^^
  ╵
  C:\Users\Mykyta\Workspaces\Angular IDE\WebShopClientSSR\src\app\app.component.scss 9:27  root stylesheet

Third kind:


WARNING in ./src/app/app.server.module.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: C:\Users\Mykyta\Workspaces\Angular IDE\WebShopClientSSR\src\app\app.server.module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at AngularCompilerPlugin.getCompiledFile (C:\Users\Mykyta\Workspaces\Angular IDE\WebShopClientSSR\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:933:23)
    at plugin.done.then (C:\Users\Mykyta\Workspaces\Angular IDE\WebShopClientSSR\node_modules\@ngtools\webpack\src\loader.js:41:31)
    at process._tickCallback (internal/process/next_tick.js:68:7)

## 🌍 Your Environment





Angular CLI: 9.1.0
Node: 10.16.2
OS: win32 x64

Angular: 9.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.0
@angular-devkit/build-angular     0.901.0
@angular-devkit/build-optimizer   0.901.0
@angular-devkit/build-webpack     0.901.0
@angular-devkit/core              9.1.0
@angular-devkit/schematics        9.1.0
@angular/cdk                      9.2.0
@angular/flex-layout              9.0.0-beta.29
@angular/material                 9.2.0
@ngtools/webpack                  9.1.0
@nguniversal/builders             9.1.0
@nguniversal/common               9.1.0
@nguniversal/express-engine       9.1.0
@schematics/angular               9.1.0
@schematics/update                0.901.0
rxjs                              6.5.4
typescript                        3.8.3
webpack                           4.42.0

**Anything else relevant?**

alan-agius4 commented 4 years ago

Hi @luckynick, these errors/warnings are all genuine.

You are most likely including the CVS directory as part of the compilation.

I am also seeing a lot of errors which are not caused by the CVS, but either setup related or code related errors.

Example:

WARNING in ./src/app/model/season.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: C:\Users\Mykyta\Workspaces\Angular IDE\WebShopClientSSR\src\app\model\season.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at AngularCompilerPlugin.getCompiledFile (C:\Users\Mykyta\Workspaces\Angular IDE\WebShopClientSSR\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:933:23)
    at plugin.done.then (C:\Users\Mykyta\Workspaces\Angular IDE\WebShopClientSSR\node_modules\@ngtools\webpack\src\loader.js:41:31)
    at process._tickCallback (internal/process/next_tick.js:68:7)

and

WARNING in ./src/app/app.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
  ╷
9 │ $primary-color: mat-color($candy-app-primary) !default;
  │                           ^^^^^^^^^^^^^^^^^^
  ╵
  C:\Users\Mykyta\Workspaces\Angular IDE\WebShopClientSSR\src\app\app.component.scss 9:27  root stylesheet

Can you please share your tsconfig.app.json?

luckynick commented 4 years ago

Hi @alan-agius4 ,

Warning about season.ts could be reasonable.

For app.component.scss warning. I renamed this file to _app.component.scss, so it should be treated as partial. But even after that, the same warning is there. The loader doesn't ignore underscored (partial) .scss files.

Archive with tsconfig.json and tsconfig.app.json: tsconfigs.zip

alan-agius4 commented 4 years ago

Hi,

The tsconfig's looks good.

Can you setup a minimal repro please? A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

luckynick commented 4 years ago

@alan-agius4 Link to reproduction project: https://github.com/luckynick/angular-devkit-bug-1/ In this repro, there are other errors besides old warnings.

Problem shows up in this piece of code. If you comment it and return null instead, there are no errors / warnings.

Strange is that I tried to use require() also here, and it doesn't cause any problems.

alan-agius4 commented 4 years ago

Hi @luckynick,

While using require() for assets does work, this isn't something we have ever explicitly supported. Instead Webpack, which we use, supports it, and we don't prevent its usage. In general we don't encourage or support using non-standard and webpack-specific features directly in user source code, because we don't want to commit to supporting them and they might break in future releases.

In this case changing your require usage sounds like the best approach because otherwise we'd be half-heartedly trying to support something we never supported in the first place, and might even break other supported cases while trying.

angular-automatic-lock-bot[bot] commented 4 years ago

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.}

angular / angular-cli

@angular-devkit/build-angular internal Webpack warnings #17360

🐞 Bug report

Command (mark with an `x`)

Is this a regression?

Description

🔬 Minimal Reproduction

angular / angular-cli

@angular-devkit/build-angular internal Webpack warnings #17360

🐞 Bug report

Command (mark with an x)

Is this a regression?

Description

🔬 Minimal Reproduction

Command (mark with an `x`)