Ok, the other one sucked… it was just an overview of loads of stuff and no hand-holding… I need hand-holding as everything is all still so new.
I already have Node.js, and I have already created one Angular app, so I have the CLI too. He suggests updating it.
PS C:\xxx\git\spring5-angular2-mario-romano> node -v v10.13.0 PS C:\xxx\git\spring5-angular2-mario-romano> npm -v 6.4.1 PS C:\xxx\git\spring5-angular2-mario-romano> npm update @angular/cli PS C:\xxx\git\spring5-angular2-mario-romano> ng version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 7.0.3 Node: 10.13.0 OS: win32 x64 Angular: ... Package Version ------------------------------------------------------ @angular-devkit/architect 0.10.3 @angular-devkit/core 7.0.3 @angular-devkit/schematics 7.0.3 @schematics/angular 7.0.3 @schematics/update 0.10.3 rxjs 6.3.3 typescript 3.1.3
Let’s create a login app: > ng new login-app
From another tutorial I remember that they added stuff to the CLI, so I chose:
PS C:\xxx\git\spring5-angular2-mario-romano> ng new login-app ? Would you like to add Angular routing? No ? Which stylesheet format would you like to use? CSS
Well, it took a couple of minutes and some strange stuff happened in PowerShell.
PS C:\xxx\git\spring5-angular2-mario-romano> ng new login-app ? Would you like to add Angular routing? No ? Which stylesheet format would you like to use? CSS CREATE login-app/angular.json (3795 bytes) CREATE login-app/package.json (1316 bytes) ...etc... npm WARN deprecated circular-json@0.5.9: CircularJSON is in maintenance only, flatted is its successor. > node-sass@4.9.3 install C:\xxx\git\spring5-angular2-mario-romano\login-app\node_modules\node-sass > node scripts/install.js Cached binary found at C:\xxx\AppData\Roaming\npm-cache\node-sass\4.9.3\win32-x64-64_binding.node > node-sass@4.9.3 postinstall C:\xxx\git\spring5-angular2-mario-romano\login-app\node_modules\node-sass > node scripts/build.js Binary found at C:\xxx\git\spring5-angular2-mario-romano\login-app\node_modules\node-sass\vendor\win32-x64-64\binding.node Testing binary Binary is fine npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any "} (current: {"os":"win32","arch":"x64"}) added 1097 packages from 1163 contributors and audited 39132 packages in 262.922s found 0 vulnerabilities
OK, this all seems fine. Then loads of these for different files:
warning: LF will be replaced by CRLF in .editorconfig. The file will have its original line endings in your working directory. Successfully initialized git.
Then things went weird! It looks like the console output was trying to run in PowerShell, and PowerShell was complaining about it.
PS C:\xxx\git\spring5-angular2-mario-romano> PS C:\xxx\git\spring5-angular2-mario-romano> ng version Get-Process : A positional parameter cannot be found that accepts argument 'ng'. At line:1 char:1 + PS C:\xxx\git\spring5-angular2-mario-romano> ng version + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + CategoryInfo : InvalidArgument: (:) [Get-Process], ParameterBindingException + FullyQualifiedErrorId : PositionalParameterNotFound,Microsoft.PowerShell.Commands.GetProcessCommand PS C:\xxx\git\spring5-angular2-mario-romano> PS C:\xxx\git\spring5-angular2-mario-romano> _ _ ____ _ ___ _ : The term '_' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:6 + _ _ ____ _ ___ + ~ + CategoryInfo : ObjectNotFound: (_:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException PS C:\xxx\git\spring5-angular2-mario-romano> / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| >> / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | >> / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | >> /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| >> |___/ >> At line:1 char:29 + / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| + ~ An empty pipe element is not allowed. At line:1 char:52 + / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| + ~ An empty pipe element is not allowed. At line:1 char:54 + / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| + ~ An empty pipe element is not allowed. At line:2 char:12 + / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | + ~~~~~~~~~~~~~~~~~~~~~~~~~~~ Expressions are only allowed as the first element of a pipeline. At line:2 char:39 + / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | + ~~ Unexpected token '__' in expression or statement. At line:2 char:42 + / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | + ~ An empty pipe element is not allowed. At line:2 char:46 + / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | + ~ An empty pipe element is not allowed. At line:2 char:48 + / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | + ~ An empty pipe element is not allowed. At line:2 char:52 + / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | + ~ An empty pipe element is not allowed. At line:2 char:54 + / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | + ~ An empty pipe element is not allowed. Not all parse errors were reported. Correct the reported errors and try again. + CategoryInfo : ParserError: (:) [], ParentContainsErrorRecordException + FullyQualifiedErrorId : EmptyPipeElement
It carried on like this until the end, but did also give out useful information in between:
PS C:\xxx\git\spring5-angular2-mario-romano> Angular CLI: 7.0.3 PS C:\xxx\git\spring5-angular2-mario-romano> Node: 10.13.0 PS C:\xxx\git\spring5-angular2-mario-romano> OS: win32 x64 PS C:\xxx\git\spring5-angular2-mario-romano> Angular: PS C:\xxx\git\spring5-angular2-mario-romano> ... PS C:\xxx\git\spring5-angular2-mario-romano> Package Version PS C:\xxx\git\spring5-angular2-mario-romano> ------------------------------------------------------ >> @angular-devkit/architect 0.10.3 PS C:\xxx\git\spring5-angular2-mario-romano> @angular-devkit/core 7.0. PS C:\xxx\git\spring5-angular2-mario-romano> @angular-devkit/schematics 7.0.3 PS C:\xxx\git\spring5-angular2-mario-romano> @schematics/angular 7.0.3 PS C:\xxx\git\spring5-angular2-mario-romano> @schematics/update 0.10.3 PS C:\xxx\git\spring5-angular2-mario-romano> rxjs 6.3.3 PS C:\xxx\git\spring5-angular2-mario-romano> typescript 3.1.3
Let’s check it out:
PS C:\xxx\git\spring5-angular2-mario-romano\login-app> dir Directory: C:\xxx\git\spring5-angular2-mario-romano\login-app Mode LastWriteTime Length Name ---- ------------- ------ ---- d----- 08/11/2018 11:05 e2e d----- 08/11/2018 11:09 node_modules d----- 08/11/2018 11:05 src -a---- 08/11/2018 11:05 245 .editorconfig -a---- 08/11/2018 11:05 503 .gitignore -a---- 08/11/2018 11:05 3795 angular.json -a---- 08/11/2018 11:09 372452 package-lock.json -a---- 08/11/2018 11:05 1316 package.json -a---- 08/11/2018 11:05 1025 README.md -a---- 08/11/2018 11:05 408 tsconfig.json -a---- 08/11/2018 11:05 2837 tslint.json
PS C:\xxx\git\spring5-angular2-mario-romano\login-app> ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-11-08T11:29:20.058Z
Hash: ae9a2e0aa03a148024ae
Time: 21309ms
chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.2 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.31 MB [initial] [rendered]
i ｢wdm｣: Compiled successfully.
In the broswer on http://localhost:4200/
Yippee!!!
backtojavaland 