danwahlin / angular-jumpstart Goto Github PK
View Code? Open in Web Editor NEWAngular and TypeScript JumpStart example application
License: MIT License
Angular and TypeScript JumpStart example application
License: MIT License
Thank you for this perfect tutorial !
I tries to run Angular-JumpStart with deno and got errors. How I could correct errors ? Than you in advance.
ERRORS:
Check file:///mnt/c/ANGULAR_PROJECTS/SOURCE/ANGULAR_JUMPSTART/Angular-JumpStart/deno/server.ts
error: TS2344 [ERROR]: Type '{ skip: string; top: string; }' does not satisfy the constraint 'string'.
router.get<{skip: string, top: string}>('/api/customers/page/:skip/:top', (ctx) => {
~~~~~~~~~~~~~~~~~~~~~~~~~~~
at file:///mnt/c/ANGULAR_PROJECTS/SOURCE/ANGULAR_JUMPSTART/Angular-JumpStart/deno/routes.ts:8:12
TS7006 [ERROR]: Parameter 'ctx' implicitly has an 'any' type.
router.get<{skip: string, top: string}>('/api/customers/page/:skip/:top', (ctx) => {
~~~
at file:///mnt/c/ANGULAR_PROJECTS/SOURCE/ANGULAR_JUMPSTART/Angular-JumpStart/deno/routes.ts:8:76
TS2344 [ERROR]: Type '{ id: string; }' does not satisfy the constraint 'string'.
router.get<{id: string}>('/api/customers/:id', (ctx) => {
~~~~~~~~~~~~
at file:///mnt/c/ANGULAR_PROJECTS/SOURCE/ANGULAR_JUMPSTART/Angular-JumpStart/deno/routes.ts:29:12
TS7006 [ERROR]: Parameter 'ctx' implicitly has an 'any' type.
router.get<{id: string}>('/api/customers/:id', (ctx) => {
~~~
at file:///mnt/c/ANGULAR_PROJECTS/SOURCE/ANGULAR_JUMPSTART/Angular-JumpStart/deno/routes.ts:29:49
TS2532 [ERROR]: Object is possibly 'undefined'.
postedCustomer.id = ++maxId;
~~~~~~~~~~~~~~
at file:///mnt/c/ANGULAR_PROJECTS/SOURCE/ANGULAR_JUMPSTART/Angular-JumpStart/deno/routes.ts:46:5
TS2339 [ERROR]: Property 'id' does not exist on type 'Promise | Promise | Promise | FormDataReader | Promise'.
Property 'id' does not exist on type 'Promise'.
postedCustomer.id = ++maxId;
~~
at file:///mnt/c/ANGULAR_PROJECTS/SOURCE/ANGULAR_JUMPSTART/Angular-JumpStart/deno/routes.ts:46:20
TS2532 [ERROR]: Object is possibly 'undefined'.
postedCustomer.gender = (postedCustomer.id % 2 === 0) ? 'female' : 'male';
~~~~~~~~~~~~~~
at file:///mnt/c/ANGULAR_PROJECTS/SOURCE/ANGULAR_JUMPSTART/Angular-JumpStart/deno/routes.ts:47:5
TS2339 [ERROR]: Property 'gender' does not exist on type 'Promise | Promise | Promise | FormDataReader | Promise'.
Property 'gender' does not exist on type 'Promise'.
postedCustomer.gender = (postedCustomer.id % 2 === 0) ? 'female' : 'male';
~~~~~~
at file:///mnt/c/ANGULAR_PROJECTS/SOURCE/ANGULAR_JUMPSTART/Angular-JumpStart/deno/routes.ts:47:20
TS2532 [ERROR]: Object is possibly 'undefined'.
postedCustomer.gender = (postedCustomer.id % 2 === 0) ? 'female' : 'male';
~~~~~~~~~~~~~~
at file:///mnt/c/ANGULAR_PROJECTS/SOURCE/ANGULAR_JUMPSTART/Angular-JumpStart/deno/routes.ts:47:30
TS2339 [ERROR]: Property 'id' does not exist on type 'Promise | Promise | Promise | FormDataReader | Promise'.
Property 'id' does not exist on type 'Promise'.
postedCustomer.gender = (postedCustomer.id % 2 === 0) ? 'female' : 'male';
~~
at file:///mnt/c/ANGULAR_PROJECTS/SOURCE/ANGULAR_JUMPSTART/Angular-JumpStart/deno/routes.ts:47:45
TS2344 [ERROR]: Type '{ id: string; }' does not satisfy the constraint 'string'.
router.put<{id: string}>('/api/customers/:id', async (ctx) => {
~~~~~~~~~~~~
at file:///mnt/c/ANGULAR_PROJECTS/SOURCE/ANGULAR_JUMPSTART/Angular-JumpStart/deno/routes.ts:52:12
TS7006 [ERROR]: Parameter 'ctx' implicitly has an 'any' type.
router.put<{id: string}>('/api/customers/:id', async (ctx) => {
~~~
at file:///mnt/c/ANGULAR_PROJECTS/SOURCE/ANGULAR_JUMPSTART/Angular-JumpStart/deno/routes.ts:52:55
TS2344 [ERROR]: Type '{ id: string; }' does not satisfy the constraint 'string'.
router.delete<{id: string}>('/api/customers/:id', (ctx) => {
~~~~~~~~~~~~
at file:///mnt/c/ANGULAR_PROJECTS/SOURCE/ANGULAR_JUMPSTART/Angular-JumpStart/deno/routes.ts:75:15
TS7006 [ERROR]: Parameter 'ctx' implicitly has an 'any' type.
router.delete<{id: string}>('/api/customers/:id', (ctx) => {
~~~
at file:///mnt/c/ANGULAR_PROJECTS/SOURCE/ANGULAR_JUMPSTART/Angular-JumpStart/deno/routes.ts:75:52
TS2344 [ERROR]: Type '{ id: string; }' does not satisfy the constraint 'string'.
router.get<{id: string}>('/api/orders/:id', (ctx) => {
~~~~~~~~~~~~
at file:///mnt/c/ANGULAR_PROJECTS/SOURCE/ANGULAR_JUMPSTART/Angular-JumpStart/deno/routes.ts:86:12
TS7006 [ERROR]: Parameter 'ctx' implicitly has an 'any' type.
router.get<{id: string}>('/api/orders/:id', (ctx) => {
~~~
at file:///mnt/c/ANGULAR_PROJECTS/SOURCE/ANGULAR_JUMPSTART/Angular-JumpStart/deno/routes.ts:86:46
Found 16 errors.
(first of all thank you for creating the most sophisticated A2 starter I've seen)
View All Customers link on the Orders page has two issues:
I cloned the project and ran the npm install completes perfectly but when I run the ng build --watch
I receive the following:
monkey-3:angular2-jumpstarter monkey$ npm install
audited 26834 packages in 8.733s
found 13 vulnerabilities (9 low, 4 high)
run `npm audit fix` to fix them, or `npm audit` for details
monkey-3:angular2-jumpstarter monkey$ ng build --watch
You have to be inside an angular-cli project in order to use the build command.
monkey-3:angular2-jumpstarter monkey$ npm start
> [email protected] start /Users/.../repos/jumpstarters/angular2-jumpstarter
> node server.js
Express listening on port 3000.
Error: ENOENT: no such file or directory, stat '/Users/.../repos/jumpstarters/angular2-jumpstarter/dist/index.html'
I tried to reinstall the angular cli but no luck. what am I missing?
I had an earlier version prior to your upgrade to angular 6 which didn't require the ng build
step and it worked fine.
Any possibility that angular Universal and seo friendly support topics to cover in this application?
Looks like the npm script bundle and bundle:prod were dependent on the file removed in this commit: 96d4157 .
Should the bundle.js point to the systemjs.config.js file in the src directory?
I followed angular2 quickstart guide.I have updated my npm and node, but still I'm getting error while running this command.
Here is debug.log file
0 info it worked if it ends with ok
1 verbose cli [ 'node', '/usr/local/bin/npm', 'run', 'tsc' ]
2 info using [email protected]
3 info using [email protected]
4 verbose node symlink /usr/bin/node
5 verbose run-script [ 'pretsc', 'tsc', 'posttsc' ]
6 info lifecycle [email protected]pretsc: [email protected]pretsc: no script for pretsc, continuing
7 silly lifecycle [email protected]
8 info lifecycle [email protected]tsc: [email protected]tsc: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]
10 verbose lifecycle [email protected]tsc: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/home/krunal/angular2-quickstart/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/opt/android-sdk/tools:/opt/android-sdk/platform-tools:/opt/node/bin:/home/krunal/Downloads/nwjs-v0.12.3-linux-x64tsc: CWD: /home/krunal/angular2-quickstart
11 verbose lifecycle [email protected]
12 silly lifecycle [email protected]tsc: Args: [ '-c', 'tsc -p src -w' ]tsc: Returned: code: 8 signal: null
13 silly lifecycle [email protected]
14 info lifecycle [email protected]~tsc: Failed to exec tsc script
15 verbose stack Error: [email protected] tsc: tsc -p src -w
15 verbose stack Exit status 8
15 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:232:16)
15 verbose stack at EventEmitter.emit (events.js:98:17)
15 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
15 verbose stack at ChildProcess.EventEmitter.emit (events.js:98:17)
15 verbose stack at maybeClose (child_process.js:743:16)
15 verbose stack at Process.ChildProcess._handle.onexit (child_process.js:810:5)
16 verbose pkgid [email protected]
17 verbose cwd /home/krunal/angular2-quickstart
18 error Linux 3.16.0-46-generic
19 error argv "node" "/usr/local/bin/npm" "run" "tsc"
20 error node v0.10.25
21 error npm v3.4.0
22 error code ELIFECYCLE
23 error [email protected] tsc: tsc -p src -w
23 error Exit status 8
24 error Failed at the [email protected] tsc script 'tsc -p src -w'.
24 error Make sure you have the latest version of node.js and npm installed.
24 error If you do, this is most likely a problem with the angular2-quickstart package,
24 error not with npm itself.
24 error Tell the author that this fails on your system:
24 error tsc -p src -w
24 error You can get their info via:
24 error npm owner ls angular2-quickstart
24 error There is likely additional logging output above.
25 verbose exit [ 1, true ]
Hi,
I'm getting a 404 Not Found error for all services that are run in the app. Thus, I'm not able to see any records or login in the app as well.
As first step you wrote in the README.md:
"1. Install global pre-requisites npm install typescript live-server -g"
But you also have both as local devDependencies in your package.json.
So, please remove the initial step from the README.md.
IMHO it is better if we don't have to install any npm packages globally to try out a demo, so my preferred way would be to just keep it in the package.json :)
Hello, what is the login username and password?
@DanWahlin Please look at this quest SO. What is your idead about using Angular2 with ASP.NET Razor views that render from server.
Thanks a lot.
Hi Dan,
followed your instruction but application not loading properly
after npm start , locahost 3000 opening but i can see only loading... text. do i need to do something more.
i can see Express listening on port 3000.
Browser closed.
Thanks
When running the bundle script, an error is thrown. The same thing happens when running npm run bundle:prod.
`PS C:\Projects\Test\Angular2-JumpStart> npm run bundle
[email protected] bundle C:\Projects\Test\Angular2-JumpStart
node bundle.js
Unhandled rejection Error on fetch for app/main.js at file:///C:/Projects/Test/Angular2-JumpStart/app/main.js
Error: ENOENT, open 'C:\Projects\Test\Angular2-JumpStart\app\main.js'
at Error (native)`
I cloned the repo successfully, npm install failed:
npm ERR! peerinvalid The package es6-shim does not satisfy its siblings' peerDependencies requirements!
compile didn't show any error, but npm start also failed:
Error: listen EACCES
Ouch
Now that the new router doesn't have useAsDefault
, this means the customer
route doesn't show much.
Is this intentional to show to the sample observers, or should it be fixed, maybe by changing the /details
route to be default /
?
Thanks a lot.
Hi Dan,
The JumpStart index.html had and needs to be
At least on my machine ;)
Thanks for the jump!
Not sure if this is configuration issue or env issue?
$ npm run tsc
[email protected] tsc /Users/rjain/code/ionic-examples/i2/Angular2-JumpStart
tsc --project src --watch
src/app/bootstrap.ts(1,49): error TS2307: Cannot find module 'angular2/angular2'.
src/app/bootstrap.ts(2,74): error TS2307: Cannot find module 'angular2/router'.
src/app/bootstrap.ts(3,32): error TS2307: Cannot find module 'angular2/http'.
src/app/components/app/app-component.ts(1,33): error TS2307: Cannot find module 'angular2/angular2'.
src/app/components/app/app-component.ts(2,48): error TS2307: Cannot find module 'angular2/router'.
src/app/components/customers/customers-component.ts(1,49): error TS2307: Cannot find module 'angular2/angular2'.
src/app/components/customers/customers-component.ts(2,28): error TS2307: Cannot find module 'angular2/router'.
src/app/components/customers/customers-component.ts(3,35): error TS2307: Cannot find module 'angular2/src/core/facade/async'.
src/app/components/filter-textbox/filter-textbox-component.ts(1,64): error TS2307: Cannot find module 'angular2/angular2'.
src/app/components/orders/orders-component.ts(1,40): error TS2307: Cannot find module 'angular2/angular2'.
src/app/components/orders/orders-component.ts(2,28): error TS2307: Cannot find module 'angular2/router'.
src/app/directives/sortby/sortby-directive.ts(1,53): error TS2307: Cannot find module 'angular2/angular2'.
src/app/pipes/capitalize-pipe.ts(1,22): error TS2307: Cannot find module 'angular2/angular2'.
src/app/services/data-service.ts(1,22): error TS2307: Cannot find module 'angular2/http'.
src/app/services/data-service.ts(2,28): error TS2307: Cannot find module 'angular2/angular2'.
message TS6042: Compilation complete. Watching for file changes.
Angular2 documentation https://angular.io/docs/ts/latest/guide/router.html#!#browser-url-styles states...
IE needs help with that. Make sure the following polyfill libraries are loaded in the index.html above the Angular polyfill
but in index.html, you are loading them below...
<script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
any reason for this? Will this not work in ie?
I run your apps and get errors for main-es2015, polyfils-es2015, runtime-es2015
Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
Page display "Loading..." and footer
Hi Dan
I was interested to see if you are able to compile and run Angular Playground after upgrading to Angular 10. I am seeing an issue in my projects so was interested to see if anyone else was experiencing the same problems. When I get your latest code and run 'npm run playground' I'm seeing the following:
ERROR in The target entry-point "angular-playground" has missing dependencies:
When I browse to http://127.0.0.1:4201/ I see an error.
I am also seeing this in all of my projects (different dependencies obviously).
Are you seeing the same problem when you compile and run locally?
Thanks very much.
James
Very nice sample and works perfectly well. How can I bundle files together for deployment?
I tried
npm run bundle
and it didn't work!
Error: Cannot find module 'C:\Dev\tmp\Angular2-JumpStart\bundle.js'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3
I am not able to see customer details. I have downloaded the same project with url "https://github.com/DanWahlin/Angular-JumpStart".
PFA the screenshot for the same.
Please let me know if any other details are required.
Thanks,
Himanshu Sethi
I get the following error when I start application using "npm start
" in the browser console log.
[Error] TypeError: ‘text/html’ is not a valid JavaScript MIME type. promiseReactionJob
Hi Dan,
I am finding little difficult to understand the logic behind sorter service and it would be really great if you could help me to clear my doubts.
For quick reference I'am adding the below code -
sort(collection: any[], prop: any) {
this.property = prop;
this.direction = (this.property === prop) ? this.direction * -1 : 1;
collection.sort((a: any, b: any) => {
let aVal: any;
let bVal: any;
if(prop && prop.indexOf('.') > -1) {
aVal = PropertyResolver.resolve(prop, a);
bVal = PropertyResolver.resolve(prop, b);
} else {
aVal = a[prop];
bVal = b[prop];
}
if(this.isString(aVal)) { aVal = aVal.trim().toUpperCase(); }
if(aVal === bVal) {
return 0;
} else if (aVal > bVal) {
return this.direction * -1;
} else {
return this.direction * 1;
}
});
}
I know the logic of sort function like if it returns 0 do nothing, 1 - Swap, Negative - continue, but I can't understand How this.direction variable is used to achieve this?. From the wordings it seems like it tracks the order(ascending or descending). What does this code line do, this.direction = (this.property === prop) ? this.direction * -1 : 1;
Only one value ie: aVal is Upper Cased and not bVal. Could you please help me to understand?
--
Thanks
Hi Dan,
Can we please have a license file in the repo? Maybe something like share commons alike with attribute or something more common to developers. etc.
I love this example and want to refer to it, of course mentioning your credit, but would be awesome to see it having a specific license for those who'd get interested in looking at it.
Thanks a lot.
Cheers,
Hi Dan,
Have you considered how testing and bundling might work in this setup?
I ask because tsc doesn't currently support bundling so it seems like we'd need to bring in some other tool in order to support testing and bundling.
I run into this issue after npm install and start the project. Please help!
p/s; I am quite new to Angular, please excuse me if I asked a silly question.
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]prestart: [email protected]prestart: no script for prestart, continuing
6 silly lifecycle [email protected]
7 info lifecycle [email protected]start: [email protected]start: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]
9 verbose lifecycle [email protected]start: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/home/dungnt/Angular-JumpStart-master/node_modules/.bin:usr/local/bin:/usr/local/ant/bin:/home/dungnt/Downloads/jdk1.8.0_111/bin:usr/local/bin:/usr/local/ant/bin:/home/dungnt/Downloads/jdk1.8.0_111/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/home/dungnt/opt/gradle/bin:/home/dungnt/opt/gradle/binstart: CWD: /home/dungnt/Angular-JumpStart-master
10 verbose lifecycle [email protected]
11 silly lifecycle [email protected]start: Args: [ '-c', 'tsc && concurrently "tsc -w" "node server.js" ' ]start: Returned: code: 2 signal: null
12 silly lifecycle [email protected]
13 info lifecycle [email protected]~start: Failed to exec start script
14 verbose stack Error: [email protected] start:tsc && concurrently "tsc -w" "node server.js"
14 verbose stack Exit status 2
14 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:279:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:191:7)
14 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:191:7)
14 verbose stack at maybeClose (internal/child_process.js:877:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd /home/dungnt/Angular-JumpStart-master
17 error Linux 3.13.0-37-generic
18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
19 error node v6.9.3
20 error npm v4.0.5
21 error code ELIFECYCLE
22 error [email protected] start:tsc && concurrently "tsc -w" "node server.js"
22 error Exit status 2
23 error Failed at the [email protected] start script 'tsc && concurrently "tsc -w" "node server.js" '.
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 angular2-jumpstart package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error tsc && concurrently "tsc -w" "node server.js"
23 error You can get information on how to open an issue for this project with:
23 error npm bugs angular2-jumpstart
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls angular2-jumpstart
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]
Hello Dan,
This question is regarding the pagination module. The pagination module is already imported in the SharedModule and SharedModule is loaded in app.module.ts. Since, the pagination functionality is used on the customers page, and we have already imported the SharedModule(which have PaginationModule) in the main app.module.ts file. Why is it again required to import this SharedModule in the CustomersModule? If I do not import in CustomersModule it throws error and as per my understanding if the module is imported in the main app.module.ts it is available to the whole application. Could you please help me to understand?
Another question, in the customers-card.component.html,
*ngFor="let customer of customers;trackBy:trackbyService.customer"
The customer is the function in the trackbyService, but the customer function is called without the use of paranthesis from template. In which scenario does this works?
--
Thanks
Hello @DanWahlin ,
I am trying to deploy this app on my local tomcat by copying the contents of the dist folder upon running ng build --prod into another myApp folder in webapps of my tomcat folder. I keep running into this issue with the internal api calls. Appreciate if you could help me get through this issue.
Request URL: http://localhost:8080/api/customers/page/0/10
Request Method: GET
Status Code: 404
Remote Address: [::1]:8080
Referrer Policy: no-referrer-when-downgrade
Content-Language: en
Content-Length: 1113
Content-Type: text/html;charset=utf-8
Date: Thu, 21 Feb 2019 17:51:57 GMT
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Authorization: 49a5kdkv409fd39
Cache-Control: no-cache
Connection: keep-alive
Host: localhost:8080
Origin: http://evil.com/
Pragma: no-cache
Referer: http://localhost:8080/myApp/customers
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
Thanks..
Step1 : npm i works fine
Step 2: gular-JumpStart-main> ng build angular-jumpstart --watch
An unhandled exception occurred: Cannot find module 'node:util'
Require stack:
Step 3:
E:\playground\angular\Angular-JumpStart-main\Angular-JumpStart-main> ng serve
Cannot determine project or target for command.
I'm just getting into angular and your videos on pluralsight really helped me but I couldn't figure out how to hide the overlay if an http request fails.
Firstly, thank you for this outstanding demo. It is really well done and very helpful.
Now, I notice we pass customer id in the query parameter from the customers page. Is it possible to pass (or bind to) the entire customer entity in the detail page since we already retrieved it from the data store?
Regards, Sam
angularjs size is just about 150kb. I was surprised when i saw angular2 load more than 6MB, what was hapening?
Do you have a plan to add/simulate authentication and role based routing?
Failed to inject refresh script! Couldn't find any of the tags [ '', '' ] from /opt/dev/Angular2-JumpStart/src/app/customers/customers.component.html
When I try to run lite-server with dist/bundle.js I get this error.
zone.js:101 GET http://localhost:3000/app/customer/customer.module 404 (Not Found)
My index.html looks like this:
`
...
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- add for bundle usage -->
<script src="dist/bundle.js"></script>
<!-- add for bundle usage -->
How do I proceed?
Hi DanWahlin,
When i try to build project using cmd ng build --watch.Its giving me error
Your global Angular CLI version (6.1.4) is greater than your local
version (6.0.5). The local Angular CLI version is used.
src/app/customer/customer-details.component.sandbox.ts(1,27): error TS2307: Cannot find module 'angular-playground'. Cannot find module 'angular-playground'.
So, when i install playground using cmd npm run playground its giving me error as below :
at startup (internal/bootstrap/node.js:201:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:516:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] playground: angular-playground
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] playground script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\710987\AppData\Roaming\npm-cache_logs\2018-08-23T14_18_43_263Z-debug.log
Please help me.
I like step wise guide,
i read alot about angular still confused about lots of things,
Like where to write, what to write, how to write.
is there any video or pdf doc that gives more idea about your Great coding standards.
Hi Dan
I am not 100% sure but in my opinion, there is no need to instantiate the router instance within the app.component.ts constructor method. If I understand typescripts instance modifiers correctly, the private one does not allow us to use the instance of the router within classes deriving from the app-container component. If that is true, couldn't we just remove the constructor completely?
constructor(private router: Router) {
}
Thanks for this example and all your helping resources!
Cheers Matthias
I have installed npm and also started .I am getting two error both are same
Error TS2664 Invalid module name in augmentation, module '../../Observable' cannot be found. D:\MyAngular2Demo\node_modules\rxjs\add\operator\map.d.ts 2
the data is being sorted by the values in the customers.json file, which contains both spaces & varying case in the data.
The presentation capitalises & trims much of the data, but the sort takes place on the underlying field, so it doesn't appear to sort correctly.
In addition, the properties in the state object don't appear to be able to sort the list at all.
At least its a working angular2-beta application with minimal dependencies though!
Hi Dan,
everything seems work properly, but when i run the project (npm start) I just get the top bar and the message "loading",
I'm on windows and using last version of chrome, so I assume that i don't need es6-shim, isn't it?
Cheers.
my css files are working fine but js files are not working!! here is my index.html file i loaded this way. i am a new with angular2
<!--
Angular 2 JumpStart
Dan Wahlin
@DanWahlin
http://weblogs.asp.net/dwahlin
http://github.com/danwahlin
-->
<!DOCTYPE html>
<html>
<head>
<base href="/">
<link rel="icon" type="image/png" href="assets/admin/assets/img/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="assets/admin/assets/img/favicon-32x32.png" sizes="32x32">
<!--Title-->
<title>Resurgent</title>
<!-- uikit -->
<link rel="stylesheet" href="admin/uikit/css/uikit.almost-flat.min.css" media="all">
<!--Login page-->
<link rel="stylesheet" href="admin/css/login_page.min.css" />
<!-- flag icons -->
<link rel="stylesheet" href="admin/icons/flags/flags.min.css" media="all">
<!-- style switcher -->
<link rel="stylesheet" href="admin/css/style_switcher.min.css" media="all">
<!-- altair admin -->
<link rel="stylesheet" href="admin/css/main.min.css" media="all">
<!-- themes -->
<link rel="stylesheet" href="admin/css/themes/themes_combined.min.css" media="all">
<!-- matchMedia polyfill for testing media queries in JS -->
<!--[if lte IE 9]>
<script type="text/javascript" src="admin/matchMedia/matchMedia.js"></script>
<script type="text/javascript" src="admin/matchMedia/matchMedia.addListener.js"></script>
<link rel="stylesheet" href="admin/css/ie.css" media="all">
<![endif]-->
<!-- Polyfill(s) for older browsers -->
<script src="../node_modules/core-js/client/shim.min.js"></script>
<script src="../node_modules/zone.js/dist/zone.js"></script>
<script src="../node_modules/reflect-metadata/Reflect.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script>
WebFontConfig = {
google: {
families: [
'Source+Code+Pro:400,700:latin',
'Roboto:400,300,500,700,400italic:latin'
]
}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
<!-- common functions -->
<script src="admin/js/common.min.js"></script>
<!-- altair login page functions -->
<script src="admin/js/pages/login.min.js"></script>
<!-- uikit functions -->
<script src="admin/js/uikit_custom.min.js"></script>
<!-- altair common functions/helpers -->
<script src="admin/js/altair_admin_common.min.js"></script>
<!-- remove for bundle usage -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<!-- remove for bundle usage -->
</head>
<body>
<app-container>
Loading...
</app-container>
</body>
</html>
-
I clone the project but not able to create new customer here.
Getting Error "Cannot POST /api/auth/login"
Please suggest.
When I put a fatal error in the updateCustomer
method in server.js
file as such:
let putCustomer = req.body;
let id = +req.params.id;
let status = false;
throw new Error("Error occurred when updating customer");
...
The error gets propagated back to the data.service.js
, but the catchError
on the pipe in the updateCustomer
method never gets called, and the app just dies, no error message:
updateCustomer(customer: ICustomer): Observable<boolean> {
console.log("Updating customer: ", JSON.stringify(customer));
console.log("Customers URL: ", this.customersBaseUrl);
return this.http
.put<IApiResponse>(this.customersBaseUrl + "/" + customer.id, customer)
.pipe(
map((res) => res.status),
catchError(this.handleError) <-- not called
);
}
Here is the Chrome console log:
Similar issues if I just change the customersBaseUrl
to something invalid in the data.service.ts
file, no error page just hangs.
Hi Dan,
This project is helpful for me to learn basics of angular 2.
It will be more helpful if we have some code illustrating on Google Polymer integration with Angular 2
Thanks,
Gokulan.
Can you add interactive live search property to city input field on Edit Customer Page.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.