Блог

У меня есть приложение, основанное на Symfony со стороны бэкенда и angular со стороны клиента. Angular был помещен в ядро symfony, и приложение скомпилировано с использованием веб-пакета. Точкой входа в приложение является файл twig, к которому подключены все скомпилированные файлы, необходимые для рендеринга страницы. Глобальные стили успешно применены, проблема проявляется в стилях компонентов. Модуль машинописи используется для подключения стилей:

 declare module '* .scss' {  const value: string;  export default value; }  

В свою очередь, он возвращает неопределенное значение. И эта ошибка:

 main.ts: 12 TypeError: Cannot read properties of undefined (reading 'match')  at extractCommentsWithHash (compiler.mjs: 9130)  at ShadowCss.shimCssText (compiler.mjs: 8694)  at compiler.mjs: 22402  at Array.map (lt;anonymousgt;)  at compileStyles (compiler.mjs: 22401)  at compileComponentFromMetadata (compiler.mjs: 21948)  at CompilerFacadeImpl.compileComponentFromMeta (compiler.mjs: 22570)  at CompilerFacadeImpl.compileComponent (compiler.mjs: 22560)  at Function.get (core.mjs: 24583)  at getComponentDef (core.mjs: 1119)   

Я уже много чего перепробовал: удаление node_modules, изменение конфигурации package.json, изменение конфигурации webpack, переписывание модуля на что-то вроде

 declare module '* .scss' {  const content: Record lt;string, stringgt;;  export default content; }  

Моя конфигурация веб-пакета:

 const webpack = require('webpack'); const path = require('path'); const CopyPlugin = require('copy-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const ngtools = require('@ngtools/webpack') const AngularWebpackPlugin = ngtools.AngularWebpackPlugin; const config = {  mode: 'development',  entry: {  'app': './webapp/src/main.ts',  'styles': './webapp/src/styles.scss',  'polyfills': './webapp/src/polyfills.ts'  },  output: {  path: path.resolve(__dirname, 'public', 'dist'),  filename: '[name].js',  assetModuleFilename: 'images/[hash][ext][query]'  },  module: {  rules: [  {  test: /.css$/,  use: [  'style-loader',  'css-loader'  ]  },  {  test: /.scss$/,  exclude: /webapp/src/app/,  use: [  'style-loader',  'css-loader',  'sass-loader',  ]  },  {  test: /.scss$/,  include: /webapp/src/app/,  use: [  'style-loader',  'css-loader',  'sass-loader',  'to-string-loader',  ]  },  {  test: /.ts(x)?$/,  loader: 'ts-loader',  exclude: /node_modules/,  options: {  configFile: path.resolve(__dirname, 'tsconfig.app.json')  }  },  {  test: /.(png|jpe?g|gif|svg)$/i,  type: "asset/resource"  },  {  test: /.html$/,  loader: 'html-loader'  }  ]  },  plugins: [  new CleanWebpackPlugin()  ],  resolve: {  extensions: [  '.tsx',  '.ts',  '.js'  ],  alias: {  Styles: path.resolve(__dirname, 'assets', 'styles')  }  },  optimization: {  runtimeChunk: 'single',  splitChunks: {  cacheGroups: {  vendor: {  test: /[\/]node_modules[\/]/,  name: 'vendors',  chunks: 'all'  }  }  }  },  devtool: "source-map" };  module.exports = config;  

Мой tsconfig

 /* To learn more about this file see: https://angular.io/config/tsconfig. */ {  "compileOnSave": false,  "compilerOptions": {  "baseUrl": "./",  "outDir": "./dist/out-tsc",  "forceConsistentCasingInFileNames": true,  "strict": true,  "noImplicitOverride": true,  "noPropertyAccessFromIndexSignature": true,  "noImplicitReturns": true,  "noFallthroughCasesInSwitch": true,  "sourceMap": true,  "declaration": false,  "downlevelIteration": true,  "experimentalDecorators": true,  "strictPropertyInitialization": false,  "emitDecoratorMetadata": true,  "moduleResolution": "node",  "importHelpers": true,  "target": "es2017",  "module": "es2020",  "lib": [  "es2020",  "dom"  ]  },  "angularCompilerOptions": {  "enableI18nLegacyMessageIdFormat": false,  "strictInjectionParameters": true,  "strictInputAccessModifiers": true,  "strictTemplates": true  } }  

Если вам нужны дополнительные файлы, то пишите, я прикреплю. Заранее благодарю вас!