deborahk / angular-gettingstarted

Sample Angular application used in the "Angular: Getting Started" course: http://bit.ly/Angular-GettingStarted

Angular-Getting Started

Materials for the "Angular: Getting Started" course on Pluralsight.

APM-Start: The starter files set up for this course. Use this to code along with the course. (Updated for Angular version 14)

APM-Final: The completed files. Use this to see the completed solution from the course. (Updated for Angular version 14 )

APM-Final-v16: The completed files upgraded to Angular v16. NOTE: This code does NOT match the code along from the course. Use it only for reference.

See the README.md file under each folder for details on installing and running the application.

If you have any problems installing or running this code, please post to the discussion board for the course

NOTE: The installation was tested using node v16.15.1 and npm 8.11.0.

LINKS

Here are some links to additional useful materials on YouTube:

Gentle Introduction to GitHub: You'll learn the purpose of Git and GitHub and what a repository is. You'll create a repository, then try out GitHub Desktop and VS Code Git integration to clone, commit, and sync. You'll work with branches, and create pull requests to merge those branches. You'll then publish a website with GitHub Pages.

Gentle Introduction to HTML: You'll learn about HTML elements and attributes, how to structure a page, and use semantic elements to organize your content. You'll see how to build a list and table, add images and navigation, and create a data entry form.

Gentle Introduction to CSS: You'll learn about CSS, where to define styles, CSS syntax, selectors, and the CSS box module. You'll try out CSS layout features and explore how styles cascade. Throughout this course, you'll style a web page.

Gentle Introduction to Bootstrap 5: You'll learn the Bootstrap styling framework and its benefits. You'll try out Bootstrap containers and utility classes. Then walk through how to style a menu and a table, explore Bootstrap's grid system for layout, and how to style a data entry form.

Gentle Introduction to JavaScript: You'll learn where and how to write JavaScript code. You'll examine JavaScript syntax including variables, statements, functions, and objects. You'll discover how to respond to actions, such as button clicks, add content to a web page and change element styles ... all with JavaScript.

INSTALLING THE CODE

The following are detailed instructions for installing the code so you can code along with the course.

0. Ensure you have node installed.

   At a command prompt, type node -v to ensure you have version 14.15.0 or higher before proceeding.

1. Download or clone the code from this repository.

   If you download as a zip file, be sure to unzip it.

2. Navigate to the APM-Start folder (or APM folder if you renamed it).

   There should be a package.json file in this folder.

3. In a command window (or the Command prompt in VS Code), type npm install.

   This creates a node_modules folder and installs all packages from the package.json file into that folder. You may see a few warnings during this process, but you should not see any errors.

4. In the same command window (or the Command property in VS Code), type npm start.

   The application should then compile and launch in your default browser.

If these steps don't work for you, see STACKBLITZ below.

STACKBLITZ

If you want to work through the course without downloading npm or any of the libraries, try the course with Stackblitz by following this link: https://stackblitz.com/github/DeborahK/Angular-GettingStarted/tree/master/APM-Start

Stackblitz does not support reading json files from a folder defined in the angular.json file. Rather, you need to copy the products folder from the api folder to the assets folder. Then modify the productUrl to look in the assets folder: private productUrl = 'assets/products/products.json';

To install packages in Stackblitz, such as bootstrap and font-awesome, you need to use the DEPENDENCIES branch in the Project hierarchy to the left of the code in Stackblitz:

1. Open the DEPENDENCIES node. (You should see the list of existing dependencies such as @angular/common
2. Below the list of dependencies is an input box with the text "enter package name"
3. Enter bootstrap there and press enter.
4. If it asks you to install missing dependencies, click "INSTALL MISSING DEPENDENCIES"
5. Repeat step 3 with font-awesome

Stackbliz has the Angular CLI commands built in. Instead of installing the Angular CLI to your system, right-click on a folder in Stackblitz and you'll see an "Angular Generator" option. Under that menu you'll find the Angular CLI commands.

FAQ

I'm using thead to change the color of the heading and it doesn't work. Why?

Code:

thead {
color: #337AB7;
}

For some reason, the thead no longer seems to work. Use th instead. (This is a CSS issue, not an Angular issue.)

Code:

th {
color: #337AB7;
}

angular-gettingstarted's Issues

Error when Home page is loading.

The home doesn't finish loading. I even took the code for the product-list.component.html from the APM final folder and I got the same error: Here is the error:

zone.js:388 Unhandled Promise rejection: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("
div {
cursor: pointer;
}[ERROR ->]"): StarComponent@5:1
Invalid ICU message. Missing '}'. ("
div {
cursor: pointer;
}[ERROR ->]"): StarComponent@5:1 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("
div {
cursor: pointer;
}[ERROR ->]"): StarComponent@5:1
Invalid ICU message. Missing '}'. ("
div {
cursor: pointer;
}[ERROR ->]"): StarComponent@5:1
at TemplateParser.parse

npm ERR! cb() never called!

When I execute NPM Install I get the following error:
npm ERR! cb() never called!

website refreshing twice.

When tried doing npm start I am seeing the website loading twice. May I know why?

Detail info on Nested routes, Authentication

Hello Deborah,

Many thanks for your pluralsite course for Angular 2 and this GitHub Repo.

I would like to know more about, how to do nested routing, managing Authentication session of user.

I am also confused about '...' syntax in routing.

Please provide some insights.

We need code for angular2-getting started

Please upload code for angular2-getting started

The terminal process terminated with exit code:1

Not able to open Integral terminal

Error while installing libraries

I am attaching the screenshot of terminal and debug log file . Please have a look

npm-debug.log.tar.gz

app.component.html is present but the app.component.ts has an inline template

The file 'app.component.html' is somehow useless. The component has an inline template.

angular 2 or 4

Is it angular 4 or 2? What is the difference b/w it

No 'Access-Control-Allow-Origin' header is present on the requested resource.

Hi,

I am facing CORS error even after adding all the required headers.

headers= new Headers();

createAuthorizationHeader(headers: Headers) {
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Access-Control-Allow-Headers', 'Content-Type');
headers.append('Access-Control-Allow-Methods', 'GET');    

}

getProducts(): Observable<ISurgeon[]> {
    return this._http.get(this._productUrl,this.createAuthorizationHeader)
        .map((response: Response) => <ISurgeon[]> response.json())
        .do(data => console.log('All: ' +  JSON.stringify(data)))
        .catch(this.handleError);
}

Not able to load the page after adding product-list component

Im having the following problem: after creating the product-list component and adding the directive to the app.component, I added to the root module (app.module.ts).
I'm getting a 404 Error. I dont know what else I could be missing:

zone.js:1382GET http://localhost:3000/app/products/product-list.component.html 404 (Not Found)
scheduleTask @ zone.js:1382
ZoneDelegate.scheduleTask @ zone.js:245
Zone.scheduleMacroTask @ zone.js:171
(anonymous) @ zone.js:1405
send @ VM3307:3
ResourceLoaderImpl.get @ platform-browser-dynamic.umd.js:129
DirectiveNormalizer._fetch @ compiler.umd.js:13455
DirectiveNormalizer.normalizeTemplateAsync @ compiler.umd.js:13498
DirectiveNormalizer.normalizeDirective @ compiler.umd.js:13473
RuntimeCompiler._createCompiledTemplate @ compiler.umd.js:16869
(anonymous) @ compiler.umd.js:16807
(anonymous) @ compiler.umd.js:16805
RuntimeCompiler._compileComponents @ compiler.umd.js:16804
RuntimeCompiler.compileModuleAndComponents @ compiler.umd.js:16741
RuntimeCompiler.compileModuleAsync @ compiler.umd.js:16732
PlatformRef.bootstrapModuleWithZone @ core.umd.js:6954
PlatformRef.bootstrapModule @ core.umd.js:6936
(anonymous) @ main.ts:5
(anonymous) @ main.ts:5
(anonymous) @ main.ts:5
__exec @ system.src.js:1510
entry.execute @ system.src.js:3926
linkDynamicModule @ system.src.js:3252
link @ system.src.js:3095
execute @ system.src.js:3432
doDynamicExecute @ system.src.js:798
link @ system.src.js:1000
doLink @ system.src.js:652
updateLinkSetOnLoad @ system.src.js:700
(anonymous) @ system.src.js:512
ZoneDelegate.invoke @ zone.js:232
Zone.run @ zone.js:114
(anonymous) @ zone.js:502
ZoneDelegate.invokeTask @ zone.js:265
Zone.runTask @ zone.js:154
drainMicroTaskQueue @ zone.js:401
ZoneTask.invoke @ zone.js:339
zone.js:388 Unhandled Promise rejection: Failed to load app/products/product-list.component.html ; Zone: ; Task: Promise.then ; Value: Failed to load app/products/product-list.component.html undefined
consoleError @ zone.js:388
_loop_1 @ zone.js:417
drainMicroTaskQueue @ zone.js:421
ZoneTask.invoke @ zone.js:339
zone.js:390 Error: Uncaught (in promise): Failed to load app/products/product-list.component.html
at resolvePromise (zone.js:468)
at resolvePromise (zone.js:453)
at zone.js:502
at ZoneDelegate.invokeTask (zone.js:265)
at Zone.runTask (zone.js:154)
at drainMicroTaskQueue (zone.js:401)
at XMLHttpRequest.ZoneTask.invoke (zone.js:339)

build script is not there in package.json file. Not able to generate build.

10. Retrieving Data Using Http -- Cannot retrieve data correctly

So, I walk along videos and trying to write all by myself. It appears that data via doesn't retrieve correctly. I have a long error stack trace, but in the end I get data in console, but it doesn't appear at screen. I've tryied to CTRL+C and CTRL+V final code in my files, but get same errors

Starter kit does not contain app.component (missing)

app/main.ts(4,30): error TS2307: Cannot find module './app.component'.

how to use star component i always getting 5 starts and it was vertical

i am new to angular

Acme Favicon displaying for all my other apps

Hi Deborah,

I completed your Angular getting started and am building my own app using quick start guide. As you already the default URL in the browser will be localhost:3000. The app runs fine but I am getting the ACME favicon on my app as well. I am not sure why this happening. Please help.

Regards,
Suhas

Error when doing npm install

I have issue with proxy when it comes to typings install, can you walk me through?

I have solve npm and vs code proxy issue.

For npm proxy issue -
npm config set proxy http://proxy.yourcompanyname.com:5050
npm config set https-proxy http://proxy.yourcompanyname.com:5050

for vs code proxy issue -
Go to File -> Preferences -> User Settings
On the right side folder (setting.json) you add
// Place your settings in this file to overwrite the default settings

"http.proxy": "http://proxy.yourcompanyname.com:5050/",
"https.proxy": "http://proxy.yourcompanyname.com:5050/",
"http.proxyStrictSSL": false

Cannot find module 'angular/core'.

Folder: APM - Start
app.component.ts should be changed from
import { Component } from 'angular/core';
to
import { Component } from 'angular2/core';

IIS 8.5 error on load

After last round of upgrades to angular rc4 I get following error, when running your "APM - Final Updated" under IIS. Error is following:

System.import('app').catch(function(err){ console.error(err);  });

TypeError: Cannot read property 'NeverChecked' of undefined
        at eval (node_modules/@angular/compiler/src/view_compiler/constants.js:48:112)
        at Object.eval (node_modules/@angular/compiler/src/view_compiler/constants.js:52:2)
        at eval (node_modules/@angular/compiler/src/view_compiler/constants.js:114:4)
        at eval (node_modules/@angular/compiler/src/view_compiler/constants.js:115:3)

Running from "npm start" is working fine.

unable to run ACM-Final nor ACM-Start

Hi, I have downloaded your APM-Final and ran, npm install and npm start but I am getting the following error. I have latest stable node and npm version installed on my Mac system.

$ sudo npm start
Password:

[email protected] start /Users/remo/Projects/dashboard/ng2Dashboard
tsc && concurrently "tsc -w" "lite-server"

app/products/product.service.ts(26,53): error TS2339: Property 'find' does not exist on type 'IProduct[]'.
app/products/product.service.ts(26,58): error TS7006: Parameter 'p' implicitly has an 'any' type.
node_modules/@angular/common/src/directives/ng_class.d.ts(46,34): error TS2304: Cannot find name 'Set'.
node_modules/@angular/common/src/pipes/async_pipe.d.ts(39,38): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/compile_metadata.d.ts(347,20): error TS2304: Cannot find name 'Set'.
node_modules/@angular/compiler/src/compile_metadata.d.ts(348,15): error TS2304: Cannot find name 'Set'.
node_modules/@angular/compiler/src/directive_normalizer.d.ts(19,100): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/directive_normalizer.d.ts(21,74): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/offline_compiler.d.ts(15,26): error TS2304: Cannot find name 'Map'.
node_modules/@angular/compiler/src/offline_compiler.d.ts(16,38): error TS2304: Cannot find name 'Map'.
node_modules/@angular/compiler/src/offline_compiler.d.ts(31,124): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/output/output_ast.d.ts(424,63): error TS2304: Cannot find name 'Set'.
node_modules/@angular/compiler/src/resource_loader.d.ts(13,23): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/runtime_compiler.d.ts(40,49): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/runtime_compiler.d.ts(42,65): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/template_parser/template_parser.d.ts(45,12): error TS2304: Cannot find name 'Set'.
node_modules/@angular/compiler/src/util.d.ts(35,18): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/util.d.ts(36,46): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/view_compiler/compile_element.d.ts(33,16): error TS2304: Cannot find name 'Map'.
node_modules/@angular/compiler/src/view_compiler/compile_query.d.ts(24,49): error TS2304: Cannot find name 'Map'.
node_modules/@angular/compiler/src/view_compiler/compile_view.d.ts(29,18): error TS2304: Cannot find name 'Map'.
node_modules/@angular/compiler/src/view_compiler/compile_view.d.ts(52,16): error TS2304: Cannot find name 'Map'.
node_modules/@angular/compiler/src/view_compiler/compile_view.d.ts(54,13): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/application_init.d.ts(16,18): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(106,67): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(122,101): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(148,67): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(150,101): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(24,15): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(28,16): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/di/reflective_provider.d.ts(88,123): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/di/reflective_provider.d.ts(88,165): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(2,25): error TS2304: Cannot find name 'MapConstructor'.
node_modules/@angular/core/src/facade/collection.d.ts(3,25): error TS2304: Cannot find name 'SetConstructor'.
node_modules/@angular/core/src/facade/collection.d.ts(5,27): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(5,39): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(8,9): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(9,30): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(12,43): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(13,27): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(15,23): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(16,25): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(101,41): error TS2304: Cannot find name 'Set'.
node_modules/@angular/core/src/facade/collection.d.ts(102,22): error TS2304: Cannot find name 'Set'.
node_modules/@angular/core/src/facade/collection.d.ts(103,25): error TS2304: Cannot find name 'Set'.
node_modules/@angular/core/src/facade/lang.d.ts(12,17): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/lang.d.ts(13,17): error TS2304: Cannot find name 'Set'.
node_modules/@angular/core/src/facade/lang.d.ts(51,59): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/linker/compiler.d.ts(53,49): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/compiler.d.ts(61,65): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/ng_module_factory_loader.d.ts(14,34): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/system_js_ng_module_factory_loader.d.ts(28,25): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/http/src/headers.d.ts(45,59): error TS2304: Cannot find name 'Map'.
node_modules/@angular/http/src/url_search_params.d.ts(46,16): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser-dynamic/src/resource_loader/resource_loader_impl.d.ts(10,23): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/platform-browser/src/browser/browser_adapter.d.ts(79,33): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(97,42): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/dom/dom_renderer.d.ts(18,37): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(2,25): error TS2304: Cannot find name 'MapConstructor'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(3,25): error TS2304: Cannot find name 'SetConstructor'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(5,27): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(5,39): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(8,9): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(9,30): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(12,43): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(13,27): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(15,23): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(16,25): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(101,41): error TS2304: Cannot find name 'Set'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(102,22): error TS2304: Cannot find name 'Set'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(103,25): error TS2304: Cannot find name 'Set'.
node_modules/@angular/router/src/config.d.ts(279,62): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/router/src/interfaces.d.ts(78,99): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/router/src/interfaces.d.ts(157,109): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/router/src/interfaces.d.ts(227,115): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/router/src/interfaces.d.ts(297,91): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/router/src/interfaces.d.ts(367,50): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/router/src/router.d.ts(386,70): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/router/src/router.d.ts(408,59): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/router/src/utils/collection.d.ts(35,58): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(10,66): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(66,60): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(66,70): error TS2304: Cannot find name 'Promise'.

npm ERR! Darwin 15.2.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v7.2.0
npm ERR! npm v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: tsc && concurrently "tsc -w" "lite-server"
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] start script 'tsc && concurrently "tsc -w" "lite-server" '.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the product-management package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! tsc && concurrently "tsc -w" "lite-server"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs product-management
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls product-management
npm ERR! There is likely additional logging output above.

npm installing issue

typings WARN deprecated 11/21/2016: "registry:dt/node#6.0.0+20160831021119" is deprecated (updated, replaced or removed)
typings WARN deprecated 9/14/2016: "registry:dt/core-js#0.0.0+20160725163759" is deprecated (updated, replaced or removed)

├── core-js (global)
└── node (global)

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]

when I try to start the npm so give me response as soon as posible,my github account us YehualashetGit,or my email is [email protected]

app.module.ts Routing Map in Video not same as in Repository

Great Course !
I've noticed that the repository code (final version) defines below routes in the app.module.ts
`outerModule.forRoot([
{ path: 'welcome', component: WelcomeComponent },
{ path: '', redirectTo: 'welcome', pathMatch: 'full'},
{ path: '**', redirectTo: 'welcome', pathMatch: 'full'}
]),

In your video however, there are two more entries,
RouterModule.forRoot([ { path: 'products', component: ProductListComponent }, { path: 'products/:id', component: ProductDetailComponent }, ....

surprisingly navigation still works exactly as described in the video in spite of the fact that the above two routes are missing !!!

Is there an explanation as to why the navigation still works just fine in spite of any route definitions to these two components ?

Issue with npm start

I'm working through your series at the moment, still in the First Things First section, and I receive the following error when running npm start after cloning down the repo:

npm ERR! Darwin 16.3.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v6.9.2
npm ERR! npm  v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `tsc && concurrently "tsc -w" "lite-server" `
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] start script 'tsc && concurrently "tsc -w" "lite-server" '.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the product-management package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     tsc && concurrently "tsc -w" "lite-server"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs product-management
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls product-management
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/whoami/Documents/Code/Angular/angular2-gettingstarted/APM - Start/npm-debug.log
Computer-Name:APM - Start whoami$ sudo npm start

The following Stack Overflow answer solved the issue and the project starts just fine:

http://stackoverflow.com/a/37337795/2199064

Is this an issue with newer versions of Angular 2 or npm, or would this possibly be Mac specific? Might the line noted in the SO answer need to be updated within the project files? I've already done this and could submit it as a pull request if you'd like.

any example/seed for supporting asp.net core production ready?

any example/seed for supporting asp.net core production ready?

Angular2-GettingStarted/APM - Start/systemjs.config.js

I had an issue with npm start off your files , they would not find the following:

:~/apm$ sudo npm start
[sudo] password for ralix:

[email protected] start /home/ralix/apm
tsc && concurrently "tsc -w" "lite-server"

node_modules/@angular/common/src/directives/ng_class.d.ts(48,34): error TS2304: Cannot find name 'Set'.
node_modules/@angular/common/src/pipes/async_pipe.d.ts(44,38): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/aot/compiler.d.ts(32,38): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/aot/compiler.d.ts(44,32): error TS2304: Cannot find name 'Map'.
node_modules/@angular/compiler/src/aot/compiler_host.d.ts(20,33): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/compile_metadata.d.ts(342,20): error TS2304: Cannot find name 'Set'.
node_modules/@angular/compiler/src/compile_metadata.d.ts(344,28): error TS2304: Cannot find name 'Set'.
node_modules/@angular/compiler/src/compile_metadata.d.ts(346,15): error TS2304: Cannot find name 'Set'.
node_modules/@angular/compiler/src/compile_metadata.d.ts(348,23): error TS2304: Cannot find name 'Set'.
node_modules/@angular/compiler/src/compile_metadata.d.ts(350,17): error TS2304: Cannot find name 'Set'.
node_modules/@angular/compiler/src/compile_metadata.d.ts(352,25): error TS2304: Cannot find name 'Set'.
node_modules/@angular/compiler/src/directive_normalizer.d.ts(38,72): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/directive_normalizer.d.ts(40,74): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/i18n/extractor.d.ts(14,33): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/i18n/extractor.d.ts(22,35): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/jit/compiler.d.ts(44,49): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/jit/compiler.d.ts(46,65): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/metadata_resolver.d.ts(58,104): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/output/output_ast.d.ts(433,63): error TS2304: Cannot find name 'Set'.
node_modules/@angular/compiler/src/resource_loader.d.ts(13,23): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/util.d.ts(33,18): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/util.d.ts(34,46): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_init.d.ts(16,18): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(116,67): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(132,101): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(158,67): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(160,101): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(24,15): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(28,16): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/di/reflective_provider.d.ts(88,123): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/di/reflective_provider.d.ts(88,165): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/lang.d.ts(12,17): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/lang.d.ts(13,17): error TS2304: Cannot find name 'Set'.
node_modules/@angular/core/src/linker/compiler.d.ts(53,49): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/compiler.d.ts(61,65): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/ng_module_factory_loader.d.ts(14,34): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/system_js_ng_module_factory_loader.d.ts(28,25): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/util/lang.d.ts(8,53): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/platform-browser-dynamic/src/resource_loader/resource_loader_impl.d.ts(10,23): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/platform-browser/src/browser/browser_adapter.d.ts(79,33): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(97,42): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/dom/dom_renderer.d.ts(22,37): error TS2304: Cannot find name 'Map'.
node_modules/rxjs/Observable.d.ts(68,60): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(68,70): error TS2304: Cannot find name 'Promise'.

npm ERR! Linux 4.8.0-34-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v6.9.2
npm ERR! npm v4.0.5
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: tsc && concurrently "tsc -w" "lite-server"
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] start script 'tsc && concurrently "tsc -w" "lite-server" '.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the product-management package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! tsc && concurrently "tsc -w" "lite-server"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs product-management
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls product-management
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /home/ralix/apm/npm-debug.log

Untill I loaded the quick-start file and then it worked. as well as the package.json file

rxjs

ERROR in C:/Users/sailu/Desktop/Angular-GettingStarted-master/APM/src/app/products/product.service.ts (3,26): Cannot find module '@rxjs/Observable

Unable to get to the specific product route

I can think of a common use case where you email a link to a specific product to someone

Example : http://localhost:3000/product/1

When I type this route on the browser address bar, I am seeing a bunch of console error, including "System is not defined".
Tried hosting this on IIS with the rewrite rule in web.config as follows and it does work only for links like
http://localhost:3000/products

 <system.webServer>
 <rewrite>
      <rules>
        <rule name="ClientRouting" stopProcessing="true">
          <match url="^(.*)$" ignoreCase="false" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
          </conditions>
          <action type="Rewrite" url="index.html" appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

How to create a rule so that the proper component is loaded. - Thanks

Not importing Angular Router

In the "Navigation and Routing Basics: Placing the Views" section of the course we implement routerLink and router-outlet in our app.component.ts, but we aren't importing any routing services from Angular, so the page throws errors and doesn't display.

Course disappeared from youtube

Hi Deborah,

I was watching this course on Youtube a week ago and it was really an awesome one, the best I've found by far. Now, when I had the time to finish the rest of the tutorial (routes), I found it was removed.. Are you updating it to correspond with the Angular updates?

Best wishes,
Luka

Tsd install angular2 - doesn't work

Hello Deborah,

I tried this command: tsd install angular2 --save

But I got this result: >> zero results

How can I fix this problem?
Thank you.

npm start error

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/nodejs', '/usr/bin/npm', 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info prestart [email protected]
6 info start [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec start script
9 verbose stack Error: [email protected] start: ng serve -o
9 verbose stack Exit status 1
9 verbose stack at EventEmitter. (/usr/lib/node_modules/npm/lib/utils/lifecycle.js:217:16)
9 verbose stack at emitTwo (events.js:87:13)
9 verbose stack at EventEmitter.emit (events.js:172:7)
9 verbose stack at ChildProcess. (/usr/lib/node_modules/npm/lib/utils/spawn.js:24:14)
9 verbose stack at emitTwo (events.js:87:13)
9 verbose stack at ChildProcess.emit (events.js:172:7)
9 verbose stack at maybeClose (internal/child_process.js:862:16)
9 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:222:5)
10 verbose pkgid [email protected]
11 verbose cwd /home/patrick/Downloads/Angular-GettingStarted-master/APM-Final
12 error Linux 4.4.0-78-generic
13 error argv "/usr/bin/nodejs" "/usr/bin/npm" "start"
14 error node v4.8.3
15 error npm v2.15.11
16 error code ELIFECYCLE
17 error [email protected] start: ng serve -o
17 error Exit status 1
18 error Failed at the [email protected] start script 'ng serve -o'.
18 error This is most likely a problem with the apm package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error ng serve -o
18 error You can get information on how to open an issue for this project with:
18 error npm bugs apm
18 error Or if that isn't available, you can get their info via:
18 error
18 error npm owner ls apm
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

not generating .js file automatically

Hi Deborah,

I followed the video and did the steps exactly same as yours but in my case adding the .ts doesn't generate the .js file automatically either in VS Code or webstorm. If I do npm start again, then js file is generated fine. I was just wondering have I missed something.

Thanks

Unable to display full-list on native browser(mobile)

Its a great resource. Works perfectly fine on my chrome (mobile and web) but the native internet(android) it just display the first record the other doesnt.

Thanks.

error occurs while routing

Uncaught TypeError: Cannot read property 'OpaqueToken' of undefined
at router.umd.js:145
at router.umd.js:9
at router.umd.js:10
(anonymous) @ router.umd.js:145
(anonymous) @ router.umd.js:9
(anonymous) @ router.umd.js:10
(index):59 Live reload enabled.
(index):27 Error: ReferenceError: WelcomeComponent is not defined
at Object.eval (http://127.0.0.1:3000/app/app.component.js:29:61)
at eval (http://127.0.0.1:3000/app/app.component.js:35:4)
at eval (http://127.0.0.1:3000/app/app.component.js:36:3)
at eval ()
Evaluating http://127.0.0.1:3000/app/app.component.js
Evaluating http://127.0.0.1:3000/app/app.module.js
Evaluating http://127.0.0.1:3000/app/main.js
Error loading http://127.0.0.1:3000/app/main.js

I am not able to run the code using Visual studios 2015

Hi Every one,
I have downloaded the files. But When I open the folder from Visual studios . I don't see any files.
I have downloaded the node.js also.

I did not execute the npm command .Is that the Issue.

Thank you
Venkat

Error in refactoring to separate the routing responsibilities

Hi Deborah,
At the end of the "Angular Modules - Revisiting AppModule" clip, you suggest a refactoring to separate the routing responsibilities in two new Modules.... well, it doesn't work (and I haven't found the problem yet)

I follow the indications exactly as shown on slides, but the problem is that nothing happens when you click on the ProductList anchor. (Yes, maybe is an import, but I have reviewed them all)

I attach images with the modifications:

1. app.module.ts
   
2. app-routing.module.ts
   
3. product.module.ts
   
4. product-routing.module.ts
   

Thanks,

top level folder spaces in names

Top level folders have names in spaces etc "APM - Final Updated" etc. - it's a pain to have to write them from the cmdline - please use underscores/dashes instead of spaces

"typings install" command fails in the starter kit

Hello,
On doing npm install to setup the project dependencies in the starter project, it fails while executing "typings install" command.

Configuration Details:
Code in the folder APM-Start

Node Version: 6.9.1, NPM version: 3.10.8

Attached the npm-debug-log that has the detailed error.
npm-debug-log.txt

I suddenly get an error message when doing npm start

Hi. After a week's break from the Pluralsight course, I was going to start again today. But when I do the command "npm start," I get the following message:
17 error Windows_NT 6.1.7601
18 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
19 error node v6.10.2
20 error npm v3.10.10
21 error code ELIFECYCLE
22 error [email protected] start: tsc && concurrently "tsc -w" "lite-server"
22 error Exit status 2
23 error Failed at the [email protected] start script 'tsc && concurrently "tsc -w" "lite-server" '.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the product-management package,
23 error not with npm itself.

I haven't done any changes to any of the course catalogues since the last chapter. What am I missing here?

working with three.js

Dear Deborah,

I have watched your excellent tutorial from pluralsight - Angular2-GettingStarted. I am trying to integrate a three.js scene into a angular 2 page. I am a beginner in Angular, I have included the three.js file in the script tag, in index.html, i.e, <script src='node_modules/three-js/three.js'> and in the scene.component.ts file I have code like this...

//scene.component.ts
//
import { Component } from 'angular2/core';
import { THREE } from 'three-js/three';
@component({
selector: 'ps-scene',
templateUrl: 'app/webgl/scene.component.html'
})
export class SceneComponent{
scene = new THREE.Scene();
}

The problem is showing in the line - import { THREE } from 'three-js/three';

Can you please help. Thanks in advance.

Thanks and regards
rrmuduli

http Js FIles

Where can i find http.dev.js,angular.dev.js and rx.js

Not able to implement Guards

Hi,
I tried to do exactly what you have done. After adding code for Guards, When I normally navigate in app, everything works fine (Navigating via link and no URL changing manually in browser).

But when i am on Product Details Page and i change the Product ID to some random text i.e. "localhost:3000/product/5" to "localhost:3000/product/werfsd"

From below screen:

After changing, I get errors like:

Also, If i am on "localhost:3000/welcome" and do a manual refresh from browser button. My Url gets changed to "localhost:3000/welcome/welcome" with some errors in Console.

Why does this happens? What am i missing ?

Error msg : Cannot read property 'toLowerCase' of undefined

error: Cannot read property 'toLowerCase' of undefined,

ASP.Net Core version with Angular RC3?

Hi.
Thanks for a great Pluralsight course and excellent examples. Can you please do a ASP.Net Core version with Angular RC3? It would also be nice to have a angular-cli version with ASP.Net Core. I´m really having trouble getting things to work with Visual Studio 2015 and ASP.Net Core.

Thanks in advance.

npm start throws error "node_modules/rxjs/Subject.d.ts(16,22): error TS2415"

I got the following error when I ran the "npm install" :

node_modules/rxjs/Subject.d.ts(16,22): error TS2415: Class 'Subject<T>' incorrectly extends base class 'Observable<T>'.

This worked for me:
https://stackoverflow.com/questions/44810195/how-do-i-get-around-this-error-in-rxjs-5-x-in-typescript-2-4

No products being returned after implementing http request

Just completed the Retrieving Data using HTTP module and no products are being returned in the product list. Getting a 404 "Cannot get /null" error in the browser console. No errors being indicated in VS code.

APM_Final does not start

APM_Final does not start. give below error

src/app/app.component.ts(1,27): error TS2307: Cannot find module '@angular/core'.
src/app/app.module.ts(1,26): error TS2307: Cannot find module '@angular/core'.
src/app/app.module.ts(2,31): error TS2307: Cannot find module '@angular/platform-browser'.
src/app/app.module.ts(3,28): error TS2307: Cannot find module '@angular/http'.
src/app/app.module.ts(4,30): error TS2307: Cannot find module '@angular/router'.
src/app/home/welcome.component.ts(1,27): error TS2307: Cannot find module '@angular/core'.
src/app/products/product-detail.component.ts(1,46): error TS2307: Cannot find module '@angular/core'.
src/app/products/product-detail.component.ts(2,40): error TS2307: Cannot find module '@angular/router'.
src/app/products/product-detail.component.ts(4,36): error TS2307: Cannot find module 'rxjs/Subscription'.
src/app/products/product-detail.component.ts(25,13): error TS7006: Parameter 'params' implicitly has an 'any' type.
src/app/products/product-detail.component.ts(37,13): error TS7006: Parameter 'product' implicitly has an 'any' type.
src/app/products/product-detail.component.ts(38,13): error TS7006: Parameter 'error' implicitly has an 'any' type.
src/app/products/product-filter.pipe.ts(1,38): error TS2307: Cannot find module '@angular/core'.
src/app/products/product-guard.service.ts(1,28): error TS2307: Cannot find module '@angular/core'.
src/app/products/product-guard.service.ts(2,61): error TS2307: Cannot find module '@angular/router'.
src/app/products/product-list.component.ts(1,36): error TS2307: Cannot find module '@angular/core'.
src/app/products/product-list.component.ts(30,28): error TS7006: Parameter 'products' implicitly has an 'any' type.
src/app/products/product-list.component.ts(31,28): error TS7006: Parameter 'error' implicitly has an 'any' type.
src/app/products/product.module.ts(1,26): error TS2307: Cannot find module '@angular/core'.
src/app/products/product.module.ts(2,29): error TS2307: Cannot find module '@angular/router'.
src/app/products/product.service.ts(1,28): error TS2307: Cannot find module '@angular/core'.
src/app/products/product.service.ts(2,32): error TS2307: Cannot find module '@angular/http'.
src/app/products/product.service.ts(4,28): error TS2307: Cannot find module 'rxjs/Observable'.
src/app/products/product.service.ts(21,17): error TS7006: Parameter 'data' implicitly has an 'any' type.
src/app/shared/shared.module.ts(1,27): error TS2307: Cannot find module '@angular/core'.
src/app/shared/shared.module.ts(2,30): error TS2307: Cannot find module '@angular/common'.
src/app/shared/shared.module.ts(3,29): error TS2307: Cannot find module '@angular/forms'.
src/app/shared/star.component.ts(2,38): error TS2307: Cannot find module '@angular/core'.
src/main.ts(2,40): error TS2307: Cannot find module '@angular/platform-browser-dynamic'.

npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
npm ERR! node v7.10.0
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: tsc -p src/
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script 'tsc -p src/'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the product-management package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! tsc -p src/
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs product-management
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls product-management
npm ERR! There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Neelofar\AppData\Roaming\npm-cache_logs\2017-05-08T18_46_52_035Z-debug.log

npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v7.10.0
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] prestart: npm run build
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] prestart script 'npm run build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the product-management package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs product-management
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls product-management
npm ERR! There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Neelofar\AppData\Roaming\npm-cache_logs\2017-05-08T18_46_52_105Z-debug.log

npm install not working

I downloaded the zip file and extracted it. I am trying to do npm install at the directory path where my APM folder is but I am getting the below error. Initially everything started to install properly but after this error I am not able to proceed.

Kindly help. !!

products

Hello, i am attaching my file here. There is no error but it is not showing products in the browser after using the HTTP link. PLease respond quick, i am stuck here in the course

product-list.component.zip

Unit testing for the project

Hi @DeborahK ,
How hard is to include unit testing for this project? as far I see this project was created without these. Just for curiosity I am trying find some useful blog post related with:" how to add tests to an angular 2 application".. some page talking about webpack.... but for this project doesn't apply. Any advice :) ?