We Keep Coding

Separate context for different stories in storybook

I'm using storybook to be the showcase of different components. However I've found that the context of different components in storybook are not separated. E.g. in one of the story, I register the mocked services in the Dependency Injection, and in another story, I will get the already injected mocked services from the previous story.
I've also found that the CSS files being imported are also being kept in the memory. If there is some global CSS styles, once it is being imported in the first story, I could also get it in the second one without import it again.
However this is causing problems, e.g. the Dependency Injection library will complain that a service is being injected twice.
It seems that all the stories in the storybook shares the same global context. Is there any way to separate the context, so that each of the stories has its own context which is getting destroyed each time when people switch the story?
Please let me know if you need any extra information, e.g. storybook configuration or so.
Thanks in advance.

How do I access a component's HTML outside an Angular v6 app?

I have created a component outside app using the Angular CLI (in src folder)
../src> ng g c test
And added the component import in app-modules.ts
I'm not able to access the test.html file separately (I want to execute the code in the ngOnInit method of test.ts) as below
http://localhost:4200/<<context_path>>/test.html
I even created HTML and a JavaScript file and tried to access, however that didn't work.
Kindly let me know is it possible to access the HTML?
Thanks for the response. Below the screenshot
Application screenshot
i want to access like http://localhost:4200/test.html

this called bad approach you shouldn't create components out of src folder i don't mean by that is not gonna work but not recommended to do that src folder excite to gather all your project component to make it easy to access and sharing the data between them.
alternative solution 1: you can delete the component you made out of src folder and recreate another one in app folder or simply move the component files/folder in the app that's the correct approach.
then you can access to it from any other component in your app by import it in ts file
alternative solution 2: if you want just to sharing data or executing method/function that maybe shared by two components that holds some data you can use services or event binding.
alternative solution 3: if your problem with routes and you want to naviagte to this test.html for recommended approach firstly move it inside the app folder like alternative solution 1 then use routes and it's config to create a route for this component.
notice: you couldn't inject only html file inside angular components it must has his own ts file that holds the component config #Component({...}) that's how angular knows that's component excite and how to inject it to other components.

Loading multiple modules under same parent route in Angular

I' am looking for a way through which I can load multiple modules under same path in Angular. For example, consider I have three modules AModule, BModule and CModule each having its own RouterModule.forChild call. Now I want to mount all these modules under say site route.
One way I have achieved this thing is by wrapping routes in RouterModule.forChild call under site route as follows:
RouterModule.forChild([
{
path: 'site',
children: [{}] // children goes here
}
])
I don't know whether this approach is correct but it is working fine. The only issue which this approach is that I have to specify canActivate in every module I want to mount under site. While this is not a problem, I was looking for a cleaner solution.
I know there is a property loadChildren which could be used to load modules lazily. But I want to load modules eagerly.
I' am using AngularCLI which splits code of module I specify in loadChildren in a separate JavaScript file which is not I want.
I' am using AngularClI v1.2.0 and Angular v4.2.5.
Any help is highly appreciated.
Thanks

I'm not entirely clear on your goal and what you are ultimately trying to achieve, but here are a few thoughts.
You can use the loadChildren and "lazy loading" to load on demand OR eagerly. If you select eagerly loaded routes, as soon as your main route is loaded and your first view is displayed, the other modules marked for eager loading are immediately loaded asynchronously.
I have an example of that here: https://github.com/DeborahK/Angular-Routing in the APM-Final folder.
I'm not clear on why you don't want module splitting. It can significantly improve the startup performance (time to display of the first page) of your application.
In addition to canActivate there is also a canActivateChild so you can put this on the parent and not have to repeat it for each route. The docs for that are here: https://angular.io/api/router/CanActivateChild

vuejs include javascript library in spa

i'am creating spa application using vuejs and i find out that i have 3 option in loading my javascript library like bootstrap.js or jquery.js and other javascript library:
1.
first is by include all javascript library that i will use in my application in index.html where my vuejs application will live but i find that there is some javascript library that not working to well
ex: there is some javascript library that calculate page height by selecting some div with specific id="page-container", but that div not loaded when page is rendered from server, so at that moment the javascript will throw error since id="page-container" not exist yet.
2.
second is by adding it like this to all my javascript library js
// before you use your files in some components,you should package them
// your local files
export default { //export your file
your_function(){ // defined your function
...
}
}
// now your can use it
// your component file
<script>
import local_file from 'your_file_relative_path'
//now you can use it in the hook function
created(){ //or other hook function
local_file.your_function() //call your function
}
</script>
but that mean i need to change every javascript library that i use...
3.
third is by adding it using npm, and just in the vue component import it, it works okay and feels more natural but not all my javascript library are in npm, some of them is admin template related that i bought from themeforest and will never be in npm.
so which one is a better way or maybe there is much more better way that those 3 option that i find out? its hard to find any tutorial or discussion that mention adding other javascript library to spa vuejs most of them just put a bootstrap into index.html and done.

Well, If your library exist in NPM, then this is the best option, because then you have this option to import only the part of the script that you need for certain components, for example, fontawesome library, you can import only the icons that you need instead of import all of them!
but if your script is not in NPM, the best option is to run your script in beforeMount or beforeCreate of the component that the script needed to run.
the third way which is add the link reference on html is not really suggested, since it will be global and will reduce the performance.

Angular 2 router config lazy loaded modules

I'm trying to create a service which uses router configuration to create map of routes based on components. It works fine when you don't use lazy loaded module routes.
But I don't know how to get routes from lazy loaded module. In route object there is just loadChildren string and that's it. I digged little bit into angular2 internals and it is using RouterConfigLoader internally to load lazy loaded routes. But it is not exported from RoutingModule, so I suppose it should not be used from the outside.
Is there any public API which would help me with that?
Thanks

But that's the whole idea of lazy loaded modules. No reference exists to the lazy loaded module, so it ain't loaded on load (can I use the word load some more?).
Which also means no routing is available. Based on the string, angular2 loads the (entire) module, and injects the routing on the fly. If you want to know the routing beforehand, you should either not use lazy modules, or do it by hand