Why do I get an error when I use Angular 2 directives?

Question

Angular

Wrote a component for the first time and decided to run hello world:
app.component.ts

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

@Component({
  selector: 'my-app', // <my-app></my-app>
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  
  // init component
  initClass = {fadeIn: false}; 
  isLoad = false;

  constructor() {
  	this.initClass.fadeIn = true;
  	this.isLoad = true;
  }
}

app.component.html

<div *ngIf="isLoad">
  
  {{isLoad}}

  <div>hello world</div>
    {{initClass | json}}
  <div>
  

</div>

If I use ngIf

ERROR in ./compiled/~/@angular/common/src/directives/ng_if.ngfactory.ts
Module parse failed: /home/splincode/Develop/ng2_webpack/node_modules/tslint-loader/index.js!/home/splincode/Develop/ng2_webpack/compiled/node_modules/@angular/common/src/directives/ng_if.ngfactory.ts Unexpected token (13:27)
You may need an appropriate loader to handle this file type.
| import * as import3 from '@angular/core/src/linker/view_utils';
| export class Wrapper_NgIf {
|   /*private*/ _eventHandler:Function;
|   context:import0.NgIf;
|   /*private*/ _changed:boolean;
 @ ./compiled/source/auth/app/app.component.ngfactory.ts 16:0-97
 @ ./compiled/source/auth/app/app.module.ngfactory.ts
 @ ./source/auth/main.ts

If ngClass

ERROR in ./compiled/~/@angular/common/src/directives/ng_class.ngfactory.ts
Module parse failed: /home/splincode/Develop/ng2_webpack/node_modules/tslint-loader/index.js!/home/splincode/Develop/ng2_webpack/compiled/node_modules/@angular/common/src/directives/ng_class.ngfactory.ts Unexpected token (13:27)
You may need an appropriate loader to handle this file type.
| import * as import3 from '@angular/core/src/linker/view_utils';
| export class Wrapper_NgClass {
|   /*private*/ _eventHandler:Function;
|   context:import0.NgClass;
|   /*private*/ _changed:boolean;
 @ ./compiled/source/auth/app/app.component.ngfactory.ts 15:0-99
 @ ./compiled/source/auth/app/app.module.ngfactory.ts
 @ ./source/auth/main.ts

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noEmit": true,
    "noEmitHelpers": true,
    "strictNullChecks": false,
    "baseUrl": "./src",
    "paths": {
    }
  },
  "exclude": [
    "node_modules",
    "dist",
    "src/**/*.spec.ts",
    "src/**/*.e2e.ts"
  ],
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true
  },
  "angularCompilerOptions": {
   "genDir": "./compiled",
   "skipMetadataEmit": true
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": { "rewriteTsconfig": false }
}

Answer 1

For ngIf, ngFor to work, CommonModule must be imported, but this is if you split the application into modules. You don't need to do this in the main, but you still have app.
I don’t know webpack - it slips in your error, maybe you are using an unconfigured starter - try digging there.