danwahlin / angular-jumpstart Goto Github PK

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.

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

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.

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  

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..

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,

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,

The JumpStart index.html had and needs to be

At least on my machine ;)

Thanks for the jump!

angularjs size is just about 150kb. I was surprised when i saw angular2 load more than 6MB, what was hapening?

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

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.

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.

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.

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:

• C:/Users/jdutton/Desktop/Angular-JumpStart-master/Angular-JumpStart-master/src/app/about/about.component.sandbox
• C:/Users/jdutton/Desktop/Angular-JumpStart-master/Angular-JumpStart-master/src/app/customer/customer-details/customer-details.component.sandbox
• C:/Users/jdutton/Desktop/Angular-JumpStart-master/Angular-JumpStart-master/src/app/customer/customer-orders/customer-orders.component.sandbox
• C:/Users/jdutton/Desktop/Angular-JumpStart-master/Angular-JumpStart-master/src/app/customers/customers-card/customers-card.component.sandbox
• C:/Users/jdutton/Desktop/Angular-JumpStart-master/Angular-JumpStart-master/src/app/customers/customers-grid/customers-grid.component.sandbox
• C:/Users/jdutton/Desktop/Angular-JumpStart-master/Angular-JumpStart-master/src/app/customers/customers.component.sandbox

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

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]
7 silly lifecycle [email protected]pretsc: no script for pretsc, continuing
8 info lifecycle [email protected]tsc: [email protected]
9 verbose lifecycle [email protected]tsc: unsafe-perm in lifecycle true
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-x64
11 verbose lifecycle [email protected]tsc: CWD: /home/krunal/angular2-quickstart
12 silly lifecycle [email protected]tsc: Args: [ '-c', 'tsc -p src -w' ]
13 silly lifecycle [email protected]tsc: Returned: code: 8 signal: null
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 ]

Failed to inject refresh script! Couldn't find any of the tags [ '', '' ] from /opt/dev/Angular2-JumpStart/src/app/customers/customers.component.html

I clone the project but not able to create new customer here.
Getting Error "Cannot POST /api/auth/login"
Please suggest.

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?

Do you have a plan to add/simulate authentication and role based routing?

(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:

1. ) it seems to require a double-click
   2.) The Customer Manager page then always returns 'No Records Found' in List View (it seems that neither view is actually selected at this point). Then clicking on either Card View or List View will populate the data.

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

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.

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.

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 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

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;
        }
    });
}

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;

2. Only one value ie: aVal is Upper Cased and not bVal. Could you please help me to understand?

--
Thanks

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]
6 silly lifecycle [email protected]prestart: no script for prestart, continuing
7 info lifecycle [email protected]start: [email protected]
8 verbose lifecycle [email protected]start: unsafe-perm in lifecycle true
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/bin
10 verbose lifecycle [email protected]start: CWD: /home/dungnt/Angular-JumpStart-master
11 silly lifecycle [email protected]start: Args: [ '-c', 'tsc && concurrently "tsc -w" "node server.js" ' ]
12 silly lifecycle [email protected]start: Returned: code: 2 signal: null
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 ]

i start project and have one issue please help me, thanks

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

Any possibility that angular Universal and seo friendly support topics to cover in this application?

Hello, what is the login username and password?

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.

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:

• E:\playground\angular\Angular-JumpStart-main\Angular-JumpStart-main\node_modules@angular-devkit\architect\node_modules@angular-devkit\core\src\virtual-fs\host\buffer.js
• E:\playground\angular\Angular-JumpStart-main\Angular-JumpStart-main\node_modules@angular-devkit\architect\node_modules@angular-devkit\core\src\virtual-fs\host\index.js

Step 3:
E:\playground\angular\Angular-JumpStart-main\Angular-JumpStart-main> ng serve
Cannot determine project or target for command.

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

Can you add interactive live search property to city input field on Edit Customer Page.

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 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

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>

index.html.zip

<!-- add for bundle usage -->
<script src="dist/bundle.js"></script>
<!-- add for bundle usage -->

How do I proceed?

Hi,
I tried to run it on IE Edge but is shooting an error:

-> EXCEPTION: SyntaxError: The use of a keyword for an identifier is invalid
Pls see attached pics.

Cheers
G

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)`

@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.

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.

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

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 :)

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.

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

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,

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.