mschwarzmueller / angular-2-beta-boilerplate Goto Github PK
View Code? Open in Web Editor NEWA basic boilerplate to start an Angular 2 (Beta) App. Includes Gulpfile to compile Typescript and SCSS.
License: MIT License
A basic boilerplate to start an Angular 2 (Beta) App. Includes Gulpfile to compile Typescript and SCSS.
License: MIT License
Hi,
I'm glad that you've made this boilerplate. I would like to use it but I don't know what its licence is. Could you specified a licence for this repo? I'm impressed what you did on your youtube channel. Your tutorial about Angular2 is excellent for me. I can't wait for next part. Could you also reveal more social channels where I could follow your work. I couldn't find your twitter account nor email. Great job. Keep going.
Hello,
in this boilerplate it is included a tsconfig.json file with a files: property.
If you do no include all the .ts files you are working with, you won't be able to use the auto-import feature in Intellij IDEA and therefore, very likely, also in PHP Storm and Webstorm.
With reference to chapter 03 for example, when you create a file named property-binding.component.ts, you must include this file in the "files:" property.
"files": [
"./dev/property-binding.component.ts",
"./dev/app.component.ts",
"./dev/boot.ts"
]
It took me some time to understand this, I hope someone will find this information useful and save some time for actually learning.
I'm getting an issue while "npm start" saying:
'concurrent' is not recognized as an internal or external command,
operable program or batch file.
Below is the error log:
0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files (x86)\nodejs\node.exe',
1 verbose cli 'C:\Users\GD1\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js',
1 verbose cli '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: C:\Users\GD1\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin;C:\Users\GD1\Desktop\angular-2-beta-boilerplate-master\node_modules.bin;C:\ProgramData\Oracle\Java\javapath;C:\Program Files\Java\jdk1.7.0_51\bin;C:\Program Files\Java\jre7;C:\Program Files\Intel\WiFi\bin;C:\Program Files\Common Files\Intel\WirelessCommon;C:\WINDOWS\system32;C:\Program Files\SourceGear\Common\DiffMerge;C:\Program Files\TortoiseSVN\bin;C:\Program Files\Microsoft SQL Server\110\Tools\Binn;C:\Program Files (x86)\Microsoft SQL Server\110\Tools\Binn\ManagementStudio;C:\Program Files (x86)\Microsoft SQL Server\110\Tools\Binn;C:\Program Files (x86)\Microsoft SQL Server\110\DTS\Binn;C:\Program Files\Microsoft SQL Server\110\DTS\Binn;C:\Program Files\Microsoft SQL Server\120\Tools\Binn;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\Skype\Phone;C:\Program Files\Git\cmd;C:\wamp64\bin\php\php5.6.25;C:\ProgramData\ComposerSetup\bin;C:\Program Files (x86)\nodejs;C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Google\google_appengine;C:\Users\GD1\AppData\Local\Google\Cloud SDK\google-cloud-sdk\bin;C:\Users\GD1\AppData\Local\Microsoft\WindowsApps;C:\Users\GD1\AppData\Roaming\Composer\vendor\bin;E:\Program Files\Microsoft VS Code\bin;C:\Users\GD1\AppData\Roaming\npmstart: CWD: C:\Users\GD1\Desktop\angular-2-beta-boilerplate-master
10 verbose lifecycle [email protected]
11 silly lifecycle [email protected]start: Args: [ '/d /s /c', 'concurrent "npm run gulp" "npm run lite" ' ]start: Returned: code: 1 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: concurrent "npm run gulp" "npm run lite"
14 verbose stack Exit status 1
14 verbose stack at EventEmitter. (C:\Users\GD1\AppData\Roaming\npm\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. (C:\Users\GD1\AppData\Roaming\npm\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 C:\Users\GD1\Desktop\angular-2-beta-boilerplate-master
17 error Windows_NT 10.0.14393
18 error argv "C:\Program Files (x86)\nodejs\node.exe" "C:\Users\GD1\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "start"
19 error node v6.10.0
20 error npm v4.2.0
21 error code ELIFECYCLE
22 error errno 1
23 error [email protected] start: concurrent "npm run gulp" "npm run lite"
23 error Exit status 1
24 error Failed at the [email protected] start script 'concurrent "npm run gulp" "npm run lite" '.
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-boilerplate package,
24 error not with npm itself.
24 error Tell the author that this fails on your system:
24 error concurrent "npm run gulp" "npm run lite"
24 error You can get information on how to open an issue for this project with:
24 error npm bugs angular2-boilerplate
24 error Or if that isn't available, you can get their info via:
24 error npm owner ls angular2-boilerplate
24 error There is likely additional logging output above.
25 verbose exit [ 1, true ]
Watchman is missing in the node dependencies please add it
The server is hung up without installing this dependency.
hi,
i've installed all as in tuto http://www.youtube.com/watch?v=0scZXATiGSY&index=3&list=PL55RiY5tL51olfU2IEqr455EYLkrhmh3n on centos 6.7 x86_64
but "npm start" exit with errors. thanx.
npm-debug.log:
0 info it worked if it ends with ok
1 verbose cli [ 'node', '/usr/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/lib/node_modules/npm/bin/node-gyp-bin:/home/diamo/eclipse_ws/ng2/node_modules/.bin:/usr/bin:/usr/lib64/qt-3.3/bin:/usr/local/bin:/usr/bin:/bin:/usr/local/sbin:/usr/sbin:/sbin:/home/diamo/binstart: CWD: /home/diamo/eclipse_ws/ng2
10 verbose lifecycle [email protected]
11 silly lifecycle [email protected]start: Args: [ '-c', 'concurrent "npm run lite" ' ]start: Returned: code: 1 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: concurrent "npm run lite"
14 verbose stack Exit status 1
14 verbose stack at EventEmitter. (/usr/lib/node_modules/npm/lib/utils/lifecycle.js:239:16)
14 verbose stack at EventEmitter.emit (events.js:98:17)
14 verbose stack at ChildProcess. (/usr/lib/node_modules/npm/lib/utils/spawn.js:24:14)
14 verbose stack at ChildProcess.emit (events.js:98:17)
14 verbose stack at maybeClose (child_process.js:766:16)
14 verbose stack at Process.ChildProcess._handle.onexit (child_process.js:833:5)
15 verbose pkgid [email protected]
16 verbose cwd /home/diamo/eclipse_ws/ng2
17 error Linux 2.6.32-573.7.1.el6.centos.plus.x86_64
18 error argv "node" "/usr/bin/npm" "start"
19 error node v0.10.41
20 error npm v3.7.1
21 error code ELIFECYCLE
22 error [email protected] start: concurrent "npm run lite"
22 error Exit status 1
23 error Failed at the [email protected] start script 'concurrent "npm run lite" '.
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-boilerplate package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error concurrent "npm run lite"
23 error You can get information on how to open an issue for this project with:
23 error npm bugs angular2-boilerplate
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls angular2-boilerplate
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]
Seeing these errors when I execute the install command:
[email protected] install C:\Users\test\Documents\Angular2 Training\node_modules\bufferutil
node-gyp rebuild
C:\Users\test\Documents\Angular2 Training\node_modules\bufferutil>if not defined npm_config_node_gyp (node "C:\Users\test\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin....\node_modules\node-gyp\bin\node-gyp.js" rebuild ) else (node "" rebuild )
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack at failNoPython (C:\Users\test\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\configure.js:401:14)
gyp ERR! stack at C:\Users\test\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\configure.js:356:11
gyp ERR! stack at FSReqWrap.oncomplete (fs.js:82:15)
gyp ERR! System Windows_NT 6.1.7601
gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\test\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "rebuild"
gyp ERR! cwd C:\Users\test\Documents\Angular2 Training\node_modules\bufferutil
gyp ERR! node -v v5.9.0
gyp ERR! node-gyp -v v3.3.0
gyp ERR! not ok
npm WARN install:[email protected] [email protected] install: node-gyp rebuild
npm WARN install:[email protected] Exit status 1
[email protected] install C:\Users\test\Documents\Angular2 Training\node_modules\utf-8-validate
node-gyp rebuild
C:\Users\test\Documents\Angular2 Training\node_modules\utf-8-validate>if not defined npm_config_node_gyp (node "C:\Users\test\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin....\node_modules\node-gyp\bin\node-gyp.js" rebuild ) else (node "" rebuild )
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack at failNoPython (C:\Users\test\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\configure.js:401:14)
gyp ERR! stack at C:\Users\test\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\configure.js:356:11
gyp ERR! stack at FSReqWrap.oncomplete (fs.js:82:15)
gyp ERR! System Windows_NT 6.1.7601
gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\test\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "rebuild"
gyp ERR! cwd C:\Users\test\Documents\Angular2 Training\node_modules\utf-8-validate
gyp ERR! node -v v5.9.0
gyp ERR! node-gyp -v v3.3.0
gyp ERR! not ok
npm WARN install:[email protected] [email protected] install: node-gyp rebuild
npm WARN install:[email protected] Exit status 1
Did I need to install Python to make this install work? (I'm on Win 7)
I cant do this locally on my windows.. Here is the log
I install it but when i run npm start..... Log:
0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files (x86)\\nodejs\\node.exe',
1 verbose cli 'C:\\Users\\Username\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli '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: C:\Users\Amanuel\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin;C:\wamp\www\angular2clone4\node_modules\.bin;C:\ProgramData\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files\Hewlett-Packard\SimplePass\;C:\Program Files (x86)\ATI Technologies\ATI.ACE\Core-Static;C:\Program Files (x86)\GtkSharp\2.12\bin;C:\Program Files\Git\cmd;C:\Program Files (x86)\Heroku\bin;C:\Program Files (x86)\git\cmd;C:\Go\bin\;C:\Program Files (x86)\nodejs\;C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\cmd;C:\Users\Amanuel\AppData\Local\atom\bin;C:\Users\Amanuel\appdata\Roaming\npm;C:\Users\Amanuel\AppData\Local\Spoon\Cmd
10 verbose lifecycle [email protected]~start: CWD: C:\wamp\www\angular2clone4
11 silly lifecycle [email protected]~start: Args: [ '/d /s /c', 'concurrent "npm run gulp" "npm run lite" ' ]
12 silly lifecycle [email protected]~start: Returned: code: 1 signal: null
13 info lifecycle [email protected]~start: Failed to exec start script
14 verbose stack Error: [email protected] start: `concurrent "npm run gulp" "npm run lite" `
14 verbose stack Exit status 1
14 verbose stack at EventEmitter.<anonymous> (C:\Users\Amanuel\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:232:16)
14 verbose stack at emitTwo (events.js:100:13)
14 verbose stack at EventEmitter.emit (events.js:185:7)
14 verbose stack at ChildProcess.<anonymous> (C:\Users\Amanuel\AppData\Roaming\npm\node_modules\npm\lib\utils\spawn.js:24:14)
14 verbose stack at emitTwo (events.js:100:13)
14 verbose stack at ChildProcess.emit (events.js:185:7)
14 verbose stack at maybeClose (internal/child_process.js:827:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
15 verbose pkgid [email protected]
16 verbose cwd C:\wamp\www\angular2clone4
17 error Windows_NT 10.0.10240
18 error argv "C:\\Program Files (x86)\\nodejs\\node.exe" "C:\\Users\\Amanuel\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "start"
19 error node v5.6.0
20 error npm v3.5.3
21 error code ELIFECYCLE
22 error [email protected] start: `concurrent "npm run gulp" "npm run lite" `
22 error Exit status 1
23 error Failed at the [email protected] start script 'concurrent "npm run gulp" "npm run lite" '.
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-boilerplate package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error concurrent "npm run gulp" "npm run lite"
23 error You can get information on how to open an issue for this project with:
23 error npm bugs angular2-boilerplate
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls angular2-boilerplate
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]
0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files (x86)\\nodejs\\node.exe',
1 verbose cli 'C:\\Users\\Username\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli '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: C:\Users\Amanuel\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin;C:\wamp\www\angular2clone4\node_modules\.bin;C:\ProgramData\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files\Hewlett-Packard\SimplePass\;C:\Program Files (x86)\ATI Technologies\ATI.ACE\Core-Static;C:\Program Files (x86)\GtkSharp\2.12\bin;C:\Program Files\Git\cmd;C:\Program Files (x86)\Heroku\bin;C:\Program Files (x86)\git\cmd;C:\Go\bin\;C:\Program Files (x86)\nodejs\;C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\cmd;C:\Users\Amanuel\AppData\Local\atom\bin;C:\Users\Amanuel\appdata\Roaming\npm;C:\Users\Amanuel\AppData\Local\Spoon\Cmd
10 verbose lifecycle [email protected]~start: CWD: C:\wamp\www\angular2clone4
11 silly lifecycle [email protected]~start: Args: [ '/d /s /c', 'concurrent "npm run gulp" "npm run lite" ' ]
12 silly lifecycle [email protected]~start: Returned: code: 1 signal: null
13 info lifecycle [email protected]~start: Failed to exec start script
14 verbose stack Error: [email protected] start: `concurrent "npm run gulp" "npm run lite" `
14 verbose stack Exit status 1
14 verbose stack at EventEmitter.<anonymous> (C:\Users\Amanuel\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:232:16)
14 verbose stack at emitTwo (events.js:100:13)
14 verbose stack at EventEmitter.emit (events.js:185:7)
14 verbose stack at ChildProcess.<anonymous> (C:\Users\Amanuel\AppData\Roaming\npm\node_modules\npm\lib\utils\spawn.js:24:14)
14 verbose stack at emitTwo (events.js:100:13)
14 verbose stack at ChildProcess.emit (events.js:185:7)
14 verbose stack at maybeClose (internal/child_process.js:827:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
15 verbose pkgid [email protected]
16 verbose cwd C:\wamp\www\angular2clone4
17 error Windows_NT 10.0.10240
18 error argv "C:\\Program Files (x86)\\nodejs\\node.exe" "C:\\Users\\Amanuel\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "start"
19 error node v5.6.0
20 error npm v3.5.3
21 error code ELIFECYCLE
22 error [email protected] start: `concurrent "npm run gulp" "npm run lite" `
22 error Exit status 1
23 error Failed at the [email protected] start script 'concurrent "npm run gulp" "npm run lite" '.
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-boilerplate package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error concurrent "npm run gulp" "npm run lite"
23 error You can get information on how to open an issue for this project with:
23 error npm bugs angular2-boilerplate
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls angular2-boilerplate
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]
Hello mschwarzmueller
I have cloned and run both npm install | start
But I cannot access the page it said: This site can’t be reached localhost refused to connect.
Thank you
Hi,
I am trying to replicate Angularjs2 first app by using this video
https://www.youtube.com/watch?v=d6Dp4Dyeke8
But its not working fine. I have also post my issue on stackoverflow:
http://stackoverflow.com/questions/40200200/custom-component-issue-in-angularjs2
Waiting for your kind response.
Thanks
Hi Max
The shim for IE is missing in your Project:
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
Best regards
André
hi,
when i run npm start i can see this. My project is working but everytime i have to refresh the browser. I uninstalled and reinstalled several times but its not working.
From your angular2 vide tutorial series i compared the npm start log and i found a mismatch "Did not detect a bs-config.json
or bs-config.js
override file. Using lite-server defaults...
[1] ** browser-sync options **"
not sure what i have to do
MDs-MacBook-Pro:~ axiskafi$ cd /Applications/AMPPS/www/angular
MDs-MacBook-Pro:angular axiskafi$ npm start
[email protected] start /Applications/AMPPS/www/angular
concurrent "npm run gulp" "npm run lite"
[0]
[0] > [email protected] gulp /Applications/AMPPS/www/angular
[0] > gulp
[0]
[1]
[1] > [email protected] lite /Applications/AMPPS/www/angular
[1] > lite-server
[1]
[1] Did not detect a bs-config.json
or bs-config.js
override file. Using lite-server defaults...
[1] * browser-sync options **
[1] { injectChanges: false,
[1] files: [ './/.{html,htm,css,js}' ],
[1] server: { baseDir: './', middleware: [ [Function], [Function] ] } }
[1] [BS] Access URLs:
[1] ------------------------------------
[1] Local: http://localhost:3000
[1] External: http://192.168.1.6:3000
[1] ------------------------------------
[1] UI: http://localhost:3001
[1] UI External: http://192.168.1.6:3001
[1] ------------------------------------
[1] [BS] Serving files from: ./
[1] [BS] Watching files...
[1] 16.03.28 20:51:54 304 GET /index.html
[0] [20:51:54]
[0] Using gulpfile /Applications/AMPPS/www/angular/gulpfile.js
[0] [20:51:54]
[0] Starting 'watch'...
[0] [20:51:54] Finished 'watch' after 12 ms
[0] [20:51:54] Starting 'build-ts'...
[0] [20:51:54] Starting 'build-css'...
[1] 16.03.28 20:51:54 304 GET /node_modules/es6-shim/es6-shim.min.js
[1] 16.03.28 20:51:54 304 GET /node_modules/systemjs/dist/system-polyfills.js
[1] 16.03.28 20:51:54 304 GET /node_modules/angular2/es6/dev/src/testing/shims_for_IE.js
[1] 16.03.28 20:51:54 304 GET /node_modules/angular2/bundles/angular2-polyfills.js
[1] 16.03.28 20:51:54 304 GET /node_modules/systemjs/dist/system.src.js
[1] 16.03.28 20:51:54 304 GET /node_modules/rxjs/bundles/Rx.js
[1] 16.03.28 20:51:54 304 GET /node_modules/angular2/bundles/angular2.dev.js
[1] 16.03.28 20:51:54 304 GET /node_modules/angular2/bundles/router.dev.js
[1] 16.03.28 20:51:54 304 GET /node_modules/angular2/bundles/http.js
[1] 16.03.28 20:51:54 200 GET /src/css/app.css
[1] [BS] File changed: src/css/app.css
[1] 16.03.28 20:51:55 304 GET /app/boot.js
[1] 16.03.28 20:51:55 404 GET /browser-sync/browser-sync-client.2.11.1.js
[1] 16.03.28 20:51:55 304 GET /app/app.component.js
[0] [20:51:56]
[0] Finished 'build-css' after 1.71 s
[0] [20:51:56]
[0] Finished 'build-ts' after 1.73 s
[0] [20:51:56] Starting 'default'...
[0] [20:51:56]
[0] Finished 'default' after 5.09 μs
[1] [BS] File changed: src/css/app.css
[1] [BS] File changed: app/app.component.js
[1] [BS] File changed: app/boot.js
Hi,
I was trying to install the boilerplate, but when I launch npm start, the compiled boot.js file contains
System.register(['angular2/platform/browser', "./app.component.ts"]
Of course app.component.ts.js
doesn't exists, so I get a 404. If I change it to
System.register(['angular2/platform/browser', "./app.component"]
then everything works fine, unless I compile it again, of course.
Am I doing something wrong?
Thanks
Francesco
matches a schema that is not allowed. enables experimental support for es7 decorators.
Hi I'm getting an issue while "npm start" saying:
npm ERR! Linux 4.4.0-66-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v7.8.0
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: concurrently "npm run gulp" "npm run lite"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'concurrently "npm run gulp" "npm run lite" '.
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 angular2-boilerplate package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! concurrently "npm run gulp" "npm run lite"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular2-boilerplate
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular2-boilerplate
npm ERR! There is likely additional logging output above.
can u please solve this issue
How come this boilerplate doesn't have app.module.ts?
What can I do when I want to specify more imports and declarations to NgModule?
The Heroes-Tour tutorial on Angular2 homepage requires adding to @NgModule.
Can I write this in boot.ts? Or where and how to put this code below properly in this angular2-beta-boilerplate repo? Does this have anything to do with different beta/production versions of Angular2?
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HeroDetailComponent ],
I am unable to see the font color change from black to red when trying to duplicate this example and typing 'yes' into the text box. And then I noticed I was getting an error in the console about promise.d.ts:
C:\Users\test\Documents\Angular2 Training>npm start
[email protected] start C:\Users\test\Documents\Angular2 Training
concurrent "npm run gulp" "npm run lite"
[0]
[0] > [email protected] gulp C:\Users\test\Documents\Angular2 Training
[0] > gulp
[0]
[1]
[1] > [email protected] lite C:\Users\test\Documents\Angular2 Training
[1] > lite-server
[1]
[1] Did not detect a bs-config.json
or bs-config.js
override file. Using lite-server defaults...
[1] * browser-sync options **
[1] { injectChanges: false,
[1] files: [ './/.{html,htm,css,js}' ],
[1] server: { baseDir: './', middleware: [ [Function], [Function] ] } }
[0] [01:32:16]
[0] Using gulpfile ~\Documents\Angular2 Training\gulpfile.js
[0] [01:32:16]
[0] Starting 'watch'...
[0] [01:32:16] Finished 'watch' after 12 ms
[0] [01:32:16] Starting 'build-ts'...
[0] [01:32:16] Starting 'build-css'...
[1] [BS] Access URLs:
[1] ----------------------------------
[1] Local: http://localhost:3000
[1] External: http://10.0.0.2:3000
[1] ----------------------------------
[1] UI: http://localhost:3001
[1] UI External: http://10.0.0.2:3001
[1] ----------------------------------
[1] [BS] Serving files from: ./
[1] [BS] Watching files...
[0] C:/Users/test/Documents/Angular2 Training/node_modules/angular2/src/facade/promise.d.ts(1,10): e
rror TS2661: Cannot re-export name that is not defined in the module.
[0] [01:32:18]
[0] TypeScript: 1 semantic error
[0] [01:32:18] TypeScript: emit succeeded (with errors)
[0] [01:32:18]
[0] Finished 'build-css' after 2.55 s
[0] [01:32:18]
[0] Finished 'build-ts' after 2.56 s
[0] [01:32:18] Starting 'default'...
[0] [01:32:18] Finished 'default' after 5.12 µs
[1] 16.03.22 01:32:18 304 GET /index.html
[1] [BS] File changed: src\css\app.css
[1] [BS] File changed: app\my-component.component.js
[1] [BS] File changed: src\css\mycomponent.css
[1] [BS] File changed: app\app.component.js
[1] [BS] File changed: app\boot.js
[1] 16.03.22 01:32:19 304 GET /node_modules/es6-shim/es6-shim.min.js
[1] 16.03.22 01:32:19 304 GET /node_modules/systemjs/dist/system-polyfills.js
[1] 16.03.22 01:32:19 304 GET /node_modules/angular2/es6/dev/src/testing/shims_for_IE.js
[1] 16.03.22 01:32:19 304 GET /node_modules/systemjs/dist/system.src.js
[1] 16.03.22 01:32:19 304 GET /node_modules/angular2/bundles/angular2-polyfills.js
[1] 16.03.22 01:32:19 304 GET /node_modules/rxjs/bundles/Rx.js
[1] 16.03.22 01:32:19 304 GET /node_modules/angular2/bundles/angular2.dev.js
[1] 16.03.22 01:32:19 304 GET /node_modules/angular2/bundles/router.dev.js
[1] 16.03.22 01:32:19 304 GET /node_modules/angular2/bundles/http.js
[1] 16.03.22 01:32:19 200 GET /src/css/app.css
[1] 16.03.22 01:32:19 200 GET /src/css/app.css
[1] 16.03.22 01:32:19 200 GET /index.html
[1] 16.03.22 01:32:21 304 GET /node_modules/angular2/bundles/router.dev.js
[1] 16.03.22 01:32:21 304 GET /node_modules/es6-shim/es6-shim.min.js
[1] 16.03.22 01:32:21 304 GET /node_modules/systemjs/dist/system-polyfills.js
[1] 16.03.22 01:32:21 304 GET /node_modules/angular2/es6/dev/src/testing/shims_for_IE.js
[1] 16.03.22 01:32:21 304 GET /node_modules/angular2/bundles/angular2-polyfills.js
[1] 16.03.22 01:32:21 304 GET /node_modules/systemjs/dist/system.src.js
[1] 16.03.22 01:32:21 304 GET /src/css/app.css
[1] 16.03.22 01:32:21 304 GET /node_modules/rxjs/bundles/Rx.js
[1] 16.03.22 01:32:21 304 GET /node_modules/angular2/bundles/angular2.dev.js
[1] 16.03.22 01:32:21 304 GET /node_modules/angular2/bundles/http.js
[1] 16.03.22 01:32:21 304 GET /node_modules/angular2/bundles/router.dev.js
[1] 16.03.22 01:32:21 304 GET /node_modules/angular2/bundles/http.js
[1] 16.03.22 01:32:21 304 GET /src/css/app.css
[1] 16.03.22 01:32:21 200 GET /app/boot.js
[1] 16.03.22 01:32:21 304 GET /app/boot.js
[1] 16.03.22 01:32:21 200 GET /app/app.component.js
[1] 16.03.22 01:32:22 304 GET /app/app.component.js
[1] 16.03.22 01:32:24 200 GET /app/my-component.component.js
[1] 16.03.22 01:32:24 304 GET /app/my-component.component.js
[1] 16.03.22 01:32:25 200 GET /src/css/mycomponent.css
[1] 16.03.22 01:32:25 304 GET /src/css/mycomponent.css
Everything else looks good though, besides
[0] C:/Users/test/Documents/Angular2 Training/node_modules/angular2/src/facade/promise.d.ts(1,10): e
rror TS2661: Cannot re-export name that is not defined in the module
I wonder if that is preventing me from seeing the font color from changing dynamically...
Hi,
This is not a real problem in the app but just a problem I see with Angular 2.
Angular2 create templates in the DOM with attributes for recognize them, like "ng-content-r4nd0m" for one template, and in case we use another one inside this first template, the attribute is changed for all this second template. Fine, that's ok.
In case we have components styled, (with styleUrls), Angular generates styles with this name.
Le'ts get an example :
My template is like this in the DOM:
<div class="my-class-on-element" ng-content-kb2678></div>
The styles created are:
.my-class-on-element[ng-content-kb2678] { background-color: red; }
But, I have a question with that. If i want to make a component library, with styled components, how the users can modify my styled components ? There is no way that their classes can override the component CSS classes.
For example:
.my-class-on-element { background-color: green; }
Will not be applied because of the components mechanism. This is a good thing in all the general cases, for separate all components styles, but in the case I described before I think this could be a problem.
What do you think about that ?
(PS: Sorry for my frenglish)
I can not run gulp , pleass help me
I noticed while running this boilerplate that Angular sometimes complains about the my-app selector not being found.
Potential fix:
I believe the systemjs script that starts up the app should be placed after the tags. This will ensure that once Angular is bootstrapped, the DOM already has loaded the element. Once I did this, my problem subsided.
index.html should look like this:
<body>
<my-app>Loading...</my-app>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</body>
thoughts?
I'm getting an error once I run "gulp"
/angular-2-beta-boilerplate/node_modules/postcss/lib/lazy-result.js:157 this.processing = new Promise(function (resolve, reject) { ^ ReferenceError: Promise is not defined
There were problems with the node and npm version, it's fixed now!
TSD Is depreciated... Can you guys try changing from tsd? Thankyou
Hello,
in order to run multiple apps I added some lines in my file gulpfile.js
var browserSync = require("browser-sync").create();
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
},
ui: {
port: 8080
}
});
});
Now I have two tries to run BrowserSync when I execute npm run start
The first statement (located in a place unknown to me) halts (this is the one coming by default when you download this boilerplate package) and the second that I can read in the logs, that uses the options passed through gulpfile.js, works and starts node.
Where is this statement located by default in the boilerplate package?
Thank you.
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.