Angular HttpClient error handling working code

 public load(url: string = '') {

        if (url) {

            this.url = url;

        }

        this.httpClient.get<T>(this.url)

        .pipe(catchError((err: any, caught: Observable<T>): ObservableInput<T> => {

            return throwError(err);

        }))

        .subscribe((data) => {

            this.data = data

            this.onLoad.next(this.data);            

        });

    }

Can't bind to 'ngIf' since it isn't a known property of 'div'

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

 @NgModule({
    imports: [CommonModule],
    declarations: [MyComponent]
  ...
})
class MyComponentModule {}

Angular nginx hosting

 server {

    listen        80;

    server_name   portal-vfabrika.sebittest.com;

    location / {

            root   /home/server/apps/vfabrika-portal;

            index  index.html index.htm;

            try_files $uri $uri/ /index.html;

    }

}

/etc/nginx/sites-available/default dosyasında en sona eklenebilir.

Angular General Project Requirements

Multiple applications in same project.
Material or Bootstrap layouting support.
i18n multi-language support for static resources.
A well designed folder structure for components, services, etc.
Authentication/authorization support with oidc client.

Create empty project
ng new AppName --createApplication=false --directory=AppName --interactive=false

Add project
ng generate application ProjectName --style=scss --routing=true

 

Best Practices

Yeni bir font nasıl eklerim?

Angular kendisi de dahil olmak üzere font'ları index.html dosyasından ekliyor. Yeni proje oluşturduğunuzda font import'u ve material icon'ları için link tanımlamasını index.html'de görebilirsiniz.

Örnek routing tanımlaması

const routes: Routes = [

  { path: '', redirectTo: '/designer', pathMatch: 'full' },

  { path: 'login', component: LoginComponent },

  { path: 'dashboard', component: DashboardComponent },

  { path: 'designer', component: DesignerComponent },

  { path: 'logout', component: LogoutComponent }

];

TreeView tutorial - çok işime yaradı :)

http://www.syntaxsuccess.com/viewarticle/recursive-treeview-in-angular-2.0

tsc.exe Duplicate Identifier ve Could not find name "promise" hatası

tsconfig.json

{
    "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"    ],
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false    }
}

typings.json

{
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/
es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"  },
  "globalDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160602141504",
    "jquery": "registry:dt/jquery#1.10.0+20160620094458",
    "require": "registry:dt/require#2.1.20+20160316155526"  }
}

typings klasörünü silip

typings install çakıyoruz...

ardından

typings install dt~es6-shim --save --global

ve

tsc çakınca sorunsuz yine komut satırına dönmesi gerekiyor...