1_Basic Setup - mukeshrathore/base-project GitHub Wiki

Step 1: Installing angular CLI globally
npm install -g @angular/cli in current case we are installing 9.1.

Step 2: Creating GitHub repo
Using Github Desktop app : file--> New repository

• name: 'base-project',
• description:'base project to showcase app-lib and base-app integration and CRUD operation'
• local path: as per your choice under github folder

Initialize this repository with

• README: false,
• Git ignore: false // angular provides its own gitignore file
• license: MIT(as per your choice)

Step 3: Setting up base-project for Application
ng new base-project --createApplication=false --skipTests=true --style=scss --routing=true --minimal=false --directory=./
in above command we are using base-project as shell/base folder name. The developer can have any name of his/her choice. we have --directory flag to create new project under repo without creating another folder.

error encountered : "npm ERR! Unexpected end of JSON input while parsing near '....2.7"},"dist":{"integ'"
Solution worked at my end. -->

1. npm cache clean –force
2. npm cache verify // verify the cache size after clean. it has to be 0 before moving to next step otherwise run the clean command again.
3. remove node-modules folder and package.lock.json if created.
4. npm install // to install node-modules again

Step 4: Setting up Library
ng generate library app-lib --style=scss --skipTests=true
Unknown option: '--style'
Unknown option: '--skipTests'
If you face --style and --skipTests as unknown options then remove those flags and try executing the command again. By default prefix is 'lib' you can add custom prefix with --prefix flag.

Step 5: Generating base-app under Projects
ng generate application base-app --routing=true --style=scss
use the above command to generate base-app along side of app-lib. --skipTests=true flag can be added if project requirement is to skip unit testing of application.

Step 6: building library under watch mode
ng build --project=app-lib --watch
Here if we encounter node-sass issue, we can create "node-modules/vendor/win32-x64-64/" folder and place "binding.node" file and start building lib code. Please note "win32-x64-64" name depends on the binding.node file version.

Step 7: Serving the Application
use below command to serve the base-app application
ng serve --project=base-app -o --port=4201 --proxy-config=proxy.conf.json
-o flag indicates that application will open in browser after compilation
--project flag indicates specific project which needs to be served in case your base-app is already running and you want to serve another project then try running above command.
--port flag used to run the application on specific port if default port (4200) is already occupied by another application.
--proxy-config Please refer Annexure B for reference

Step 8: Building Application
For build use ng build --project=base-app --prod command for building prod build for application.

Step 9: Library Schematics for specifying styleext=scss and ignoring spec file generation
since -style=scss and --skipTests=true flags didn't worked while generating library and there were no schematics generated in angular.json under lib configs so we are copy pasting schematics from base-app to lib configs. "schematics": { "@schematics/angular:component": { "style": "scss" }

Reference : npmrc config file

When user don't have enough permission/access to outside network like npm site then .npmrc file comes handy to redirect/proxy URL to user defined path URL like artifactory.
npm gets its config settings from the command line, environment variables, and npmrc files.

npmrc file can be created by following options:
Option 1. Create file with the '.npmrc' extension under users/<name-of-current-user>/ folder, please note file have only extension and no file name.

Option 2. creating npmrc file using cmd npm config set registry <registry-url-name> // registry-url-name name could be out-of-network npm registry path or else internal artifactory path. if a user is unable to create a .npmrc file using option 1, then this cmd will allow that user to create a .npmrc file along with registry path url. npm config set email <emailId> for setting up email in .npmrc file.

Contents of .npmrc file:
I have came across 2 versions of configs:
version 1 (accessing out-of-network proxy env from restricted environment):

• registry=<registry-path> // in case of out-of-network, registry-path is http://registry.npmjs.org/
• proxy=<proxy-path> // proxy path comes handy when user is in network restricted environment. e.g. http://proxy.company.com:8080/
• https-proxy=<https-proxy-path> // this path can be same as proxy-path
• progress=true
• strict-ssl=true
• SASS_BINARY_PATH=<node-sass-binding-node-file-local-path> // e.g. c:\users<name-of-current-user>\node-sass\win32-x64-64_binding.node. these binding.node files varies depending on node/npm version and can be downloaded from Github node-sass releases

version 2 (network-restricted env having their own source for downloading required artifacts):

• _auth=<username-password-converted-to-base-64> // using basic authentication
• email = <emailId>
• always-auth=true
• registry=<registry-path>
• strict-ssl=false
• SASS_BINARY_PATH=<node-sass-binding-node-file-local-path>

After adding %USERPROFILE%/.npmrc file, npm install <package-name> will install the package through npmrc file configuration.

--proxy-config flag is added while serving the application to over come the CORS issue in browser for local development. proxy.config.ts is located at the root level of the application and it contains below information:
{ "_comment":"http://localhost:4201/presentation/userInfo will be redirected to http://localhost:8080/presentation/userInfo", "/presentation/":{ "target":"http://localhost:8080/", "secure":false } }

As per above proxy settings, any url which contains "/presentation/" will be redirected to new url because of this proxy.config settings. so here basically we are doing proxy or ports from 4201 to 8080.