The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

Mike Kabala (8) [Avatar] Offline
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 (219) [Avatar] Offline
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
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 (219) [Avatar] Offline
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 that has Angular CLI version of code samples.

I recorded a video on how to generate a new Angular project with Angular CLI:
384686 (11) [Avatar] Offline
I get a load of 'peerInvalid' errors when I run npm install:using the supplied package.json


How do I fix this?
Yakov Fain (219) [Avatar] Offline
I assume that you're getting issues with the route_samples project. Have you tried router samples from this site?

Also, there is a version for Angular CLI-generated projects here:
384686 (11) [Avatar] Offline
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 (219) [Avatar] Offline
I've updated the dependencies section in the package.json and now this app starts fine. See here:

Let me know if this helped.
384686 (11) [Avatar] Offline
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
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 (
at Object.getSourceMappingURL (
at printSourceFileOrBundle (
at emitJsFileOrBundle (
at emitSourceFileOrBundle (
at forEachEmittedFile (
at Object.emitFiles (
at emitWorker (
at runWithCancellationToken (
at Object.emit (
at transpileModule (
at Object.transpile (
Error loading
at addToError ( [<root>]
at linkSetFailed ( [<root>]
at [<root>]
at ( [<root> => <root>]
at [<root>]
at Zone.runTask ( [<root> => <root>]
at drainMicroTaskQueue ( [<root>]
at XMLHttpRequest.ZoneTask.invoke ( [<root>]"
Spent 3 days, but can't find the answer. Problem start from Router example.. Help please..
Yakov Fain (219) [Avatar] Offline
Please don't use code samples with SystemJS. Use code samples that use Webpack, see the folder Angular4 at
573285 (3) [Avatar] Offline
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 (219) [Avatar] Offline
Have you tried the cli version of code samples?
573285 (3) [Avatar] Offline
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?