Mike Kabala (8) [Avatar] Offline
#1
OK, I admit officially that I am an idiot! When I try to run the router_samples code, the <app> tag never gets replaced by the module code. I modified system.config.js to access main.ts as follows:

  packages: {
    'app'                              : {main: 'main', defaultExtension: 'ts'},
    .
    .
    .

  }



When I type npm start in the router_samples directory, the app starts in my browser, but it just displays "Loading ..." and never bootstraps the module.

Can anyone tell me what I am missing. The examples are useless if I can't get them to run.
Yakov Fain (215) [Avatar] Offline
#2
If you just see Loading... on any of the examples, this indicates of some error. The first step to do is to read the error description. Please open your Chrome Dev Tools and check the tab Console to see the error.
If you can't figure out what's wrong, paste the error message in this thread.
Mike Kabala (8) [Avatar] Offline
#3
Thank you, @Yakov Fain. I had neglected to run npm install to create the node_modules directory. Once I did that, the example worked fine.

After it didn't work the first time, I went back to Chapter 2, frantically looking for a npm command I might have missed, but I didn't see that one until I looked at the error messages, as you suggested.

Might I suggest that you put the instructions for how to setup and run a new project in one place, where it can easily be found by Bozos like me? Thanks.
Yakov Fain (215) [Avatar] Offline
#4
While most of the book samples use SystemJS to run code samples, it's easier to start a new project using Angular CLI. We've created a folder extras at https://github.com/Farata/angular2typescript that has Angular CLI version of code samples.

I recorded a video on how to generate a new Angular project with Angular CLI:
https://www.youtube.com/watch?v=VKQEN7IyanU
384686 (11) [Avatar] Offline
#5
I get a load of 'peerInvalid' errors when I run npm install:using the supplied package.json

image

How do I fix this?
Yakov Fain (215) [Avatar] Offline
#6
I assume that you're getting issues with the route_samples project. Have you tried router samples from this site?
https://github.com/Farata/angular2typescript

Also, there is a version for Angular CLI-generated projects here: https://github.com/Farata/angular2typescript/tree/master/extras
384686 (11) [Avatar] Offline
#7
Hi Yakov,

Thanks for your super-fast response. I get similar peerInvalid errors when I try your first link above that I was getting with the code from the Manning site.

I was hoping to avoid the Angular CLI approach till I got that far in the book, but if that's the only other option I'll give it a go.
Yakov Fain (215) [Avatar] Offline
#8
I've updated the dependencies section in the package.json and now this app starts fine. See here:
https://github.com/Farata/angular2typescript/blob/master/chapter3/router_samples/package.json

Let me know if this helped.
384686 (11) [Avatar] Offline
#9
Hi Yakov,

The npm install went OK with the updated package.json, and the page successfully loaded when I started the server.

Thanks very much for your help.
573285 (3) [Avatar] Offline
#10
Chapter 3
Hello, I can't run Chapter 3 sample auction from package.json. Have error in brouser
"Error: (SystemJS) Cannot read property 'base64encode' of undefined
TypeError: Cannot read property 'base64encode' of undefined
at Object.base64encode (http://127.0.0.1:8080/node_modules/typescript/lib/typescript.js:12079:1smilie
at Object.getSourceMappingURL (http://127.0.0.1:8080/node_modules/typescript/lib/typescript.js:73929:46)
at printSourceFileOrBundle (http://127.0.0.1:8080/node_modules/typescript/lib/typescript.js:74550:4smilie
at emitJsFileOrBundle (http://127.0.0.1:8080/node_modules/typescript/lib/typescript.js:74499:13)
at emitSourceFileOrBundle (http://127.0.0.1:8080/node_modules/typescript/lib/typescript.js:74456:13)
at forEachEmittedFile (http://127.0.0.1:8080/node_modules/typescript/lib/typescript.js:74365:30)
at Object.emitFiles (http://127.0.0.1:8080/node_modules/typescript/lib/typescript.js:74446:9)
at emitWorker (http://127.0.0.1:8080/node_modules/typescript/lib/typescript.js:78992:33)
at http://127.0.0.1:8080/node_modules/typescript/lib/typescript.js:78952:66
at runWithCancellationToken (http://127.0.0.1:8080/node_modules/typescript/lib/typescript.js:79043:24)
at Object.emit (http://127.0.0.1:8080/node_modules/typescript/lib/typescript.js:78952:20)
at transpileModule (http://127.0.0.1:8080/node_modules/typescript/lib/typescript.js:96252:17)
at Object.transpile (http://127.0.0.1:8080/node_modules/typescript/lib/typescript.js:96261:22)
Error loading http://127.0.0.1:8080/app/main.ts
at addToError (http://127.0.0.1:8080/node_modules/systemjs/dist/system.src.js:122:7smilie [<root>]
at linkSetFailed (http://127.0.0.1:8080/node_modules/systemjs/dist/system.src.js:692:15) [<root>]
at http://127.0.0.1:8080/node_modules/systemjs/dist/system.src.js:500:9 [<root>]
at Zone.run (http://127.0.0.1:8080/node_modules/zone.js/dist/zone.js:126:43) [<root> => <root>]
at http://127.0.0.1:8080/node_modules/zone.js/dist/zone.js:713:57 [<root>]
at Zone.runTask (http://127.0.0.1:8080/node_modules/zone.js/dist/zone.js:166:47) [<root> => <root>]
at drainMicroTaskQueue (http://127.0.0.1:8080/node_modules/zone.js/dist/zone.js:546:35) [<root>]
at XMLHttpRequest.ZoneTask.invoke (http://127.0.0.1:8080/node_modules/zone.js/dist/zone.js:424:25) [<root>]"
Spent 3 days, but can't find the answer. Problem start from Router example.. Help please..
Yakov Fain (215) [Avatar] Offline
#11
Please don't use code samples with SystemJS. Use code samples that use Webpack, see the folder Angular4 at https://github.com/Farata/angular2typescript
573285 (3) [Avatar] Offline
#12
Thanks for the quick response. But the Angular4 folder does not contain examples combine into chapters. It is difficult to correlate them. Is it possible to somehow run the old example to see how the language itself works, not spend too much time to configure?
Yakov Fain (215) [Avatar] Offline
#13
Have you tried the cli version of code samples?

https://github.com/Farata/angular2typescript/tree/master/chapter3
573285 (3) [Avatar] Offline
#14
Yes, cli_version of chapter3 is work. But I can't see cli version for other chapters. I think as workaround I can copy paste source from other (old) chapters to this cli structure or create new.
Please tell me which decision is better?