英文:
Angular 16 monorepo with nest.js faisl to build
问题
我在一个带有 nest.js 的 mono repo 配置中启动了一个通用的 Angular 项目。
要安装依赖，请运行：npm i --legacy-peer-deps
这个错误是我的主要关注点：
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
错误：
➜ geo-cast git:(main) cd ui
➜ ui git:(main)
➜ ui git:(main) npm run start
> ui@0.0.0 start
> ng serve
✔ Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size
vendor.js | vendor | 5.09 MB |
polyfills.js | polyfills | 329.56 kB |
styles.css, styles.js | styles | 227.65 kB |
main.js | main | 173.21 kB |
runtime.js | runtime | 6.96 kB |
| Initial Total | 5.81 MB
Build at: 2023-05-26T04:13:46.196Z - Hash: d9869875966d2349 - Time: 15034ms
../node_modules/jwt-fsm/dist/index.js:10:47-54 - Warning: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
../node_modules/jwt-fsm/dist/index.js:13:44-51 - Warning: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
Warning: /home/hesamian/workspace/geo-cast/ui/src/app/app.module.ts depends on 'store'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
Warning: /home/hesamian/workspace/geo-cast/ui/src/app/utilities/route.utility.ts depends on '@angular-devkit/build-angular/src/utils'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
...
（以下省略）
英文:
I started a boilerplate angular project in a mono repo configuration with nest.js.
To install dependencies run: npm i --legacy-peer-deps
This error is my main concern:
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
Errors:
➜ geo-cast git:(main) cd ui
➜ ui git:(main)
➜ ui git:(main) npm run start
> ui@0.0.0 start
> ng serve
✔ Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size
vendor.js | vendor | 5.09 MB |
polyfills.js | polyfills | 329.56 kB |
styles.css, styles.js | styles | 227.65 kB |
main.js | main | 173.21 kB |
runtime.js | runtime | 6.96 kB |
| Initial Total | 5.81 MB
Build at: 2023-05-26T04:13:46.196Z - Hash: d9869875966d2349 - Time: 15034ms
../node_modules/jwt-fsm/dist/index.js:10:47-54 - Warning: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
../node_modules/jwt-fsm/dist/index.js:13:44-51 - Warning: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
Warning: /home/hesamian/workspace/geo-cast/ui/src/app/app.module.ts depends on 'store'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
Warning: /home/hesamian/workspace/geo-cast/ui/src/app/utilities/route.utility.ts depends on '@angular-devkit/build-angular/src/utils'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
../node_modules/@angular-devkit/build-angular/src/utils/delete-output-dir.js:45:24-37 - Error: Module not found: Error: Can't resolve 'fs' in '/home/hesamian/workspace/geo-cast/node_modules/@angular-devkit/build-angular/src/utils'
../node_modules/@angular-devkit/build-angular/src/utils/delete-output-dir.js:46:15-30 - Error: Module not found: Error: Can't resolve 'path' in '/home/hesamian/workspace/geo-cast/node_modules/@angular-devkit/build-angular/src/utils'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
../node_modules/@angular-devkit/build-angular/src/utils/normalize-asset-patterns.js:46:13-26 - Error: Module not found: Error: Can't resolve 'fs' in '/home/hesamian/workspace/geo-cast/node_modules/@angular-devkit/build-angular/src/utils'
../node_modules/@angular-devkit/build-angular/src/utils/normalize-asset-patterns.js:47:26-41 - Error: Module not found: Error: Can't resolve 'path' in '/home/hesamian/workspace/geo-cast/node_modules/@angular-devkit/build-angular/src/utils'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
../node_modules/@angular-devkit/build-angular/src/utils/normalize-cache.js:15:15-30 - Error: Module not found: Error: Can't resolve 'path' in '/home/hesamian/workspace/geo-cast/node_modules/@angular-devkit/build-angular/src/utils'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
../node_modules/@angular-devkit/build-angular/src/utils/normalize-file-replacements.js:46:13-26 - Error: Module not found: Error: Can't resolve 'fs' in '/home/hesamian/workspace/geo-cast/node_modules/@angular-devkit/build-angular/src/utils'
../node_modules/@angular-devkit/build-angular/src/utils/normalize-file-replacements.js:47:26-41 - Error: Module not found: Error: Can't resolve 'path' in '/home/hesamian/workspace/geo-cast/node_modules/@angular-devkit/build-angular/src/utils'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
../node_modules/@angular-devkit/build-angular/src/utils/normalize-polyfills.js:14:13-26 - Error: Module not found: Error: Can't resolve 'fs' in '/home/hesamian/workspace/geo-cast/node_modules/@angular-devkit/build-angular/src/utils'
../node_modules/@angular-devkit/build-angular/src/utils/normalize-polyfills.js:15:15-30 - Error: Module not found: Error: Can't resolve 'path' in '/home/hesamian/workspace/geo-cast/node_modules/@angular-devkit/build-angular/src/utils'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
../node_modules/@angular-devkit/build-angular/src/utils/run-module-as-observable-fork.js:14:24-48 - Error: Module not found: Error: Can't resolve 'child_process' in '/home/hesamian/workspace/geo-cast/node_modules/@angular-devkit/build-angular/src/utils'
../node_modules/@angular-devkit/build-angular/src/utils/run-module-as-observable-fork.js:15:15-30 - Error: Module not found: Error: Can't resolve 'path' in '/home/hesamian/workspace/geo-cast/node_modules/@angular-devkit/build-angular/src/utils'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
../node_modules/@angular-devkit/core/src/json/schema/registry.js:53:26-41 - Error: Module not found: Error: Can't resolve 'http' in '/home/hesamian/workspace/geo-cast/node_modules/@angular-devkit/core/src/json/schema'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "http": false }
../node_modules/@angular-devkit/core/src/json/schema/registry.js:54:27-43 - Error: Module not found: Error: Can't resolve 'https' in '/home/hesamian/workspace/geo-cast/node_modules/@angular-devkit/core/src/json/schema'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
- install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "https": false }
../node_modules/@angular-devkit/core/src/json/schema/registry.js:56:25-39 - Error: Module not found: Error: Can't resolve 'url' in '/home/hesamian/workspace/geo-cast/node_modules/@angular-devkit/core/src/json/schema'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "url": false }
../node_modules/source-map/lib/read-wasm.js:22:13-26 - Error: Module not found: Error: Can't resolve 'fs' in '/home/hesamian/workspace/geo-cast/node_modules/source-map/lib'
../node_modules/source-map/lib/read-wasm.js:23:15-30 - Error: Module not found: Error: Can't resolve 'path' in '/home/hesamian/workspace/geo-cast/node_modules/source-map/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
../node_modules/tree-kill/index.js:3:19-43 - Error: Module not found: Error: Can't resolve 'child_process' in '/home/hesamian/workspace/geo-cast/node_modules/tree-kill'
node:util - Error: Module build failed: UnhandledSchemeError: Reading from "node:util" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.
Error: ../node_modules/@angular/compiler-cli/src/ngtsc/core/src/host.d.ts:42:247 - error TS2694: Namespace 'ts' has no exported member 'ResolutionMode'.
42 resolveTypeReferenceDirectives: ((typeReferenceDirectiveNames: string[] | readonly ts.FileReference[], containingFile: string, redirectedReference: ts.ResolvedProjectReference | undefined, options: ts.CompilerOptions, containingFileMode?: ts.ResolutionMode) => (ts.ResolvedTypeReferenceDirective | undefined)[]) | undefined;
~~~~~~~~~~~~~~
Error: ../node_modules/@angular/compiler-cli/src/ngtsc/program_driver/src/ts_create_program_driver.d.ts:37:247 - error TS2694: Namespace 'ts' has no exported member 'ResolutionMode'.
37 resolveTypeReferenceDirectives: ((typeReferenceDirectiveNames: string[] | readonly ts.FileReference[], containingFile: string, redirectedReference: ts.ResolvedProjectReference | undefined, options: ts.CompilerOptions, containingFileMode?: ts.ResolutionMode) => (ts.ResolvedTypeReferenceDirective | undefined)[]) | undefined;
~~~~~~~~~~~~~~
Error: src/app/app.module.ts:33:24 - error TS7016: Could not find a declaration file for module 'store'. '/home/hesamian/workspace/geo-cast/node_modules/store/dist/store.legacy.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/store` if it exists or add a new declaration (.d.ts) file containing `declare module 'store';`
33 import * as store from 'store';
~~~~~~~
Error: src/app/app.module.ts:42:12 - error NG6002: 'LoggerModule' does not appear to be an NgModule class.
42 imports: [
~
43 BrowserModule,
~~~~~~~~~~~~~~~~~~
...
61 LoggerModule.forRoot({ level: NgxLoggerLevel.DEBUG, serverLogLevel: NgxLoggerLevel.ERROR })
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
62 ],
~~~
../node_modules/ngx-logger/lib/logger.module.d.ts:3:22
3 export declare class LoggerModule {
~~~~~~~~~~~~
This likely means that the library (ngx-logger) which declares LoggerModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
Error: src/app/app.module.ts:42:12 - error NG6002: 'LoggerModule' does not appear to be an NgModule class.
42 imports: [
~
43 BrowserModule,
~~~~~~~~~~~~~~~~~~
...
61 LoggerModule.forRoot({ level: NgxLoggerLevel.DEBUG, serverLogLevel: NgxLoggerLevel.ERROR })
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
62 ],
~~~
../node_modules/ngx-logger/lib/logger.module.d.ts:3:22
3 export declare class LoggerModule {
~~~~~~~~~~~~
This likely means that the library (ngx-logger) which declares LoggerModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
Error: src/app/app.module.ts:52:5 - error NG6002: This import contains errors, which may affect components that depend on this NgModule.
52 CommonComponentModule,
~~~~~~~~~~~~~~~~~~~~~
Error: src/app/modules/common.module.ts:25:5 - error NG6002: 'LoadingBarHttpClientModule' does not appear to be an NgModule class.
25 LoadingBarHttpClientModule,
~~~~~~~~~~~~~~~~~~~~~~~~~~
../node_modules/@ngx-loading-bar/http-client/http.module.d.ts:1:22
1 export declare class LoadingBarHttpClientModule {
~~~~~~~~~~~~~~~~~~~~~~~~~~
This likely means that the library (@ngx-loading-bar/http-client) which declares LoadingBarHttpClientModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
Error: src/app/modules/common.module.ts:27:5 - error NG6002: 'LoadingBarModule' does not appear to be an NgModule class.
27 LoadingBarModule,
~~~~~~~~~~~~~~~~
../node_modules/@ngx-loading-bar/core/core.module.d.ts:1:22
1 export declare class LoadingBarModule {
~~~~~~~~~~~~~~~~
This likely means that the library (@ngx-loading-bar/core) which declares LoadingBarModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
Error: src/app/modules/common.module.ts:29:5 - error NG6002: 'LoadingBarRouterModule' does not appear to be an NgModule class.
29 LoadingBarRouterModule,
~~~~~~~~~~~~~~~~~~~~~~
../node_modules/@ngx-loading-bar/router/router.module.d.ts:3:22
3 export declare class LoadingBarRouterModule {
~~~~~~~~~~~~~~~~~~~~~~
This likely means that the library (@ngx-loading-bar/router) which declares LoadingBarRouterModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✖ Failed to compile.
package.json
{
"name": "ui",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@root/lib": "*",
"@angular/animations": "^16.0.0",
"@angular/common": "^16.0.0",
"@angular/compiler": "^16.0.0",
"@angular/core": "^16.0.0",
"@angular/forms": "^16.0.0",
"@angular/platform-browser": "^16.0.0",
"@angular/platform-browser-dynamic": "^16.0.0",
"@angular/router": "^16.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.13.0",
"@iplab/ngx-file-upload": "^16.0.0",
"@ngx-loading-bar/core": "^4.2.0",
"@ngx-loading-bar/http-client": "^4.2.0",
"@ngx-loading-bar/router": "^4.2.0",
"jwt-decode": "^2.2.0",
"jwt-fsm": "^1.0.3",
"ngx-bootstrap": "^10.2.0",
"ngx-logger": "^4.1.1",
"store": "^2.0.12"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.0.1",
"@angular/cli": "~16.0.1",
"@angular/compiler-cli": "^16.0.0",
"@types/jasmine": "~4.3.0",
"jasmine-core": "~4.6.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"typescript": "~5.0.2",
"@typescript-eslint/eslint-plugin": "^5.59.2",
"@typescript-eslint/parser": "^5.59.2",
"eslint": "^8.39.0",
"eslint-config-standard-with-typescript": "^34.0.1",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-n": "^15.7.0",
"eslint-plugin-promise": "^6.1.1"
}
}
答案1
得分: 1
Install the package:
npm i node-polyfill-webpack-plugin
And add the following to your webpack.config.js:
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
module.exports = {
// Other rules...
plugins: [
new NodePolyfillPlugin()
]
}
EDIT:
Install @angular-builders/custom-webpack and follow the usages guide, and if you haven't created webpack.config.js with the content above then do so.
英文:
Install the package:
> npm i node-polyfill-webpack-plugin
And add the following to your webpack.config.js
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
module.exports = {
// Other rules...
plugins: [
new NodePolyfillPlugin()
]
}
EDIT:
Install @angular-builders/custom-webpack and follow the usages guide, and if you haven't created webpack.config.js with the content above then do so.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论