Not working on default import

[jkuri]

Hi,

I am writting here, to not spaming the angular-cli repo :) Is this library something missing or did I forgot to import something... when installing with default options with ng libs install ng2-cli-test-lib I get the following error in the browser:

GET http://localhost:4200/ng2-cli-test-lib 404 (Not Found)
Error: XHR error (404 Not Found) loading http://localhost:4200/ng2-cli-test-lib(…)

Is it possible to solve this updating this test lib or I need to import anything else in the lib install procedure? Help please.

re, Jan

[NathanWalker]

I will try it with your PR in the next couple days (if it's not merged soon). Likely the System config needs to be modified or mapped correctly as well.

[jkuri]

Yes, it could be done with mapping ng2-cli-test-lib in systemjs config, but I don't want to update the index.html file. If you find any other solution please let me know.

[jkuri]

I think you should create this lib to be compatible with systemjs and not webpack, because angular-cli is based on systemjs. Until then I cannot use this library to test it with auto injection. Please see https://github.com/systemjs/builder.

[NathanWalker]

Thanks for this: https://github.com/NathanWalker/ng2-cli-test-lib/pull/3

I'll bump the version and publish hopefully sometime this weekend so we can try it.

[NathanWalker]

@jkuri I added you as a collaborator so you can try some things as well.

[jkuri]

thanks.

[NathanWalker]

I've tried republishing with system format and it generates a file like this:

System.register(['angular2/core'], function(exports_1) {
    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
        return c > 3 && r && Object.defineProperty(target, key, r), r;
    };
    var __metadata = (this && this.__metadata) || function (k, v) {
        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
    };
    var core_1;
    var TestService, TestService2;
    return {
        setters:[
            function (core_1_1) {
                core_1 = core_1_1;
            }],
        execute: function() {
            TestService = (function () {
                function TestService() {
                    console.log('test service instantiated!');
                }
                TestService = __decorate([
                    core_1.Injectable(), 
                    __metadata('design:paramtypes', [])
                ], TestService);
                return TestService;
            })();
            exports_1("TestService", TestService);
            TestService2 = (function () {
                function TestService2() {
                    console.log('test service 2 instantiated!');
                }
                TestService2 = __decorate([
                    core_1.Injectable(), 
                    __metadata('design:paramtypes', [])
                ], TestService2);
                return TestService2;
            })();
            exports_1("TestService2", TestService2);
        }
    }
});
//# sourceMappingURL=test.provider.js.map

Which doesn't look quite right. And causes these errors when trying to publish:

src/app/directives/test.directive.ts(1,37): error TS2307: Cannot find module 'angular2/core'.
src/app/pipes/test.pipe.ts(1,20): error TS2307: Cannot find module 'angular2/core'.
src/app/providers/test.provider.ts(1,26): error TS2307: Cannot find module 'angular2/core'.

which of course prevent the publish from completing successfully.

[jkuri]

will check this now...

[jkuri]

If you change back to commonjs and remove node_modules dir, did npm install works for you?

[NathanWalker]

Yep

On Sat, Jan 9, 2016 at 1:52 PM Jan Kuri notifications@github.com wrote:

If you change back to commonjs and remove node_modules dir, did npm install works for you?

— Reply to this email directly or view it on GitHub https://github.com/NathanWalker/ng2-cli-test-lib/issues/2#issuecomment-170285407 .

[NathanWalker]

You may need to remove the prepublish under scripts in package.json.

This is one of the frustrating things about having a repo to be used as an example to try out the lib code in addition to also having publish settings. Both configurations have to be different.

[jkuri]

If you agree I will make a fresh test lib with ng new like I did in https://github.com/jkuri/ng2-cli-testlib and it uses systemjs by default. If you don`t agree, please say... but this library is from the base designed to work with webpack and not systemjs.

[NathanWalker]

sounds good to me! Change anything you'd like!

[jkuri]

okay

[jkuri]

Ok, I think that`s it. When you will have time you can check it out if everything looks okay to you and then publish to npm.

[NathanWalker]

Looks good on first glance, thank you! I noticed you ditched the test.styles.ts, TestStyles service, which is understandable since that was a bit experimental and I don't think your flow supported that.

I do think the flow should handle styles and styleUrls though, but not a huge deal.

[NathanWalker]

Also to confirm, I believe this should be providers right? https://github.com/NathanWalker/ng2-cli-test-lib/blob/master/ng2-cli-testlib.ts#L14

If your flow is looking for services, it should not, as this is properly named providers in the framework.

[jkuri]

it runs properly... just must have angular-cli installed... then go to directory and run ng serve

[NathanWalker]

ah ok, 1 min!

[NathanWalker]

Ok pull that now... It has an issue loading the src files for the lib itself... try doing ng build, and ng serve... Please push a fix if you know :)

[jkuri]

okay, will do that now.

[jkuri]

Ok, check it now. I believe this is the proper way since we're using angular-cli. Pull and run ng serve. It should work. SystemJS may be painful to configure but when it works, it works okay...and it`s default loader when dealing with angular-cli.

[NathanWalker]

Ok yep that works, nice job :+1:

One thing to keep in mind is that the ng libs flow and annotating the user's files should not be dependent upon on whether the user is using angular cli to build and serve in their project setup.

Also, lib creators right now are struggling a bit with how to package their libs. Should they make them compatible with System or webpack? Can we distribute for both? Do we need to?

I would greatly appreciate your opinions.

[jkuri]

ng libs flow is dependent on angluar-cli itself ... ng is the command from angluar-cli. If users will be using angular-cli (ng) to generate their projects the ng libs command will be (hopefully) included in it.

Hm, from official angular.io site: "...We're using SystemJS to do that. There are other choices and we're not saying SystemJS is the best. We like it and it works." ... I believe the maintainers of angular-cli will not change their minds and change it to webpack. So, if creators of packages wanted to their lib works with angular-cli should be built compatible to SystemJS.

[NathanWalker]

Certainly ng libs is dependent on angular-cli, however my hope was that one could use the cli where they needed. If they liked it's ability to auto-annotate their src, then they could use just the ng libs command to help bring in libs with auto-annotation, but this would not mean they need to use it for their build, etc.

Hmm, ok I guess SystemJs for now.

[NathanWalker]

Btw, why 2 tsconfig.json files? One in the root, and another in /src?

[jkuri]

Got it, yes, the flow can be built in way that can detect which loader is in use, but I dont't believe is ever be merged into a angular-cli .... maybe I should create a new repo for this :)

[NathanWalker]

lol, hmm. For something to do just what ng libs does?

Btw, I just pushed some cleanup which fixes the styles, etc. :+1:

About to publish again with the new setup.

[jkuri]

tsconfig.json in src/ is config for ng command... the other which is outside is for our lib so tsc command know how to compile it. I started this lib with ng new command.

Yes, I think it's not "just".. for now its about 500 lines of code and it's not even nearly finished... and it works only for systemjs.

[jkuri]

Its not even confirmed that ng libs will be included in it. If it wont be, then I will create a new repo and create universal loader.

[NathanWalker]

I would vote for a new repo then. At least we could work together and let others get involved to develop it in isolation with the future thought to propose it be merge in with angular cli. I'll help in every way I can.

[jkuri]

Ok, let's wait to see if it will be included. I can rework the code from this ember-cli based flow to work with the new universal loader if it will be needed. You will surely be added to this repo when will be created. I will let you know.

[NathanWalker]

:+1:

Just published 1.1.0 with our efforts. Thanks again, your help is invaluable. https://www.npmjs.com/package/ng2-cli-test-lib

[jkuri]

:+1: Thanks. No problem mate. Note that I am also a newbie in Angular2.

[NathanWalker]

Well you're a pro in my book :) Enjoy it! I couldn't be more excited about the future with it; let's help make it great!

[jkuri]

Hi Nathan. Please pull, try to remove node_modules dir from your local repository and try to republish... I continue to develop this ng libs flow and something ain't right, node_modules are included when installing.

[jkuri]

I also moved all dependencies to dev, if that was the problem

[jkuri]

Please checkout my last commit, I added make-packages.js script which generates SystemJS readable script format in bundles/ directory and I can then use it in ng libs. Please republish the package to npm. Thanks.

[NathanWalker]

Perfect, thanks. Just published 1.2.0 now.

I'll be out today so hopefully that will work for you. If not, I'll check back tonight and can try more then.

[jkuri]

Thanks. No problem, tyt.

[NathanWalker]

I just npm install ng2-cli-test-lib into another shell project and looks like it worked. It does bring down the bundles directory now and does not include node_modules anymore :+1:

[jkuri]

It worked right away

[NathanWalker]

Hooray!! #jumpforjoy

[NathanWalker]

We should both write a detailed blog post (collab on one) about all this and suggest to the community a way forward with all lib publishing regarding systemjs and webpack and how to use with this tool. Also welcome suggestions to improve as it is early in the experimentation of all this.

When you can, please email instructions on how to use ng libs at this point (or whatever else the command will be in a private repo) so I could experiment tonight with the flow as well, thank you for everything!

[NathanWalker]

email: walkerrunpdx [at] gmail