start a new empty angular project

https://github.com/angular/flex-layout

in the end demo section, last one is good example


create a material.module.ts as below, than in app.module import it.

import { NgModule } from '@angular/core';

import {PlatformModule} from '@angular/cdk/platform';

import {ObserversModule} from '@angular/cdk/observers';

import {CdkTableModule} from '@angular/cdk/table';

import 'hammerjs';

import {

MatAutocompleteModule,

MatButtonModule,

MatButtonToggleModule,

MatCardModule,

MatCheckboxModule,

MatChipsModule,

MatDatepickerModule,

MatDialogModule,

MatExpansionModule,

MatGridListModule,

MatIconModule,

MatInputModule,

MatListModule,

MatMenuModule,

MatNativeDateModule,

MatPaginatorModule,

MatProgressBarModule,

MatProgressSpinnerModule,

MatRadioModule,

MatRippleModule,

MatSelectModule,

MatSidenavModule,

MatSliderModule,

MatSlideToggleModule,

MatSnackBarModule,

MatSortModule,

MatTableModule,

MatTabsModule,

MatToolbarModule,

MatTooltipModule,

MatStepperModule

} from '@angular/material';

const materialModule = [

CdkTableModule,

MatAutocompleteModule,

MatButtonModule,

MatButtonToggleModule,

MatCardModule,

MatCheckboxModule,

MatChipsModule,

MatStepperModule,

MatDatepickerModule,

MatDialogModule,

MatExpansionModule,

MatGridListModule,

MatIconModule,

MatInputModule,

MatListModule,

MatMenuModule,

MatNativeDateModule,

MatPaginatorModule,

MatProgressBarModule,

MatProgressSpinnerModule,

MatRadioModule,

MatRippleModule,

MatSelectModule,

MatSidenavModule,

MatSliderModule,

MatSlideToggleModule,

MatSnackBarModule,

MatSortModule,

MatTableModule,

MatTabsModule,

MatToolbarModule,

MatTooltipModule,

];

@NgModule({

exports: [

// export material modul

materialModule,

ObserversModule,

PlatformModule

]

})

export class CustomMaterialModule {}

in app.module.ts, just import above module

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

import { FlexLayoutModule } from '@angular/flex-layout';

import { AppComponent } from './app.component';

import { CustomMaterialModule } from './material.module';

@NgModule({

imports: [ BrowserModule, FormsModule, FlexLayoutModule, CustomMaterialModule ],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

========================================================================

create a new project (https://material.angular.io/guide/getting-started)

1) create a new empty angular project
ng new project-name

2) copy src/app folder from other project to our new project.
     It is app folder, not src

3) install material
    npm install --save @angular/material @angular/cdk
  npm install --save @angular/animations
    npm install --save hammerjs

4) style.css add
     @import "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css";

     index.html add icon
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     

5) import material to app module
     by add section below
       

const materialModules = [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule,
    MatSidenavModule,
    MatFormFieldModule,
    MatInputModule,
    MatTooltipModule
];
@NgModule({
  imports: [...materialModules],
  exports: [...materialModules],
  declarations: []
})
export class xxxxxxxxModule {
}

import { BrowserModule } from "@angular/platform-browser";

import { NgModule } from "@angular/core";

import { FormsModule } from "@angular/forms";

import { HttpModule } from "@angular/http";

import { AppComponent } from "./app.component";

import { AppRoutingModule } from "./app-routing.module";

import { PokemonListComponent } from "./pokemon/pokemon-list.component";

import { PokemonDetailComponent } from "./pokemon/pokemon-detail.component";

import { PokemonService } from "./pokemon/pokemon-service";

// ----------------- import ------ material angular ---------------

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import {

MatAutocompleteModule,

MatButtonModule,

MatButtonToggleModule,

MatCardModule,

MatCheckboxModule,

MatChipsModule,

MatDatepickerModule,

MatDialogModule,

MatExpansionModule,

MatGridListModule,

MatIconModule,

MatInputModule,

MatListModule,

MatMenuModule,

MatNativeDateModule,

MatPaginatorModule,

MatProgressBarModule,

MatProgressSpinnerModule,

MatRadioModule,

MatRippleModule,

MatSelectModule,

MatSidenavModule,

MatSliderModule,

MatSlideToggleModule,

MatSnackBarModule,

MatSortModule,

MatTableModule,

MatTabsModule,

MatToolbarModule,

MatTooltipModule,

MatStepperModule,

} from '@angular/material';

import {CdkTableModule} from '@angular/cdk/table';

import 'hammerjs';

const materialModule = [

CdkTableModule,

MatAutocompleteModule,

MatButtonModule,

MatButtonToggleModule,

MatCardModule,

MatCheckboxModule,

MatChipsModule,

MatStepperModule,

MatDatepickerModule,

MatDialogModule,

MatExpansionModule,

MatGridListModule,

MatIconModule,

MatInputModule,

MatListModule,

MatMenuModule,

MatNativeDateModule,

MatPaginatorModule,

MatProgressBarModule,

MatProgressSpinnerModule,

MatRadioModule,

MatRippleModule,

MatSelectModule,

MatSidenavModule,

MatSliderModule,

MatSlideToggleModule,

MatSnackBarModule,

MatSortModule,

MatTableModule,

MatTabsModule,

MatToolbarModule,

MatTooltipModule,

];

// ------------ End ----- material angular ---------------

@NgModule({

imports: [

AppRoutingModule,

BrowserModule,

FormsModule,

HttpModule,

// import material modul

materialModule,

],

//exports:[materialModule],

declarations: [

AppComponent,

PokemonListComponent,

PokemonDetailComponent

],

providers: [

PokemonService

],

bootstrap: [AppComponent]

})

export class AppModule { }

6) vscode, ctrl+` will open internal cmd
    ng serve --port 4205


7) if compiled failed, from error message said missing some package.
     Do not go to source package.json, you should not edit copy and past missing package to new project package.json.
 
     instead you should run

         npm install xxxxx --save

      this will automatically update package.json for you.


   for hero project, you must run , because angular cli will not add it by default.
 npm install angular-in-memory-web-api --save
 
Angular CLI no longer uses SystemJS (replaced by Webpack), so systemjs.config.js no longer exists.



===========================================
ng new project-name

cd project-name

ng serve --host 0.0.0.0 --port 4201




========================
first check angular /cli version by


ng --verison


if you see error:

Your global Angular CLI version (1.6.5) is greater than your local
version (1.5.2). The local Angular CLI version is used.

run this, to update local cli

npm install --save-dev @angular/cli@latest

You must have angular/cli the latest version install both global and locally



-g means install globle
npm install -g @angular/cli

ng new my-app



cd my-app
ng serve --open




npm install

=====================================


run angular app on PHP

open cmd

1) cd your-project folder

2) ng build

3) copy dist folder to apache/htdocs/[dist/or your-project-name]

4) Important:  open the index.html file, find <base href="/">
change it to <base href="/your-project-name/">
Without doing this, js file will not be load correctly.

5) http://localhost:80/your-project-name/index.html