This is a barebone Angular2 app setup for people who prefer step by step documented seed project rather than pre-defined ones provided by great programmers
Steps followed to setup this project in the current state:
- Setup a new repository on github
- Clone repo into local folder
- Navigate to directory and run command: "npm init"
- Copy tsconfig.json from "https://angular.io/docs/ts/latest/quickstart.html#!#tsconfig"
- Copy typings.json from "https://angular.io/docs/ts/latest/quickstart.html#!#tsconfig"
- Run command: "npm install browser-sync -g"
- Update package.json with scripts,dependencies, dev-dependencies
- Run command: "npm install"
- Update main.ts to import from app.ts
- Create folder structure to store components
- Add navbar component in masterpage folder
- Create masterpage.html and call navbar element from it.
- Add masterpage class as directive to app.ts
- Add navbar class as directive to masterpage.ts
- Update tsconfig.json compiler options with following: "outDir": "build" (remove currently existing .js, .map files in app folder and compiler tsc again)
- Edit index.html : Change definition of packages from app to build to load transpiled js files (Read more -> http://stackoverflow.com/questions/34878830/cannot-import-a-custom-component-angular2-and-typescript)
- npm install materialize-css --save to add into dependencies.
- Update index.html file to add links for materializecss.css file and js file
- Update navbar.html with materialize mobile-responsive layout.
- Added modal to navbar on click of button in reportCatalog.html
- Run command: "npm install --save ng2-material" for using modals
- Run command: "npm install es6-promise --save-dev for meeting ng2-material dependency
- Run command: "npm install angular2-materialize --save" to use materialize modals instead of ng2-material
- Updated index.html System.Config -> Added packages definition and their corresponding mappings
- Updated main.ts with import for angular2-materialize