Comments (2)
I add you here the modified files
import { Observable } from 'rxjs';
import { ModuleData } from './../models/module.model';
import { Http } from '@angular/http';
import {
HttpClientModule,
HttpClient,
HTTP_INTERCEPTORS
} from '@angular/common/http';
import { Injectable, Compiler, Inject, ReflectiveInjector, Injector, COMPILER_OPTIONS } from '@angular/core';
import { map } from 'rxjs/operators'
// Needed for the new modules
import * as AngularCore from '@angular/core';
import * as AngularCommon from '@angular/common';
import * as AngularRouter from '@angular/router';
import * as AngularClarity from '@clr/angular';
import * as BrowserAnimations from '@angular/platform-browser/animations';
declare var SystemJS: any;
@Injectable()
export class ModuleService {
source = http://${window.location.host}/
;
constructor(private compiler: Compiler, private http: Http) {
console.log(compiler);
}
loadModules(): Observable<ModuleData[]> {
return this.http.get("./assets/plugins/modules.json")
.pipe(map(res => res.json()));
}
loadModule(moduleInfo: ModuleData): Observable<any> {
let url = this.source + moduleInfo.location;
return this.http.get(url)
.pipe(
map(res => res.text()),
map(source => {
const exports = {}; // this will hold module exports
const modules = { // this is the list of modules accessible by plugins
'@angular/core': AngularCore,
'@angular/common': AngularCommon,
'@angular/router': AngularRouter,
'@angular/platform-browser/animations': BrowserAnimations,
'@clr/angular': AngularClarity
};
// shim 'require' and eval
const require: any = (module) => modules[module];
eval(source);
// Need to check if there is another solution for eval as this is described as 'Evil'
this.compiler.compileModuleAndAllComponentsSync(exports[`${moduleInfo.moduleName}`])
//console.log(exports); // disabled as this object is cleared anyway
return exports;
})
)
;
}
loadModuleSystemJS(moduleInfo: ModuleData): Promise<any> {
let url = this.source + moduleInfo.location;
SystemJS.set('@angular/core', SystemJS.newModule(AngularCore));
SystemJS.set('@angular/common', SystemJS.newModule(AngularCommon));
SystemJS.set('@angular/router', SystemJS.newModule(AngularRouter));
SystemJS.set('@angular/platform-browser/animations', SystemJS.newModule(BrowserAnimations));
SystemJS.set('@clr/angular', SystemJS.newModule(AngularClarity));
// now, import the new module
return SystemJS.import(`${url}`).then((module) => {
console.log(module);
return this.compiler.compileModuleAndAllComponentsAsync(module[`${moduleInfo.moduleName}`]).then(compiled => {
console.log(compiled);
return module;
});
});
}
}
from angular-umd-dynamic-example.
already had 1 on 1 contact with user! solved it!
from angular-umd-dynamic-example.
Related Issues (20)
- library dependencies not resolved when loading HOT 2
- Sharing data between two modules. HOT 3
- Modules not loading when building with --prod HOT 4
- Refresh not working on routes HOT 2
- Not working with angular 7
- Does this work in IE 10?
- How to pass data from parent modules to dynamic lazy loaded module. HOT 2
- shared service at module level
- @NgModule static forRoot when implementing compileModuleAndAllComponentsAsync
- Unexpected value 'zt' imported by the module umd module when running Angular application with '--prod' flag HOT 4
- Error types.d.ts TS1005 ';' expected - stuck at eval HOT 3
- Ivy compatibility HOT 3
- Updating project to Angular 8 and ivy
- Import module in dynamic loaded modules HOT 11
- I have a Angular 9 update! It works. HOT 16
- Is there a Non SystemJS based version of this
- Error: Unexpected value 'undefined' imported by the module 'sampleModule HOT 2
- it can't run in production mode. HOT 7
- Bundling Third-Party Dependencies In Library HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-umd-dynamic-example.