onehungrymind / ng2-named-router-outlets Goto Github PK

A simple Angular 2 app demonstrating parallel named router outlets.

TypeScript 69.81% JavaScript 9.91% CSS 8.00% HTML 12.28%

ng2-named-router-outlets's Introduction

Named Router Outlets in Angular 2

An app that shows conference speakers and their bios. The purpose of the project is to showcase named parallel router outlets using the Angular 2 Component Router. It is built using the Angular CLI.

Getting started

You will need to have NodeJS and NPM installed via NodeJS.org
Run the following commands, starting in your preferred projects directory:

git clone https://github.com/onehungrymind/ng2-named-route-outlets.git
cd ng2-named-router-outlets
npm i
npm start # or ng serve

Navigate to http://localhost:4200 to view the running app. File watching is automagically enabled.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive/pipe/service/class.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via ng serve.

ng2-named-router-outlets's People

Contributors

Stargazers

Watchers

ng2-named-router-outlets's Issues

default named outlet

@simpulton, why do we need this extra url param list:speakersList even if we have it already defined in routes?

{ path: 'speakersList', component: SpeakersListComponent, outlet: 'list' }

Actually, I'm trying to place an "title" named outlet on top of page and just show the page (route) title, but don't need any logic in url. Something like ui-router's Named Views. Is it possible?

Thanks!

Hi I tried to run this app, but the page keeps showing “Loading…”
in the console I got :
Uncaught TypeError: Cannot read property ‘prototype’ of undefined
at extends (main.bundle.js:52593)
at main.bundle.js:52617
at Object. (main.bundle.js:52711)
at __webpack_require (inline.js:53)
at Object. (main.bundle.js:52806)
at webpack_require (inline.js:53)
at Object. (main.bundle.js:73393)
at webpack_require (inline.js:53)
at Object. (main.bundle.js:72515)
at webpack_require (inline.js:53)
Please your help is appreciated.
Thanks.

getting the below errord

ncaught TypeError: Cannot read property 'prototype' of undefined
at __extends (snack-bar-container.js:4)
at snack-bar-container.js:28
at Object. (snack-bar-container.js:122)
at webpack_require (bootstrap d0d9021…:52)
at Object. (snack-bar-ref.js:70)
at webpack_require (bootstrap d0d9021…:52)
at Object. (menu.js:40)
at webpack_require (bootstrap d0d9021…:52)
at Object. (icon.js:264)
at webpack_require (bootstrap d0d9021…:52)

During instaling (npm i) get error fatal: reference is not a tree: 7e55907cd54a2e91b96d25a660acc6a2a6453f54

During instaling (npm i)

i get error
fatal: reference is not a tree: 7e55907cd54a2e91b96d25a660acc6a2a6453f54
please help
thanks

not found image 404 errors and material requirements

Hi
I'm unable to reach the pictures and it just comes up with a black box icon. In the cosole I get the below message when the browser tries to load the images -

16:29:45.731 pele.jpg:1 GET http://localhost:4200/portfolio/players/assets/pele.jpg 404 (Not Found)
16:29:45.732 maradona.jpg:1 GET http://localhost:4200/portfolio/players/assets/maradona.jpg 404 (Not Found)
16:29:45.734 buffon.jpg:1 GET http://localhost:4200/portfolio/players/assets/buffon.jpg 404 (Not Found)
16:29:45.743 lothar.jpg:1 GET http://localhost:4200/portfolio/players/assets/lothar.jpg 404 (Not Found)
16:29:45.746 anotonio.jpg:1 GET http://localhost:4200/portfolio/players/assets/anotonio.jpg 404 (Not Found)

I dont have materials installed. Do I need it for the router outlets to work. I removed all scaffolding and into a new project, so I'm doing with the bare minimum. please see my env below. Am I missing something.
my url loads correctly - http://localhost:4200/portfolio/players/(list:playersList//bio:none)

and on the right side, I get please select a player, no player selected.
thanks

this is my env.
/ ___ | | | | (| | || | | (| | | | || |_ | |
// __| ||_, |_,||_,|| _|||
|___/
@angular/cli: 1.4.2
node: 6.11.3
os: win32 x64
@angular/animations: 4.3.1
@angular/common: 4.3.1
@angular/compiler: 4.3.1
@angular/core: 4.3.1
@angular/forms: 4.3.1
@angular/http: 4.3.1
@angular/platform-browser: 4.3.1
@angular/platform-browser-dynamic: 4.3.1
@angular/router: 4.3.1
@angular/cli: 1.4.2
@angular/compiler-cli: 4.3.1
@angular/language-service: 4.3.1
typescript: 2.3.3

Named outlets are not working with route resolve

I have tried the same example with resolve back end API call. The first named outlet works the next one doesn't work. Any idea why it is not working with route-resolve !