getting error while Compiling in Angular Typescript

[rpvsen]

Q&A (please complete the following information)

• OS: [Windows 11]
• Browser: [chrome]
• Version: [112.0.5615.138]
• Method of installation: [npm,]
• Swagger-UI version: [^3.31.0]
• Swagger/OpenAPI version: [Swagger 2.0, OpenAPI 3.0]

Content & configuration

Swagger/OpenAPI definition:

# your YAML here

Swagger-UI configuration options:

SwaggerUIBundle({
      urls: [
        {
          name: "Test",
          url: "https://petstore.swagger.io/v2/swagger.json",
        },
      ],
      domNode: this.swaggerDom.nativeElement,
      deepLinking: true,
      presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset],
      layout: "StandaloneLayout",
    });

?yourQueryStringConfig

Screenshots

How can we help?

Angular V9.0, "swagger-ui-dist": "^3.31.0", while compiling i am getting "ERROR in ./node_modules/swagger-ui-dist/absolute-path.js Module not found: Error: Can't resolve 'path' in 'D:\Workspace\DIS\Integration Branch\dis-ui\node_modules\swagger-ui-dist'"

angular.json style path is "./node_modules/swagger-ui-dist/swagger-ui.css"

can any one please help me to fix this issue

[DanielRadej]

I have the same issue under Angular 12.2.18 it looks like there is problem with url in minified dist/swagger-ui.css file:

./node_modules/swagger-ui/dist/swagger-ui.css - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleError: Module Error (from ./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js):
<css input>:6:4: Can't resolve '"data:image/svg+xml;charset=utf-8,<svg xmlns=/"http://www.w3.org/2000/svg/" width=/"10/" height=/"8/" viewBox=/"3 7 10 8/"><path fill=/"%2341474E/" fill-rule=/"evenodd/" d=/"M6.333 15 3 11.667l1.333-1.334 2 2L11.667 7 13 8.333z/"/></svg>"' in 'C:\Users\danrad041300\I
deaProjects\web\pag-devportal-web\node_modules\swagger-ui\dist'
    at Object.emitError (C:\Users\danrad041300\IdeaProjects\web\pag-devportal-web\node_modules\webpack\lib\NormalModule.js:562:6)
    at Declaration (C:\Users\danrad041300\IdeaProjects\web\pag-devportal-web\node_modules\@angular-devkit\build-angular\src\webpack\plugins\postcss-cli-resources.js:145:28)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

as in used in the file CSS url function there are values with double quotes:

background:url("data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"><path d=\"M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"/></svg>") 50% no-repeat

after manually changing from url("http://...") to single quotes url(http://...) (with proper escaping) as follows:

'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>'

Angular build works fine.

I'm not sure if the issue is exactly in minification used in swagger-ui or in postcss-loader@6.1.1 from angular dependencies, but I didn't manage to find much similar issues for other NPM packages so I assume it is something in the swagger-ui.

[tomorrowbye]

it's seems like angular-cli's problem [(https://github.com/angular/angular-cli/issues/23773)]