Angular2 and GitHub pages quirks [Solved] [VICTORY!]

Code Feedback
1

I have encountered some odd behaviour porting a Markdown previewer written with Angular2 to GitHub Pages.

Everything works fine locally, and occasionally works via gh-pages.

When there is a problem, Chome dev console reports:

Error: Error: XHR error (404 Not Found) loading 
http://jacksonbates.me/node_modules/marked/lib/marked.js(…)

So I have gone back into the system.config.js file that maps the marked library to the target file path and added ./ to it, and that worked…once

Then I ran it again and got the same error message.

Then I went back in and changed the same path to have ../ in front of it instead, and then that worked once…then I got the same message again.

Basically, I can keep going back and making a tiny change to the system.config.js file and it will work once.

Any ideas about a more persistent fix?

2

Found this last night. Maybe this can help. Just skimmed though.

3

Hmmm, I didn’t use Cli to set it up, so I’ll have to see if I can retroactively get Cli working on an existing project. Maybe there is something specific to their gh-pages build I’m missing and isn’t obvious when doing it manually.

Thanks for the link. I’ll report back.

Edit

Adding Cli retroactively may not be possible. Gonna rebuild it with Cli and a little copy-pasta…

4

http://jacksonbates.me/ng-markdown/

That was not easy…

So, my initial install of Angular Cli was borked. I spent a good 2 hours tweaking typings.ts, system-config.ts, angular-cli.build.json and a bunch of other things to try and get the Zone module recognised, and it was just a fresher install that was needed…

Then I had to jump through all those hoops again to get Marked installed.

Then getting the gh-pages deployment working was the final issue.

I still can’t seem to set the text area size with CSS, even though that worked fine in my original app yesterday…but I’ll settle for hard-coded HTML textarea rows which doesn’t work on mobile.

Here were the most helpful things that solved my problems…left for future generations.

Resources used

  1. Needing a clean updated version of Cli: https://github.com/angular/angular-cli#updating-angular-cli

  2. Get third party modules working with Cli: https://github.com/angular/angular-cli/wiki/3rd-party-libs

  3. Using marked in Angular 2: https://www.reddit.com/r/Angular2/comments/4s2xda/keep_getting_errors_trying_to_import_marked_into/

  4. gh-pages deploy issue: https://github.com/angular/angular-cli/issues/1409

5

Wow cool!

Was it really that hard? Oh my…

I’ve bookmarked your post, for future reference :slight_smile:

6

I think the difficulty comes from everything being new to me. Because I haven’t used anything with any real build process before, figuring out all the ‘wiring’ took some getting used to.

Also, knowing that it is in beta makes it difficult to figure out whether the problems you are facing are just you, or are part of the growing pains of using immature software.

It’s particularly tricky because most people running into and solving the problems you face have been working with Angular2 for a while, and have a good foundation in Ang1/Ember/React. So when they pose their solutions to each other, they assume others coming across their solution have plenty of context and can join the dots relatively easily. Jumping in the deep end as a relative new-comer is hard, since a lot of solutions tell you what to do, but not what effect that should have, or why it is supposed to work, so I found that I had to try dozens of solutions because I couldn’t determine the appropriate one for me.

I got there in the end, and learned a bit about how build tools do their magic, but it was a slog!

Edit

It was much easier to implement this in React, but I still prefer A2 so far :slight_smile:

7

Thanks for these resources.

I did the MD Previewer and Camper Leaderboard prior to learning about Angular CLI, so now I’m gonna have to do exactly what you did. I hope your suffering will help me avoid the slog! :smile:

1 Like