lmeijdam / angular-umd-dynamic-example

Angular UMD example of loading new modules dynamically
174 stars 57 forks source link

library dependencies not resolved when loading #10

Open lorenjerickson opened 5 years ago

lorenjerickson commented 5 years ago

This may be related to https://github.com/lmeijdam/angular-umd-dynamic-example/issues/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?

lorenjerickson commented 5 years ago

Update on this. I realized belatedly that just moving where the UMD bundles are physically located relative to the parent app doesn't change the fact that they're still loaded over http. So i get the same result (above) whether the modules live under the parent app's filesystem or if they're hosted somewhere else. So my issue is starting to sound more like #9.

The only think I can tell that is different about how I approached this is that my module library was not built with --prod because that option is not valid for library projects, only for application projects. Or more precisely, when that flag is passed the compiler looks for the standard environment config files which don't exist for a library project. What am I missing?

foxtrot commented 5 years ago

Hi,

I came across the same issue playing with this - My solution was to import the Angular module I needed in my library's module.ts as usual:

import {FormsModule} from '@angular/forms';

Doing just this will result in the 404 you mention, you must also add it to the Module loader service (module.service.ts):

import * as AngularRouter from '@angular/router';
import * as AngularForms from '@angular/forms';

...

        SystemJS.set('@angular/router', SystemJS.newModule(AngularRouter));
        SystemJS.set('@angular/forms', SystemJS.newModule(AngularForms));

Hope this helps you.