Почему когда я использую директивы Angular 2 у меня выпадает ошибка?

Question

[Максим Иванов]

Написал компонент, в первый раз и решил запустить 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>

Если я использую 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

Если 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 }
}

Comments

[Максим Иванов]

да, проблема в вызове команды
$ npm run ngc -p tsconfig.json

после чего падает (из-за ng2 синтаксиса)

tsconfig.json в описании

[Максим Иванов]

Если не использовать синтаксис шаблонов ng2 то все компилируется

[Максим Иванов]

но как без шаблонов с синтаксисом angular2

Answer 1

[Илья Иджян]

Чтоб работали ngIf, ngFor - должен быть импортирован CommonModule, но это в случае если вы на модули разбили приложение. В главном этого делать не нужно, а у вас всеже - app.
Не знаю webpack - у Вас в ошибке он проскальзывает, может стартер используете не настроенный - попробуйте туда покопать.