Use Angular 8 with angular/core in webpack.Exports externals

Asked

Viewed 25 times

0

I am with an Angular 8 project and would like to get the javascript files of a CDN. For example, I have rxjs and instead of it being part of the build, I would like it to be obtained in Runtime from a CDN.

I managed to do using webpack.Exports externals. Reference: https://developer.okta.com/blog/2019/12/09/angular-webpack

File custom-webpack.config.js

const webpack = require('webpack');

module.exports = {
    externals: {
        rxjs: 'rxjs'
    } };

index.html (getting a local http-Sever as an example)

...
<script src="http://localhost:8080/rxjs.umd.js"></script>
...

My question is whether it would be possible to do this with the angular modules such as angular/core, angular/Compiler etc. I tried with the core as follows:

const webpack = require('webpack');

module.exports = {
    // externalsType: 'script',
    externals: {
        rxjs: 'rxjs',
        '@angular/core': 'ng.core' // AQUI QUE NAO SEI QUAL O CORRETO. TENTEI TB @angular.core
    }
};

and at index.html

<script src="http://localhost:8080/core.js"></script>

.: File obtained in node_modules@angular core_ivy_ngcc_\fesm2015 core.js

The result was the error below in the console:

Uncaught SyntaxError: Cannot use import statement outside a module external "ng.core":1 Uncaught ReferenceError: ng is not defined
    at Object.@angular/core (external "ng.core":1)
    at __webpack_require__ (bootstrap:79)
    at Module../src/main.ts (environment.ts:276)
    at __webpack_require__ (bootstrap:79)
    at Object.0 (main.ts:14)
    at __webpack_require__ (bootstrap:79)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.js:1

Well... is it possible to do that? Vlw

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.