-
|
I want to install the Monaco project in an Angular 16 environment within an Nx project. After researching, I understand that it's necessary to adjust the executor in the project.json of the Angular project to @angular-devkit/custom-webpack:browser and set the options->customWebpackConfig, with the path pointing to the specified webpack.config.js. My webpack.config.js configuration is as follows: const path = require('path');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = (config, context) => {
console.log('默认配置', JSON.stringify(config, null, 2));
const newConfig = {
...config,
...{
plugins: [
new MonacoWebpackPlugin(),
new MiniCssExtractPlugin({
filename: '[name].css',
runtime: false
})
],
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.s?css$/i,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')()]
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /\.ttf$/,
include: path.resolve(__dirname, '../node_modules/monaco-editor'),
use: ['file-loader']
}
]
}
}
};
console.log('最后配置', JSON.stringify(newConfig, null, 2));
return newConfig;
};However, what I don't understand is that it keeps throwing errors and fails to parse CSS correctly. I'm starting to doubt if anyone has successfully introduced Monaco in a similar environment. I hope someone kind can help me out~ My other configurations: > NX Report complete - copy this into the issue template
Node : 20.15.1
OS : darwin-x64
pnpm : 9.7.0
nx (global) : 19.5.6
nx : 16.10.0
@nx/js : 16.10.0
@nx/jest : 16.10.0
@nx/linter : 16.10.0
@nx/workspace : 16.10.0
@nx/angular : 16.10.0
@nx/eslint-plugin : 16.10.0
@nx/storybook : 16.10.0
typescript : 5.1.6
---------------------------------------
Community plugins:
@compodoc/compodoc : 1.1.25
@storybook/angular : 7.6.20
package.json {
"name": "@yi-form/source",
"version": "0.0.0",
"license": "MIT",
"scripts": {
},
"private": true,
"devDependencies": {
"@angular-builders/custom-webpack": "~16.0.1",
"@angular-devkit/build-angular": "~16.2.15",
"@angular-devkit/core": "~16.2.15",
"@angular-devkit/schematics": "~16.2.15",
"@angular-eslint/eslint-plugin": "~16.0.3",
"@angular-eslint/eslint-plugin-template": "~16.0.3",
"@angular-eslint/template-parser": "~16.0.3",
"@angular/cli": "~16.2.15",
"@angular/compiler-cli": "~16.2.12",
"@angular/language-service": "~16.2.12",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-proposal-decorators": "^7.24.7",
"@babel/preset-env": "^7.25.4",
"@babel/preset-react": "^7.24.7",
"@babel/preset-typescript": "^7.24.7",
"@compodoc/compodoc": "^1.1.25",
"@nx/angular": "16.10.0",
"@nx/eslint-plugin": "16.10.0",
"@nx/jest": "16.10.0",
"@nx/js": "16.10.0",
"@nx/linter": "16.10.0",
"@nx/storybook": "16.10.0",
"@nx/workspace": "16.10.0",
"@schematics/angular": "~16.2.15",
"@storybook/addon-docs": "^8.2.9",
"@storybook/addon-essentials": "^7.6.20",
"@storybook/angular": "^7.6.20",
"@storybook/builder-webpack5": "^8.2.9",
"@storybook/core-server": "^7.6.20",
"@storybook/react-dom-shim": "^8.2.9",
"@types/jest": "^29.5.12",
"@types/node": "16.11.7",
"@types/sortablejs": "^1.15.8",
"@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.62.0",
"autoprefixer": "^10.4.20",
"babel-loader": "^9.1.3",
"css-loader": "^7.1.2",
"esbuild": "^0.19.12",
"eslint": "~8.46.0",
"eslint-config-prettier": "8.1.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.6.0",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"jest-preset-angular": "~13.1.6",
"jsonc-eslint-parser": "^2.4.0",
"mini-css-extract-plugin": "^2.9.1",
"monaco-editor-webpack-plugin": "^7.1.0",
"ng-packagr": "~16.2.3",
"nx": "^16.10.0",
"postcss": "^8.4.45",
"postcss-import": "~14.1.0",
"postcss-loader": "^8.1.1",
"postcss-preset-env": "~7.5.0",
"postcss-url": "~10.1.3",
"prettier": "^2.8.8",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"sass": "1.78.0",
"sass-loader": "^16.0.1",
"style-loader": "^4.0.0",
"ts-jest": "^29.2.5",
"ts-loader": "^9.5.1",
"ts-node": "10.9.1",
"tsconfig-paths": "^4.2.0",
"typescript": "~5.1.6",
"webpack": "5"
},
"dependencies": {
"@angular/animations": "~16.2.12",
"@angular/common": "~16.2.12",
"@angular/compiler": "~16.2.12",
"@angular/core": "~16.2.12",
"@angular/forms": "~16.2.12",
"@angular/platform-browser": "~16.2.12",
"@angular/platform-browser-dynamic": "~16.2.12",
"@angular/router": "~16.2.12",
"monaco-editor": "^0.50.0",
"rxjs": "~7.8.1",
"sortablejs": "^1.15.3",
"tslib": "^2.7.0",
"zone.js": "~0.13.3"
}
}
project.json {
"name": "yi-form-demo",
"$schema": "../node_modules/nx/schemas/project-schema.json",
"projectType": "application",
"prefix": "yi-form",
"sourceRoot": "yi-form-demo/src",
"tags": [],
"targets": {
"build": {
"executor": "@angular-builders/custom-webpack:browser",
"outputs": ["{options.outputPath}"],
"options": {
"customWebpackConfig": {
"path": "yi-form-demo/webpack.config.js"
},
"outputPath": "dist/yi-form-demo",
"index": "yi-form-demo/src/index.html",
"main": "yi-form-demo/src/main.ts",
"tsConfig": "yi-form-demo/tsconfig.app.json",
"polyfills": ["zone.js"],
"assets": ["yi-form-demo/src/favicon.ico", "yi-form-demo/src/assets",{
"glob": "**/*",
"input": "../node_modules/monaco-editor/min/vs",
"output": "yi-form-demo/src/assets/monaco-editor"
}],
"inlineStyleLanguage": "scss",
"styles": ["yi-form-demo/src/styles.css"],
"scripts": []
},
"configurations": {
"production": {
"vendorChunk": true
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"executor": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "yi-form-demo:build:production"
},
"development": {
"browserTarget": "yi-form-demo:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"executor": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "yi-form-demo:build"
}
},
"lint": {
"executor": "@nx/linter:eslint",
"outputs": ["{options.outputFile}"],
"options": {
"lintFilePatterns": ["yi-form-demo/**/*.ts", "yi-form-demo/**/*.html"]
}
},
"test": {
"executor": "@nx/jest:jest",
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
"options": {
"jestConfig": "yi-form-demo/jest.config.ts",
"passWithNoTests": true
},
"configurations": {
"ci": {
"ci": true,
"codeCoverage": true
}
}
}
}
}
errors: ./node_modules/.pnpm/[email protected]/node_modules/typescript/lib/typescript.js:3055:91-112 - Warning: Module not found: Error: Can't resolve 'perf_hooks' in '/Users/EternalHeart/workspace/angular/angular-saas/yi-form/node_modules/.pnpm/[email protected]/node_modules/typescript/lib'
./node_modules/.pnpm/[email protected]/node_modules/typescript/lib/typescript.js:3089:22-44 - Warning: Critical dependency: the request of a dependency is an expression
./node_modules/.pnpm/[email protected]/node_modules/typescript/lib/typescript.js:6256:35-54 - Warning: Critical dependency: the request of a dependency is an expression
./yi-form-demo/src/app/app.config.ts:4:0-45 - Error: Module not found: Error: Can't resolve 'yi-form' in '/Users/EternalHeart/workspace/angular/angular-saas/yi-form/yi-form-demo/src/app'
./yi-form-demo/src/components/asset-manager/asset-manager.component.ts:5:0-48 - Error: Module not found: Error: Can't resolve 'yi-form' in '/Users/EternalHeart/workspace/angular/angular-saas/yi-form/yi-form-demo/src/components/asset-manager'
./yi-form-demo/src/components/convert-helper/convert-helper.component.ts:5:0-49 - Error: Module not found: Error: Can't resolve 'yi-form' in '/Users/EternalHeart/workspace/angular/angular-saas/yi-form/yi-form-demo/src/components/convert-helper'
./yi-form-demo/src/components/designer/designer.component.ts:5:0-44 - Error: Module not found: Error: Can't resolve 'yi-form' in '/Users/EternalHeart/workspace/angular/angular-saas/yi-form/yi-form-demo/src/components/designer'
./yi-form-demo/src/components/manager/manager.component.ts:5:0-43 - Error: Module not found: Error: Can't resolve 'yi-form' in '/Users/EternalHeart/workspace/angular/angular-saas/yi-form/yi-form-demo/src/components/manager'
./yi-form-demo/src/components/renderer/renderer.component.ts:5:0-44 - Error: Module not found: Error: Can't resolve 'yi-form' in '/Users/EternalHeart/workspace/angular/angular-saas/yi-form/yi-form-demo/src/components/renderer'
./yi-form-demo/src/components/script-editor/script-editor.component.ts:5:0-48 - Error: Module not found: Error: Can't resolve 'yi-form' in '/Users/EternalHeart/workspace/angular/angular-saas/yi-form/yi-form-demo/src/components/script-editor'
./yi-form-demo/src/demo/demo.register.ts:1:0-54 - Error: Module not found: Error: Can't resolve 'yi-form' in '/Users/EternalHeart/workspace/angular/angular-saas/yi-form/yi-form-demo/src/demo'
./yi-form-demo/src/directives/dynamic-component.directive.ts:5:0-52 - Error: Module not found: Error: Can't resolve 'yi-form' in '/Users/EternalHeart/workspace/angular/angular-saas/yi-form/yi-form-demo/src/directives'
——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
> NX Running target build for project yi-form-demo and 1 task it depends on failed
Failed tasks:
- yi-form-demo:build:production
Hint: run the command with --verbose for more details.
The above is the first error, likely because the tsconfig.app.json inherits the configuration from tsconfig.base.json, and when changing the executor, the extends property becomes invalid. Even if I manually resolve this reference, there will still be the following issue: ./yi-form-demo/src/demo/demo.ts-1.css?ngResource!=!./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@angular+cor_663oprwhopsofuxbpzvh4iaq2e/node_modules/@ngtools/webpack/src/loaders/inline-resource.js!./yi-form-demo/src/demo/demo.ts - Error: No template for dependency: CssDependency
./yi-form-demo/src/app/app.select.scss?ngResource - Error: No template for dependency: CssDependency
Error: The loader "/Users/EternalHeart/workspace/angular/angular-saas/yi-form/yi-form-demo/src/app/app.select.scss" didn't return a string.
Error: The loader "/Users/EternalHeart/workspace/angular/angular-saas/yi-form/yi-form-demo/src/demo/demo.ts-angular-inline--1.css" didn't return a string.
——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
> NX Running target build for project yi-form-demo and 1 task it depends on failed
|
Beta Was this translation helpful? Give feedback.
Answered by
wh131462
Oct 10, 2024
Replies: 2 comments
-
|
CSS ERRORS: |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
A magical thing happened: after changing the executor from @angular-devkit/build-angular:browser to @angular-devkit/build-angular:browser-esbuild, everything worked perfectly! (You can now remove all redundant webpack configurations, and you don't even need to include any plugins!) |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
wh131462
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
A magical thing happened: after changing the executor from @angular-devkit/build-angular:browser to @angular-devkit/build-angular:browser-esbuild, everything worked perfectly! (You can now remove all redundant webpack configurations, and you don't even need to include any plugins!)