lmeijdam / angular-umd-dynamic-example Goto Github PK

Hey @lmeijdam, thank you for this awesome project which leads me to teh right irection for my application. My applicartion will be one application only with some core functionality like adminpanel. authentication und authorization and all other features will be available via angular libraries as plugins, so a customer can build his own application with my plugins.

I forked your project to bump the version to Angular 8 and make some improvements but as I see, SystemJS is not available here, since SystemJS has done some things. But I manged to get the Systemset() working. But now it complains, that System.newModule() is not a function.

Do you have clue how I can solve this? When I've done it, I would love to create a PR for your project. In an example project of myself I've ditched SystemJS completely and only use dynamic import() of esNext. I think this could be possible here too, since Angular injects the deps automagically.

Only point which doesn't work actually is to inject routes when I lazy load that module.

Hello,

More than an issue I would like to ask if anyone has an idea on how to achieve the following:

In this part of the code where the UMD file is loaded and compiled (PlaygroundModule):

return this.compiler.compileModuleAndAllComponentsAsync(module[${moduleInfo.moduleName}])
.then(compiled =>
{
console.log(compiled);
return module;
});

If I have a static forRoot in the module that I am loading (PlaygroundModule):

export class PlaygroundModule
{
static forRoot(
config: OAuthModuleConfig = null
): ModuleWithProviders {
return {
ngModule: PlaygroundModule,
providers: [
{ provide: OAuthModuleConfig, useValue: config }
]
};
}

Is there any way to set the values for that forRoot when compiling the code implementing compileModuleAndAllComponentsAsync as I would provide them at design time?

See below..

@NgModule(
{
declarations:
[
AppComponent
],
imports:
[
......
PlaygroundModule.forRoot({
resourceServer: {
allowedUrls: ['http://www.angular.at/api'],
sendAccessToken: false
}
}),
providers: [],
bootstrap: [AppComponent]
})

export class AppModule
{ }

Hi.
I m trying to implement dynamic loading using your technique.
I got some problem.
If my dynamic module has providers

@NgModule({
	providers: [
		SampleService
	],
//....
})

and this service is injected in component i get
NullInjectorError: No provider for SampleService!
if i declare it as

@Component({
	providers: [
		SampleService
	],
})

everything seems ok, but service get destroyed with component

I need help...
How can i make shared service at module level ?
PS my angular version is 5

Lets say i have DynamicModuleA and DynamicModuleB that are my modules to load on runtime.
I have another module SharedModule with some shared components and i want to use this in both DynamicModuleA and DynamicModuleB. How can I do this?

Is it possible to pass the data from parent modules to ModuleA?

Have you figured out a way to do this without eval? I need to be able to do something similar to what you have done here, but using eval will fail our security audits.

Hi,

First of all - thank you for publishing this repo, it has been a great insight for learning dynamic module loading.

Playing around with this, I quickly became aware of the lack of 'connection' between two modules, lets call them ModuleA and ModuleB. If I need them two modules to share data or make calls to a common function (i.e: with a service) does anybody know how I could do that?

Cheers

I have an update in Angular 9. It works! Al least with a basic component library. I will update soon. Thanks alot for the author. Your idea was very useful

First, thank you for posting this repo - it is very helpful.

Do you know if it is possible to use this technique (or another similar technique) with modules that are compiled with AoT instead of lazy loading?

Thanks!

same .

Hello,

I see your repo and it's very nice you shared it :)

I'm using SystemJS as well to load my plugins but I can't figure out how to generate the js files from my typescript written plugins.

Please see my stackoverflow question about this:
https://stackoverflow.com/questions/52113569/how-to-generate-assets-from-typescript-plugins-in-angular-6

I think you can help me for this point

Hi,
The approach you have shown is really what am looking for. however iam facing a problem which am not able to trace and resolved any help to understand will be really great.

I have followed your implementation approach and created a module called sampleModule. This module uses service to pull data. however am stuck with the following error and not able to proceed.
I checked this error on stackoverflow question and answers and other possible solution not able to get this error resolved at all.

Error: Unexpected value 'undefined' imported by the module 'sampleModule' at syntaxError (compiler.js:1021) at compiler.js:10589 at Array.forEach (<anonymous>) at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:10558) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:23876) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndAllComponents (compiler.js:23864) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAndAllComponentsAsync (compiler.js:23823) at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAndAllComponentsAsync (platform-browser-dynamic.js:153)

When provided example is run with angular 7, dynamic module path seems to be corrupt, such that the actual module path is missing in _loadedConfig in its router config; it contains every other path present before the module path is activate

loadedConfig: LoadedRouterConfig
module: NgModuleRef {_moduleType: ƒ, parent: NgModuleRef, _bootstrapComponents: Array(0), _def: {…}, _destroyListeners: Array(0), …}
routes: Array(2)
0: {path: "", redirectTo: "dashboard", pathMatch: "full"}
1: {path: "dashboard", component: ƒ}

Thanks for the very useful repo! We're running into one issue though.

Is there a way we can configure this so that the base application doesn't need to know about the library's third-party dependencies? In this example, Clarity is installed in the base application, but is there a way to provide it in the library instead?

Following this issue ng-packagr/ng-packagr#1231 I've gotten the library bundle to include the third party dependency, but I can't seem to load it in the base application.

Any suggestions?
Thanks!

Hi,thanks for your code!
eg:in projects/modulea,i write these code:
@NgModule({ imports: [ RouterModule.forChild([ { path: '', pathMatch: 'full', component: ModuleaComponent }, { path: 'aa', loadChildren: './test-children/test-children.module#TestChildrenModule' } ]) ], declarations: [ModuleaComponent], exports: [ModuleaComponent] })
then i build modulea.umd.js,but TestChildren isn't in modulea.umd.js
Do you know how to do this?

Hey, I realy love your approach which pushed me into the right direction for our plugin system.
For that system, our custmers should be able to use a set of our services/modules/components to build up their own plugin.

Do you have any idea how we can provide a solution for that? Do we need to inject services and modules in the loadModule function? But how behave the intellisense within the plugin development when the modules and services of the root app are not known to the plugin?

I haven't made any changes. just running in ng serve --prod .

Hi man,

I'm building a new app here in angular 8, i love your concept and i want to integrate it.
But it's not working atm ...

When i click on enable on module a for example here is the output :

I managed to get it compiled by making changes to rxjs to migrate to new version.
But as you can see in my attached file it seems not register by your service module.
Would you have any idea why ?

i found module definitions in the angular.json file. isnt this against the idea of a plugin system ? if these modules are unknown at compile time, how does it help to put modules there ?

This may be related to #9 but I'm not sure.

I have a simple library built as described here. Loading over http rather than from a relative path in the parent app. The library does load remotely, but the loader attempts to resolve the library dependencies remotely as well. See JS console error output below. Is there a way to build the library such that it bundles these dependencies rather than expecting to resolve them in the parent app's context?

VM597:1 GET http://localhost:4200/@angular/common/http 404 (Not Found)
Same for other @angular libraries. Thinking about this further would I even want to bundle dependencies given the potential for version issues, etc. Is the only practical way to do this to bundle the library with the remote app? If so where is the advantage over just including the library as a dependency?

When I open say http://localhost:4200/#/moduleC or share this url the application is not working.

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'moduleC'
Error: Cannot match any routes. URL Segment: 'moduleC'

Hi, Looking for non SystemJS based version of this. This approach seems to be best in many use cases. I would want to register routes dynamically. Have no rebuild of main application. Inject my new modules dynamically with Angular 9 approach without rebuild of parent application.

Any helpful info or repo reference would be great help.

I am exploring Angular 9 Lazy Load modules from the config file reference in this sample.

Hi i want to Say thank you because this project was very usefull.
Do you think with the introduction of Ivy new rendering engine in angular, there are some significants changes in umd loadind and Independent modules compilations. I think ivi should make It simpler

Clone repo and build. It does not compile.

Also sec errors.

So I decided to test upgrading to A8.

After a bunch of changes I get stuck with this:

peterennis@b65929c

@lmeijdam

My foo power ran out at this point.

NOTE: From here: https://github.com/lmeijdam/angular-umd-dynamic-example

AOT and SystemJS
The app now supports AOT compilation by typing;

ng build --aot

Next to that I've changed the use of eval to the use of SystemJS to load the modules.

The eval is where I am stuck.

Do you have any plan to update or create a new repo for A8?

Hi,

It might be related to: it can't run in production mode. #8 but I am getting the issue.

I am building the app using the following command: ng build --prod, and it build Ok but when I am trying to load any module, for instance the modulea, I am getting this error:

ERROR Error: Uncaught (in promise): Error: Unexpected value 'TD' imported by the module 'ModuleaModule'. Please add a @NgModule annotation.
Error: Unexpected value 'TD' imported by the module 'ModuleaModule'. Please add a @NgModule annotation.

When building without the --prod, the app loads any module and works as expected but the optimization is not happening and the file (vendor.js) size is big.

Do I need to add any param when building the app? other than --prod.

Thanks

Hi,

First of all, I really like your angular dynamic umd load example. It has helped a lot with structuring my code and environments. Really, really awesome work!

All works as expected until I want to compile/run my Angular application with the '--prod' flag. When I do run the application with this flag and open the browser to look at my application, for each of the modules I am trying to lazy load I am seeing the following error in the console: "Error: Unexpected value 'zt' imported by the module 'E'. Please add a @NgModule annotation." On closer inspection when diving into the compiler code, I can see that it isn't able to find the CommonModule (which is used by each of my dynamic modules) although I do import @angular/common in my module.service.ts.

I was wondering if anybody has faced a similar issue or if anybody has any recommendations with regards to the above.

Please let me know if you want me to provide any additional information or if anything is unclear.

Thank you in advance for your help on this.