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
> 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
enter image description here
I want to install the Monaco project in an Angular 16 environment within an Nx project.
1
You shouldn’t need @angular-devkit/custom-webpack:browser, but there is some additional overhead that probably would need to be handled in the app. I don’t have enough experience with Monaco to recommend one way or the other.
Storybook is something I do have a lot of experience with, specifically using it with Angular. The ts-loader and css-loader stand out as something I would not recommend, unless you know what you are doing. Angular already includes a custom configured loader for Typescript and the common CSS script types, so I see a high potential for conflicts. Almost every person that asks why their styles aren’t working, after adding a loader, finds out that they were just following a tutorial and didn’t even need it for their project.
Storybook does use Angular’s builder, but it doesn’t actually care what is set in targets.build.executor. So, your custom webpack config may not even be getting used, unless you have the files patched in node_modules/. If your webpack config isn’t getting used and you want to modify the config then Storybook has a way to do that. In .storybook/main.ts you can add webpackFinal: (config) => { /* modify config */ return config } and where my comment is you should be able to call the function from your custom webpack script.
I will try to create an example using Monaco, when I have more time, but I have fixed a lot of Angular Storybook projects and anytime I see loaders then the fix is almost always to remove those loaders and look at why the person thought they needed them. I am not saying you can’t use them, but Angular already has custom loaders for Typescript, CSS and SASS. So why try to avoid them and loose out on the extra features they have already customized those loaders to handle, such as resolving asset and script paths from your Angular configuration?
2