I would like to import Angular4 modules dynamically from a remote server. This is to create a system that works with a plugins architecture. It is therefore important that the 'host app' shouldn't have to declare these modules in it's EntryComponents. I've managed to get the results I want, using this guide:
and the code provided at
https://github.com/maximusk/Here-is-what-you-need-to-know-about-dynamic-components-in-Angular
with some minor changes which then loads dependencies from the same server.
My problem comes in when I try to migrate this logic to my Anglular-CLI app and so webpack comes into play.
Posts and articles I've looked at includes (which were the most useful so far);
- Get and load a remote component/module in an angular 4.4 app
- How to load dynamic external components into Angular application
If anyone can help me to achieve the following, I would consider this a win:
- Create a new Angular Cli project
- Dynamically import a module (component) from a remote destination (not the same app), preferably that could have a dependency to another module
- Render it in app.component.ts
If any special versions are used, please list them as well.
I've been using the latest Angular4 cli and SystemJS@0.20.19 to no avail.
In the code which did work, the app was bootstrapped using SystemJS@0.19.39 (Although I also couldn't get this to work in the CLI basic app)
EDIT:
Using these steps:
ng new stack-overflow-example
npm install systemjs (this installs the latest version)
ng g dynamic-host
copy "fetch"-code as it worked in systemjs bootstrapped app - see below
declare var SystemJS; at top of dynamic-host component
It goes into the SystemJS import function but never triggers the .then nor does it output anything further. I've tried with systemjs v0.19.39 as well, then I get a
404 - http://localhost:4200/traceur
error.
I tried diving further into SystemJS, but I knowledge is a bit too limited to make any sense of what I see.
public fetchModule() {
return new Promise((resolve, reject) => {
console.info(`[${this.constructor.name}] - Before import`);
SystemJS.import('https:/some-remote-server/some-remote-module.module.ts')
.then((_module) => {
// never gets to this point
console.info(`[${this.constructor.name}] - After import - then`);
})
.catch((err) => {
reject(err);
console.info(`[${this.constructor.name}] - After import - catch`);
});
});
}
I've been struggling with this for quite some time, so whatever is unclear or should you need any more information, please let me know. I'm really keen to get this working on my side.
EDIT 2:
Acting on your feedback, I've created a clean 'plugin' which is just a clean angular module exporting a component which displays something in the html.
I've tried both 'tsc' and 'node_modules/.bin/ngc -p tsconfig-aot.json', with both methods logging the result
[DynamicHostComponent] - After import - catch
Error: Unable to dynamically transpile ES module
A loader plugin needs to be configured via SystemJS.config({ transpiler: 'transpiler-module' }).
upon trying to:
SystemJS.import('some-server/widget-without-deps/index.js')
As you can see, it at least now comes out of the System.import..
These are the files on the server using ngc
These are the files on the server using tsc
