Creating an Angular Application - mamtajoshi13/datastructure GitHub Wiki

  1. Install node and yarn Install node on you machine. go to nodejs. org and download a version that matches your operating system. type npm --version,if you get a version then NPM is installed.

    Install yarn tool You can check your Yarn tool by typing yarn --version in your terminal and again if you get a version reported back you should be good to go.

  2. install angular CLI To install that tool simply type npm install -g @angular/cli. When the CLI tool finishes you can check to see if it's installed by typing ng -v. If the tool responds with a version then you're set.

  3. Generate a angular app ng new -routing

  4. setup a proxy To get our new Angular app to talk to Spring Boot correct we need to set up a proxy. The proxy will forward requests from our server running on port 4200 to the Spring Boot server running on port 8080. Proxies are great at overcoming the CORS issues where browsers block JavaScript calls to domains that they weren't served up from. For browsers, this provides a good security measure apps, but it makes it hard to tie js apps to the back ends if they're being served from different servers. Luckily, a proxy file can solve the problem for us.

    At the root of your project you're going to want to paste or create that proxy file so go ahead and create that file, which is called proxy.conf.json

    { "/server": { "target": "http://localhost:8090", //springboot app url "secure": false, "changeOrigin": true, "logLevel": "debug", "pathRewrite": { "^/server" : "" } } }

b)we need to make is to tell the Angular server to use the new proxy. You can do that by opening up package.json and change the following line. "scripts": { "ng": "ng", "start": "ng serve --proxy-config proxy.conf.json", //this line "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" },

  1. Generating an Angular Service ng g service services/workspace

  2. Generating an Angular Component ng g component component/home

  3. Setup angular routes add routes in app-routing.module.ts

const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'admin', component: AdminComponent } ];