These are chat archives for systemjs/systemjs

27th
Jul 2017
Andrei Balmus
@abalmush
Jul 27 2017 07:44
Hello guys, please help. I’m trying to create a vendors bundle using builder:
builder.bundle(‘js/**/* - [js/**/*]’, ‘src/dist/vendors.bundle.js’, bundleOptions)
and app:
builder.bundle(‘js/app.js’, ‘src/dist/app.bundle.js’, bundleOptions)
for some reasonce all dependecies are presented in app.js as well as in vendors, what I’m doing wrong?
both files are very big :(
Luke Crooks
@crooksey
Jul 27 2017 10:30
Im having trouble importing html files and passing them to angular2 components in order to use systemjs-builder with the text plugin, how has everyone here bundled there template code using angular4? This is what I have tried: systemjs/plugin-text#49
Andrei Balmus
@abalmush
Jul 27 2017 11:00
@crooksey I aslo use this plugin and no issues just importing files like this: import template from ‘/template.html!text’;
Luke Crooks
@crooksey
Jul 27 2017 14:42

Thanks, after changing my tsconfig to use "system" as opposed to "commonjs" this seemed to work, however, my console now complains of things that worked fine with commonjs, such as: "Cannot read property 'forRoot' of undefined" where I do:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
NgbModule.forRoot(),

Where I have this in system.config.js as:

'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',

Now I am using system in my tsconfig, do I need to do anything else to load these modules in my app.module.ts ?

this is my tsconfig.json:
{
    "compilerOptions": {
        "target": "es5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": true,
        "noImplicitAny": false,
        "lib": [ "es2015", "dom" ],
        "suppressImplicitAnyIndexErrors": true,
        "typeRoots": [
            "./node_modules/@types/"
        ]
    },
    "compileOnSave": true
}
Joshua Wilson
@jwilson8767
Jul 27 2017 16:35
@crooksey Change import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; to import NgbModule from '@ng-bootstrap/ng-bootstrap'; and it should do what you're expecting. Check out the MDN docs on es6 imports for more info.
Luke Crooks
@crooksey
Jul 27 2017 16:39
Thanks @jwilson8767 I tried that, but I get a "has no default export." warning
I think this package has several mini packages, and from what I have read, I need to map each one separately
Luke Crooks
@crooksey
Jul 27 2017 16:47
(which is a real ball ache)
Joshua Wilson
@jwilson8767
Jul 27 2017 17:20
@crooksey Oh! I think that package is doing something funny with their exports. I think you actually need what they gave in their readme:
```
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
Actually, that may not be helpful due to what their main js file imports