Article 1 bug

[AaronNGray]

on doing an npm install npm start

I get the following and the app is not loading in the browser, just a 'Loading ...' and a spinner

[1] ** browser-sync config **
[1] { injectChanges: false,
[1]   files: [ 'index.html', './app/**/*.{html,css,ts,js}' ],
[1]   watchOptions: { ignored: 'node_modules' },
[1]   server: { baseDir: './', middleware: [ [Function], [Function] ] } }
[0] error TS6054: File 'app/components/app.component.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'app/components/table.component.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/app/components/app.component.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/app/components/table.component.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/app/interfaces/ICustomer.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/app/interfaces/ICustomerSelectedEvent.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/app/main.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/app/services/NorthwindService.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/lib/Rx.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/lib/angular2-polyfills.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/lib/angular2.dev.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/lib/bows.min.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/lib/datatables.min.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/lib/http.dev.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/lib/jquery.min.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/lib/random.min.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/lib/ready.min.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/lib/router.dev.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/lib/system.src.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/styles/bootstrap/js/bootstrap.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/styles/bootstrap/js/bootstrap.min.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/styles/bootstrap/js/npm.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] 11:58:39 AM - Compilation complete. Watching for file changes.
[1] [BS] Access URLs:

runtime is giving :-

Microsoft Windows [Version 10.0.10586]
(c) 2015 Microsoft Corporation. All rights reserved.

C:\Users\Aaron Gray>cd Tutorials

C:\Users\Aaron Gray\Tutorials>dir
 Volume in drive C has no label.
 Volume Serial Number is 4601-1596

 Directory of C:\Users\Aaron Gray\Tutorials

19/07/2016  11:48    <DIR>          .
19/07/2016  11:48    <DIR>          ..
19/07/2016  11:49    <DIR>          Angular2-Articles
               0 File(s)              0 bytes
               3 Dir(s)  330,781,282,304 bytes free

C:\Users\Aaron Gray\Tutorials>cd Angular2-Articles

C:\Users\Aaron Gray\Tutorials\Angular2-Articles>dir
 Volume in drive C has no label.
 Volume Serial Number is 4601-1596

 Directory of C:\Users\Aaron Gray\Tutorials\Angular2-Articles

19/07/2016  11:49    <DIR>          .
19/07/2016  11:49    <DIR>          ..
19/07/2016  11:49               727 .gitignore
19/07/2016  11:58    <DIR>          article1
19/07/2016  12:11    <DIR>          article3
19/07/2016  11:49    <DIR>          article4
19/07/2016  11:49             1,102 LICENSE
19/07/2016  11:49               233 README.md
               3 File(s)          2,062 bytes
               5 Dir(s)  330,780,540,928 bytes free

C:\Users\Aaron Gray\Tutorials\Angular2-Articles>cd article1

C:\Users\Aaron Gray\Tutorials\Angular2-Articles\article1>npm start

> angular2demo1@0.0.1 start C:\Users\Aaron Gray\Tutorials\Angular2-Articles\article1
> concurrent "npm run tsc:w" "npm run lite"

[1]
[1] > angular2demo1@0.0.1 lite C:\Users\Aaron Gray\Tutorials\Angular2-Articles\article1
[1] > lite-server
[1]
[0]
[0] > angular2demo1@0.0.1 tsc:w C:\Users\Aaron Gray\Tutorials\Angular2-Articles\article1
[0] > tsc -w
[0]
[1] ** browser-sync config **
[1] { injectChanges: false,
[1]   files: [ 'index.html', './app/**/*.{html,css,ts,js}' ],
[1]   watchOptions: { ignored: 'node_modules' },
[1]   server: { baseDir: './', middleware: [ [Function], [Function] ] } }
[0] error TS6054: File 'app/components/app.component.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'app/components/table.component.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/app/components/app.component.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/app/components/table.component.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/app/interfaces/ICustomer.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/app/interfaces/ICustomerSelectedEvent.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/app/main.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/app/services/NorthwindService.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/lib/Rx.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/lib/angular2-polyfills.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/lib/angular2.dev.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/lib/bows.min.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/lib/datatables.min.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/lib/http.dev.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/lib/jquery.min.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/lib/random.min.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/lib/ready.min.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/lib/router.dev.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/lib/system.src.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/styles/bootstrap/js/bootstrap.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/styles/bootstrap/js/bootstrap.min.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] error TS6054: File 'dist/styles/bootstrap/js/npm.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
[0] 12:21:19 PM - Compilation complete. Watching for file changes.
[1] 16.07.19 12:21:19 404 GET /sockjs-node/info
[1] 16.07.19 12:21:19 404 GET /sockjs-node/info
[1] [BS] Access URLs:
[1]  -------------------------------------
[1]        Local: http://localhost:3000
[1]     External: http://192.168.1.69:3000
[1]  -------------------------------------
[1]           UI: http://localhost:3001
[1]  UI External: http://192.168.1.69:3001
[1]  -------------------------------------
[1] [BS] Serving files from: ./
[1] [BS] Watching files...
[1] 16.07.19 12:21:21 200 GET /index.html
[1] 16.07.19 12:21:21 304 GET /node_modules/angular2/es6/dev/src/testing/shims_for_IE.js
[1] 16.07.19 12:21:21 304 GET /node_modules/es6-shim/es6-shim.min.js
[1] 16.07.19 12:21:21 304 GET /node_modules/systemjs/dist/system-polyfills.js
[1] 16.07.19 12:21:21 304 GET /node_modules/angular2/bundles/angular2-polyfills.js
[1] 16.07.19 12:21:21 304 GET /node_modules/systemjs/dist/system.src.js
[1] 16.07.19 12:21:21 304 GET /node_modules/rxjs/bundles/Rx.js
[1] 16.07.19 12:21:21 304 GET /node_modules/angular2/bundles/angular2.dev.js
[1] 16.07.19 12:21:21 304 GET /node_modules/angular2/bundles/http.dev.js
[1] 16.07.19 12:21:21 304 GET /node_modules/jquery/dist/jquery.min.js
[1] 16.07.19 12:21:21 304 GET /app/vendor/datatables/datatables.min.js
[1] 16.07.19 12:21:21 304 GET /app/vendor/datatables/datatables.min.css
[1] 16.07.19 12:21:21 304 GET /node_modules/bootstrap/dist/css/bootstrap.css
[1] 16.07.19 12:21:21 304 GET /styles/app.css
[1] 16.07.19 12:21:21 304 GET /styles/images/loader.gif
[1] 16.07.19 12:21:21 404 GET /app/main.js
[1] 16.07.19 12:21:21 404 GET /sockjs-node/info
[1] 16.07.19 12:21:22 404 GET /sockjs-node/info
[1] 16.07.19 12:21:22 200 HEAD /
[1] 16.07.19 12:21:22 200 GET /index.html
[1] 16.07.19 12:21:23 404 GET /sockjs-node/info
[1] 16.07.19 12:21:24 404 GET /sockjs-node/info
[1] 16.07.19 12:21:26 404 GET /sockjs-node/info
[1] 16.07.19 12:21:26 404 GET /sockjs-node/info
[1] 16.07.19 12:21:26 200 GET /styles/app.css
[1] 16.07.19 12:21:26 200 GET /app/vendor/datatables/datatables.min.css
[1] 16.07.19 12:21:26 200 GET /node_modules/bootstrap/dist/css/bootstrap.css
[1] 16.07.19 12:21:27 304 GET /node_modules/bootstrap/dist/css/bootstrap.css.map
[1] 16.07.19 12:21:27 304 GET /node_modules/systemjs/dist/system-polyfills.js.map
[1] 16.07.19 12:21:27 404 GET /app/vendor/datatables/pdfmake.min.js.map
[1] 16.07.19 12:21:27 304 GET /node_modules/es6-shim/es6-shim.map
[1] 16.07.19 12:21:28 404 GET /sockjs-node/info
[1] 16.07.19 12:21:28 404 GET /sockjs-node/info
[1] 16.07.19 12:21:30 404 GET /sockjs-node/info
[1] 16.07.19 12:21:30 404 GET /sockjs-node/info
[1] 16.07.19 12:21:30 404 GET /sockjs-node/info
....

[brakmic]

Hi Aaron,

Thanks for testing my code examples! :+1:

The error seems to be rooted in TypeScript compiler's rejection of non-TS-modules (like raw javascript files, for example).

Here you can find more info regarding this problem: https://github.com/Microsoft/TypeScript/issues/2302

The newer version of TS accepts non-TS-files via the --allowJS switch: https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#including-js-files-with---allowjs

Regards,

[AaronNGray]

On Debian I am getting the same

then the following error in Firefox :-

Error: (SystemJS) patchProperty/desc.set/wrapFn@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:795:27
    Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:382:24
    Zone</Zone</Zone.prototype.runTask@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:282:29
    ZoneTask/this.invoke@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:449:29

    Error loading http://localhost:3000/app/main.js

[brakmic]

There should be more details regarding the last error with "main.js". "Error loading http://localhost:3000/app/main.js" could be many things in HTTP: 404 error, error 500 etc.

[AaronNGray]

The following installs the nightly build of typescript :-

sudo npm install -g typescript@next

and similar in package.json

"tyepscript": "next"

Then added :-

"allowJs": true

to tsconfig.json

And tied modifying Gulpfile.ts :-

var typescript = require("typescript");
var tslint = require("tslint");

But that did not seem to help either !

[AaronNGray]

no thurther details on app/main.js not loading.

[brakmic]

Well, I have no other ideas than to ask you to upgrade your current Angular2 version. At this time the Betas were still around but my later articles jumped to RC. Of course, this is not a proper "solution" to the problems you have but playing around with a Beta while there are RC's available isn't something I'd recommend either.

https://github.com/angular/angular/issues/7818

Also, take into account that in my later articles I've switched from SystemJS/Gulp to Webpack (I'm using the excellent Webpack-Starter from AngularClass)

[AaronNGray]

Angular2-datatable examples have the same bug. I cannot work out how to solve that one either !

[brakmic]

Are you using the RC version or still the beta from the article? I suppose the problem is rooted there. I'd just copy the important parts of the logic which are not bound to a particular version anyway.

[AaronNGray]

rc-17 IIRC Have tried both on Windows and Linux

[brakmic]

I don't think it depends on the OS. But sadly I'm not able to give you any further advice. It could be many things: your current node version, or some globally available packages that prevent local ones from executing. Or some issue with the build configs.

[AaronNGray]

okay I will try when I come back to it

could you give me your Node.js and NPM versions please ?

On 26 July 2016 at 00:09, Harris Brakmic notifications@github.com wrote:

I don't think it depends on the OS. But sadly I'm not able to give you any further advice. It could be many things: your current node version, or some globally available packages that prevent local ones from executing. Or some issue with the build configs.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/brakmic/Angular2-Articles/issues/1#issuecomment-235113969, or mute the thread https://github.com/notifications/unsubscribe-auth/AAFOEyncYy1GYYmgb88oYgz703tWYWuOks5qZUIggaJpZM4JPnOY .

[brakmic]

node: 6.3.1 npm: 3.5.3

[AaronNGray]

C:\Users\Aaron Gray>Node --version v6.3.0

C:\Users\Aaron Gray>npm --version 3.10.3

On 26 July 2016 at 00:41, Harris Brakmic notifications@github.com wrote:

node: 6.3.1 npm: 3.5.3

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/brakmic/Angular2-Articles/issues/1#issuecomment-235119728, or mute the thread https://github.com/notifications/unsubscribe-auth/AAFOE3j4kS1inQs7CVHLAs3fRZ4d0bUOks5qZUmrgaJpZM4JPnOY .