Search code examples
angularrxjscdn

Multiple Uncaught TypeErrors using Angular CDN


The application works fine when serving locally...

I am trying to incorporate it into a web content management system, this requires a bit of compiling and prep to import files into it. I have used gulp to turn the TS into JS, the SCSS into CSS and minified etc. And these files are then imported separately into specific areas of the WCMS. I also have to use CDN's for the Angular framework etc for example

https://unpkg.com/@angular/core@11.0.9/bundles/core.umd.min.js

https://unpkg.com/@angular/common@11.0.9/bundles/common.umd.min.js

https://unpkg.com/@angular/platform-browser@11.0.9/bundles/platform-browser.umd.min.js

https://unpkg.com/rxjs@7.0.0/dist/bundles/rxjs.umd.min.js

I am getting multiple errors in the console...

Uncaught TypeError: Cannot read property 'operators' of undefined at core.umd.min.js:6

When I view the file in source, it highlights this: rxjs.operators)}(this,(function(t,e,n,r,o){"use strict";

Uncaught TypeError: t.InjectionToken is not a constructor at common.umd.min.js:35

When I view the file in source, it highlights a line beginning with: var c,l=new t.InjectionToken("DocumentToken");function

Uncaught TypeError: Cannot read property 'operators' of undefined at common-http.umd.min.js:6

When I view the file in source, it highlights this: rxjs.operators,e.ng.common)}(this,(function(e,t,r,n,o){"use strict";

Uncaught TypeError: Object prototype may only be an Object or null: undefined at setPrototypeOf () at n (platform-browser.umd.min.js:20)

When I view the file in source, it highlights part way through a line, with the error starting at: (t,e)};function o(t,e){function r(){this.constructor=t}

Uncaught TypeError: Cannot read property 'Identifiers' of undefined at c (platform-browser-dynamic.umd.min.js:28)

It highlights from Identifiers to the end of the line (not pasted the whole line): var p=function c(){var e=new Map;return e.set(t.Identifiers.ANALYZE_FOR_ENTRY_COMPONENTS

There are a few more but this is a good example (I think) of what I am up against. I just don't understand why I am getting these, what I could have done wrong to cause this. And I also assume this is why interpolation is not working as well (I am just seeing {{name}} for example).

If there is any further info that could be useful to help solve this please let me know.

Thank you.


Solution

  • Referencing the rxjs cdn first resolved all but the platform-browser-dynamic error, which was resolved by adding the cdn for the angular compiler