swagger-ui npm module doesn't compile with Angular 7

[KutsenkoA]

Q&A (please complete the following information)

• OS: Windows 10
• Browser: n/a
• Version: n/a
• Method of installation: npm
• Swagger-UI version: 3.19.4
• Swagger/OpenAPI version: n/a
• Angular version: 7.0.1

Describe the bug you're encountering

Angular application compiles with an error:

Date: 2018-10-25T15:05:14.379Z
Hash: f05c6339336aa563f08a
Time: 11370ms
chunk {main} main.js, main.js.map (main) 12.7 kB [initial] [rendered]

ERROR in ./node_modules/xml/lib/xml.js
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 228 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
Module not found: Error: Can't resolve 'stream' in '.\node_modules\xml\lib'
chunk {styles} styles.js, styles.js.map (styles) 17 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 6.77 MB [initial] [rendered]
i ｢wdm｣: Failed to compile.

To reproduce...

Create a new Angular project then do npm install swagger-ui and add code to the app.component.ts:

import { SwaggerUI } from 'swagger-ui';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent implements OnInit {

  ngOnInit() {
    SwaggerUI({
      dom_id: '#swagger-ui',
      urls: [{
        url: 'any proper url',
        name: 'API name'
      }]
    });
  }
}

then run npm start and you will get an error

Expected behavior

Compile an application without any errors

Additional context or thoughts

I think xml dependency requires stream lib, which is a part of node.js core and it's not compiled with Angular.

[shockey]

Hey @KutsenkoA, this appears to be an Angular issue - we don't depend on the xml module.

Before I close it, though... can you provide an angular project repository that I can use to recreate this bug?

[KutsenkoA]

Hey @KutsenkoA, this appears to be an Angular issue - we don't depend on the xml module.

I'm sorry, but you do:
https://github.com/swagger-api/swagger-ui/blob/9a9b63634fdbe1de0556818fdb78e211c4e2fa83/package.json#L80

Before I close it, though... can you provide an angular project repository that I can use to recreate this bug?

Sure - https://github.com/KutsenkoA/imhotep

[Vaelor]

Got the same problem here. My error message (as soon as I include swagger-ui):

ERROR in ./node_modules/xml/lib/xml.js
Module not found: Error: Can't resolve 'stream' in '<snip>/node_modules/xml/lib'

[ndvictor14]

Just chiming in, I got the same error doing the basic installation / setup:

SwaggerUID({
  dom_id: '#swagger'
})

[shockey]

Oof - my bad, @KutsenkoA. You're right. I was in the Swagger Client folder when I did npm ls xml 🤦‍♂️

So, the root of this issue seems to be that xml relies on stream, which is a Node.js builtin module. xml has been inactive for some time, but there was some noise about this in the issue tracker (https://github.com/dylang/node-xml/issues/40) - I think it's safe to assume that xml's maintainers see it as a Node.js module.

Generally, web application bundlers handle Node builtins: Webpack allows you to polyfill or mock them, for example. This is useful, because it allows us web developers to consume anything on npm without worrying about the environment that the library author was building for.

Angular previously shimmed these modules transparently, but the Angular team seems to have decided that they're not doing that going forward (see https://github.com/angular/angular-cli/issues/10681 and https://github.com/angular/angular-cli/issues/9827#issuecomment-369578814).

---

I attempted to fix this by setting up our Webpack config to mock out stream, but Webpack wasn't detecting the need to do so, because stream is a tertiary dependency (swagger-ui -> xml -> stream).

I _think_ the only proper way to solve this is to fork xml, and create an isomorphic version of it - which we've done before, with my forks of js-yaml and object-assign-deep.

I'm going to prioritize this work, since the situation on the Angular side does _not_ seem to be getting better anytime soon, and it's stopping you all dead in your tracks. Hopefully we'll ship a fix this week!

[shockey]

Okay, I've forked xml successfully.

Based on @KutsenkoA's example repository, this appears to be fixed once I link the example project to my local version of Swagger UI, which contains the fix in the PR linked above this comment:

➜ nr build    

> [email protected] build /Users/kyle/Code/imhotep
> ng build

                                                                              u Date: 2018-10-31T22:43:48.288Z
Hash: 26a9399eea22489d90d1
Time: 11434ms
chunk {main} main.js, main.js.map (main) 780 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 228 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.9 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 5.73 MB [initial] [rendered]

[shockey]

Okay, I'm going to close this out - I'm pretty confident that #4985 fixes this.

We'll release a new version of Swagger UI tomorrow with the fix - if you're still having issues, please bump this thread with some details and I'll take another look.

Thanks, everyone!