New Build throw error with systemjs : app/shared/sdk/models.js 404

[jeansaigne]

Hi guys, first thank you for the work you've been doing.

I'm trying to make this magic happen for an Angular2 application, it's developed from the angular tutorial a week ago; now my LoopBack API application is ready , i followed the instructions to build the SDK in the shared folder (app/shared/sdk). The SDK is successfully created as i can see, but when i simply try to use it in my app.module.ts like below (as it's exposed in the wiki documentation):

import { SDKModule } from './shared/sdk/index';

and

@NgModule({
    imports:      [ BrowserModule, FormsModule, HttpModule, routing, Ng2BootstrapModule, SDKModule.forRoot() ],
    declarations: [ AppComponent],
    providers: [ ],
    bootstrap:    [ AppComponent]
})

It raises 2 errors i don't understand in console:

zone.js:1274 GET http://localhost:3001/app/shared/sdk/models.js 404 (Not Found) and zone.js:1274 GET http://localhost:3001/socket.io-client 404 (Not Found)

All i did for now is building the SDK and importing the SDKModule. I feel like a systemjs misunderstanding from my part but not sure. Hope you'll be able to help.

Thank you by advance.

[jonathan-casarrubias]

Hi @jeansaigne thanks for reaching out.

Hey so, if you are trying to import a model, in some other place, change:

import {Model} from 'shared/sdk/models'

for

import {Model} from 'shared/sdk/models/index'

also... If you use realtime functionalities, you also need to install socket.io-client, both the library and the type.

as stated in here: https://github.com/mean-expert-official/loopback-sdk-builder/wiki/2.-Setup-SDK

Cheers Jon

[jeansaigne]

Thank you @jonathan-casarrubias for rapidly answering.

I already installed socket.io-client and typings coming with it.

In order to import a model as you described me to, maybe i should get rid of the 2 errors raised by the simple import of SDKModule ?

[jonathan-casarrubias]

@jeansaigne no worries, I'm glad to see more people involved in this project.

Hey so... The SDK provides you with a SIM set + FireLoop.

But only Services and FireLoop are provided through the SDKModule, not the Models, nor Interfaces.

The reason is that the Models are not services, nor components. They are simple classes uncoupled with any framework, because they are simply models.

So, in this order of ideas, when you import within the app.module the SDKModule.forRoot() you get only valid Angular 2 Services, Components, etc. but not the Models. Therefore you need to keep importing the models within your components.

Anyhow, you also still need import the Services declarations within your components, but not to import it, these are used for Typing, for instance:

import  { MyService } from './shared/sdk/services/index';

....
  constructor (private myService: MyService) {
  }
....

As you see you still need to import the service, more likely because the service happen to be a Class also, therefore is also a Type.

So in order to make everything clear, I know there are many concepts.

1.- You tell angular 2 to scope the SDKModule to be importing within the app.module 2.- You import your Models within your components because these are simple classes that represent your API Models. 3.- You import your services within your components not because of the DI -that is point 1- but because these services are also classes that works as Typings declarations within your components.

I hope this helps you understand the different pieces.

cheers! Jon

[jeansaigne]

Oh i think we misunderstood eachothers, i'll explain myself in simple words:

All i did for now is building the SDK in my angular2 app in app/shared/sdk, and importing it into my app.module.ts like so:

import { NgModule, ApplicationRef }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { HttpModule }    from '@angular/http';
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
import { SDKModule } from './shared/sdk/index';

import { AppComponent }         from './app.component';
import { routing, appRoutingProviders }     from './app.routing';

@NgModule({
    imports:      [ BrowserModule, FormsModule, HttpModule, routing, Ng2BootstrapModule, Account, SDKModule.forRoot() ],
    declarations: [ AppComponent],
    providers: [ appRoutingProviders],
    bootstrap:    [ AppComponent]
})

export class AppModule { }

And this is it, nothing else. It already raises me 2 similar errors:

So obviously zone.js is trying to use the model.js while i didn't even try to load/use any model in my app.

This is driving me crazy, i feel like i'm stupid, but i won't give up on this.

[jonathan-casarrubias]

Hi @jeansaigne, No worries you'll make it.

I have a question for you since you are trying to import "Account"... Where is that coming from?

I don't see any import for that Account, is that a model?

[jeansaigne]

Ho sorry for this,

i deleted the "import { Account } from './shared/sdk/models/index' but i forgot to delete the imports as you pointed; i did that after you advised me to import models, but at first i didn't import any models. As i said before just consider there is only the SDKModule imported.

[andy-pal]

+1 I'm getting the same exact error.

[jonathan-casarrubias]

Hey @andrewpal thanks for joining the conversation,

I'm unable to replicate, but this has been happening for months, every webpack, angular-cli, typescript update things like this happen.

So, I truly believe you both have this issue, even though I can not replicate.. So since I have some experience with these annoying issues, that is the reason of my questions.

I have reviewed all of the code and the only part inside the SDK that imports a model without explicitly defining the model is within the base.service

Could you both do me a favor, please find inside sdk/services/core/base.service.tsand replace the following line

import { AccessToken } from '../../models';

for

import { AccessToken } from '../../models/BaseModels';

That is the only import that may lead to the models.js file not found issue.

Please share your result here so I know how to handle the issue and set this as verified bug. Also I may be able to integrate this within the next hours in version 2.1.0-beta.11

Cheers Jon

[andy-pal]

@jonathan-casarrubias

Changing to /BaseModels does in fact eliminate the 404.

[jonathan-casarrubias]

@andrewpal does it also work if you use /index instead of /BaseModels?

[andy-pal]

Yep, that works as well.

[jonathan-casarrubias]

Awesome, thanks I believe that is a better option because the AccessToken model can come from 2 different places, the index already manages that... So, I'll choose it instead.

I have done the change I will be releasing ASAP

Cheers. Jon

[andy-pal]

Thanks for fixing!

[jonathan-casarrubias]

Fixed