I want to allow dynamic loading of NgModules in my Angular 2 application. The idea is that other developers might add some sort of plugins to it, that will add some new routes and show new components. Ideally they will be added through the router with lazy loading. The basic idea seems to be working but the one thing I would like to add is some sort of a sandbox.
It is possible that those plugins will throw some exceptions. I don't want them to mess with the main application. I tried defining separate Error Handlers for those modules, but the Error Handler for the main module seems to overwrite them. Now I wonder if I should use the loadChildren function from lazy loading to create my own NgModuleFactory to surround those dynamic NgModules in some sort of gigant try-catch clause.
Any ideas how to do this?
Related
I have two module let call it ModuleA and ModuleB
That are pure html/js/css without library.
The code is pretty separate for maintining purpose.
I want a ModuleManager page that load ModuleA and in some input go to ModuleB and then can rego on ModuleA
I have a jsScript on ModuleManager page and with window.location.replace('./ModuleA/index.html')
I can load my ModuleA or my ModuleB but after the replace my js script
who listen to window.addEventListener('keydown') from ModuleManager got disable because im not on ModuleManager page DOM anymore and this seem to destroy my js. A console log in while stop as soon as i replace.
At first i was staying on my ModuleManager page and loading MyModule as iframe
<iframe style="border: 0;" src="./ModuleA/index.html" width="100%" height="100%"/>
But as my Iframe is the full page. And foreground the iframe specification make myListener not triggering event anymore as well.
A simple workAround is add inside ModuleA and ModuleB 2 keyDown Listener witch go to other module. But then my Module know each other and i don't like this. Because when il will add more module i don't want to add gestion in every existing module.
My folder kinda look like this
/(Folder /mysite.com)
|-->index.html (ModuleManager)
|-->ModuleA (Folder)
|--> index.html (ModuleA)
|-->ModuleB (Folder)
|--> index.html (ModuleB)
And module are accesible and working allAlone by mysite.com/ModuleA or ModuleA.mysite.com
ModuleA and ModuleB can be fullFonctionalSite with unlimited subfolder.
Usualy i would use nginx to a think like this but i want when on module Manage to keep a context et switch to a module or another seemlesly.
I also try to add all content of ModuleA/index.html inside a div in ContentManager. But ModuleA refere to a lot of ./thins.js ./subfolder/view.html and all this relative path got broke cause index.html include path context become /index.html and not /ModuleA/index.html
So it broke both Module and if i want to fix pathing like '/ModuleA/thing.js' in ModuleA/index.html it work for mysite.com/ModuleA/thing.js
But broke on ModuleA.mysite.com/thing.js
The way i see it tp make it possible is stay on the same page context all time. OR keeing a windows.JSManagerClass ok navigator.JSManagerClass that trigger a onLoad every time i change loc and register the keydown listener or keep it active
So anyway to manage this? What i want to do is it even possible?
Does some lib provide a thing like this? i could look at?
I feel like i miss the obvious way to do it
It sounds a lot like you want to make a single page application (SPA).
If not, I'm sorry if I've misunderstood you.
There is a couple of great frameworks/libraries you can look into:
React
Vue
Angular
Svelte
Personally I know and use React.
I am not trying to be oppinionated, but since I don't know so much about the other frameworks, I can only speak for React.
Maybe someone else could talk about these or other frameworks/libraries and what makes them great/usefull?
A short and basic explanation about React:
It holds a single index.html file and all content is created with Javascript using an html -like syntax called JSX.
You can install a router (react-router) that handles routes/navigation between views/pages.
Because it is an SPA, you have "access" to all components (modules) at all times and makes the problems you deal with seem trivial.
The official site (where most, if not all examples are using old class based component syntax): reactjs.org
The official beta site for the newer function based component syntax (with hooks): beta.reactjs.org (you should aim towards coding this way).
I am building a Sails.js application using sails 1.2.3, node 10.15. I want to include a javascript module in my api/helpers/* directory, without sails automatically using it to try to create a helper. I.e. I have javascript objects that use helpers and are used in a helper, but are not helpers themselves; as in this image, where the module 'rules' is imported into the create-rule helper and the objects exported by this module are used within the helper.
By default, sails tries to load each file in the helpers/* directory as a helper, and throws if the underlying implementation does not match that of a valid helper:
ImplementationError: Failed to load helper `create-rule/rules/foo/index` into a Callable! Sorry, could not interpret "index" because its underlying implementation has a problem:
------------------------------------------------------
• Missing the `fn` property.
------------------------------------------------------
Hoping someone can help out! Let me know if more info is needed. Thanks in advance!
I don't quite understand what you are trying to do. In my humble opinion I would grab all object constructors and placed them as a single file in api/services. That will make it automatically available in all controllers. I would not allow my object's methods to use helpers by them selves (I even think you can't, at least easily). Then when you need a helper to use your object, just pass it as parameter. Anyway, again, in my humble opinion; you are structuring your code to fit all inside /helpers and that will make it extremely hard to develop. Let assume you manage to make it work all inside /helpers, only you without exception, will be able to understand what it does or how it works. Doesn't seem as a good idea.
I've been looking to develop a method for loading modules and/or components into an AOT-compiled Angular 4 application and been stymied by a variety of solutions that never quite seem to get me where I want to be.
My requirements are as such:
My main application is AOT compiled, and has no knowledge of what it is loading until runtime, so I cannot specifically identify my dynamic module as an entry component at compile time (which is explicitly necessary for the 'dynamic' component loading example presented on Angular.io)
I'd ideally love to be able to pull the code from a back end database via a GET request, but I can survive it simply living in a folder alongside the compiled site.
I'm using Webpack to compile my main application, breaking it into chunks - and so a lot of the SystemJS based solutions seem like dead ends - based on my current research, I could be wrong about this.
I don't need to know or have access to any components of my main application directly - in essence, I'd be loading one angular app into another, with the dynamically loaded module only perhaps having a few tightly controlled explicit interface points with the parent application.
I've explored using tools like SystemJsNgModuleLoader - which seems to require that I have the Angular compiler present, which I'm happy to do if AOT somehow allowed me to include it even if I'm not using it elsewhere. I've also looked into directly compiling my dynamic module using ngc and loading the resulting ngfactory and compiled component/module, but I'm not clear if this is at all possible or if so - what tools Angular makes available to do so. I have also seen references to ANALYZE_FOR_ENTRY_COMPONENTS - but can't clearly dig up what the limitations of this are, as first analysis indicates its not quite what I'm looking for either.
I had assumed I might be able to define a common interface and then simply make a get request to bring my dynamic component into my application - but Angular seems painfully allergic to anything I try to do short of stepping outside of it alltogether and trying to attach non-angular code to the DOM directly.
Is what I'm trying to do even possible? Does Angular 2+ simply despise this kind of on the fly modification of its internal application architecture?
I think I found an article that describes exactly what you are trying to do. In short you need to take over the bootstrap lifecycle.
The magic is in this snippet here.
import {AComponentNgFactory, BComponentNgFactory} from './components.ngfactory.ts';
#NgModule({
imports: [BrowserModule],
declarations: [AComponent, BComponent]
})
export class AppModule {
ngDoBootstrap(app) {
fetch('url/to/fetch/component/name')
.then((name)=>{ this.bootstrapRootComponent(app, name)});
}
bootstrapRootComponent(app, name) {
const options = {
'a-comp': AComponentNgFactory,
'b-comp': BComponentNgFactory
};
https://blog.angularindepth.com/how-to-manually-bootstrap-an-angular-application-9a36ccf86429
I would love to implement Drag and Drop in my Angular project using the angular-dragula module (https://github.com/bevacqua/angular-dragula). However, it seems to be heavily dependent on RequireJS. I've not used Require for a while and only then for an example app or two. Is there an easy way to untangle Require from this module?
The author seems to think it is simple (https://github.com/bevacqua/angular-dragula/issues/23) and has shut down similar questions as well without a real explanation. I've looked at the code and don't see how to load the module without adding RequireJS to my project (which I don't want to do). Am I stuck with either not using this module or adding Require or is there a way to use this without Require?
OK, after help from those who commented (thanks everyone!), I was able to get this to work. There are a couple things that you need to do. First, I was bundling this module with the rest of my modules and trying to call it. That will not work because it needs to initialize with a parameter (angular). Therefore, you need to do the following:
Add a reference to angular-dragula.js (or the min version) to your index.html page below the declaration for angular but above where you create your app.
When you declare the dependencies for your app, specify angularDragula(angular) (not in quotes).
Use dragula as you normally would. If you need to access the service, the name would be angularDragula.
For example, here is my declaration of app:
var app = angular.module('app', [
'ngRoute',
angularDragula(angular)
]);
And then to get a simple list to be drag and drop capable, this is my html:
<div dragula='"bag-one"' dragula-model="vm.items">
<div ng-repeat="item in vm.items">{{ item }}</div>
</div>
Note that I do not declare angularDragula anywhere, unlike the examples. In the example the author gives, he requires angular and creates the angular variable and then he requires angular-dragula and creates the angularDragula variable. This is not needed if you are not using RequireJS as long as you load the scripts in the right order.
Based on recommendations for the preparation for Ember 2.0...
• In general, replace views + controllers with components
• Only use controllers at the route level...
...we're supposed to eschew Controllers and Views in favor of Components. I haven't been able to figure out and/or understand how to generate Components that aren't direct parents of the components folder, i.e. components/component-name.js.
My current controllers folder looks something like:
/controllers
/account
index.js
edit.js
/business
index.js
Basically, there are sub-folders that group logic based on the sections of the application. How do I accomplish this with just components?
Seeing that components must have a "-" in them, I tried, but get an error...
ember generate component account/index-module.js
You specified "account/index-module.js", but due to a bug in Handlebars (< 2.0) slashes within components/helpers are not allowed.
Do all components have to be like
components
account-index.js
account-new.js
business-index.js
i.e. all in the same folder? This will start to get out of hand with the addition of what I actually consider to be components (things like video-viewer.js, text-editor.js, radio-button.js).
I would really like to have components in sub-folders, but unsure how to do this.
components
/media
/audio
audio-player.js
/video
video-player.js
/text-editing
text-editor.js
editor-toolbar.js
My components folder is already gross and I just got started:
Is it okay to leave the account/business logic in Controllers (seeing that it does say you should only use controllers at the Route level)?
I'm really confused about this "all components, all the time" convention.
Ok, so I had the same problem and as of ember 1.9-beta.3 (that's the version I tested). It is possible to have components nested under resource directories.
That means that you can have a "user" route or resource. And let's say you have a component which you only want to use with the user resource, so you want to put the component under the resource directory.
The way to do it is to put the component under the resource directory app/pods/user/component-name/template.hbs. The important part is to remember that components must have a dash in their name. It can't be just .../user/component it has to be .../user/component-name with a dash. Then you can use the component as {{user/component-name}} in your templates.
Also I think this is only possible when you're using the pod structure.
Ok, I think this question/answer needs a bit of an update for 2019. I have been using Ember for all of about a month, and my components folder has already become a pigpen. And the tutorial and main API docs don't really cover how to organize your components.
So I did a search of course. And the only answers I could find (like this one) are from around 2014-2015, and don't reflect modern Ember. I was about to accept my fate when I found this in the Ember syntax conversion guide.
(Note to the Ember folks: This is an important issue, one that almost every new user will encounter. It should feature a bit more prominently in the documentation. Maybe not the tutorial, but definitely in Components section)
You can in fact generate components under a sub-folder in Ember as such:
$ ember generate component foo/bar-baz
installing component
create app/components/foo/bar-baz.js
create app/templates/components/foo/bar-baz.hbs
installing component-test
create tests/integration/components/foo/bar-baz-test.js
So that's great, the files are created under components/foo and templates/components/foo. And to resolve the name of the component for use in another template, you can use either the old style syntax:
{{foo/bar-baz }}
Or the new style angle bracket syntax:
<Foo::BarBaz />
As the assertion suggests this is due to Handlebars 1.x, and will be available soon.
Ember 1.9 beta builds currently support this, though I'm not positive if ember-cli's resolver would work with it right now. You can read more about Handlebars 2.0 here.
Using a pods structure will also help with organization, and I believe is going to be the recommended strategy going forward.
For now, I'd suggest not to worry about it! Remember the transition plan will be smooth, and as the official releases come out for Ember and Ember CLI, you'll get deprecation warnings.