Угловая сборка webpack Не могу найти компонент имени

Question

Я использую webpack для компиляции угловых, но, похоже, проблема с компиляцией определений классов. Классы, которые я объявляю и экспортирую в модули, недоступны без повторного использования их в компонентах.

Пример:

мне нужно использовать BasePageComponent на каждом PageComponent под pages.module.ts

pages.module.ts

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

import { BasePageComponent } from './base/base-page.component'; 
import { CreateListingPageComponent } from './create-listing.component'; 
import { DashboardPageComponent } from './dashboard.component'; 
import { LogInForgotPageComponent } from './login-forgot.component'; 
import { LogInPageComponent } from './login-page.component'; 


@NgModule({ 
    declarations: [ 
     BasePageComponent, 
     CreateListingPageComponent, 
     DashboardPageComponent, 
     LogInForgotPageComponent, 
     LogInPageComponent 
    ], 
    exports: [ 
     BasePageComponent, 
     CreateListingPageComponent, 
     DashboardPageComponent, 
     LogInForgotPageComponent, 
     LogInPageComponent 
    ], 
    imports: [ 
     RouterModule 
    ], 
    providers: [ 

    ], 
    bootstrap: [] 
}) 
export class PagesModule { } 

логин-forgot.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core'; 

@Component({ 
    'selector': 'login-forgot', 
    'template': ` 
     <p>Forgot pw</p> 
     <input type="text">send forgot email 
      <a [routerLink]="['/login']">Back to login</a> 
    ` 
}) 
export class LogInForgotPageComponent extends BasePageComponent { 

    public setTimeoutHandler; 

    constructor() { 
     super(); 
    } 

    ngOnInit(){ 
     this.setTimeoutHandler = setTimeout(() => { 
      //this.loader.stop(); 
     }, 1000); 
    } 

    ngOnDestroy(){ 
     clearTimeout(this.setTimeoutHandler); 
     //this.loader.start(); 
    } 
} 

Ошибка, которую я получаю:

ERROR in [at-loader] resources/assets/typescript/components/pages/login-forgot.component.ts:13:47 
    Cannot find name 'BasePageComponent'. 

Как мне удалось взломать-ремонт это:

я вставил эту строку кода перед LogInForgotPageComponent

import { BasePageComponent } from './base/base-page.component'; 

package.json

{ 
    "private": true, 
    "devDependencies": { 
    "awesome-typescript-loader": "^3.0.0-beta.17", 
    "del": "^2.2.0", 
    "gulp": "^3.9.1", 
    "typescript-decorate": "^1.0.0", 
    "typescript-extends": "^1.0.1", 
    "typescript-metadata": "^1.0.0", 
    "typescript-param": "^1.0.0", 
    "typings": "^2.1.0" 
    }, 
    "scripts": { 
    "install": "cd resources/assets/typescript" 
    }, 
    "dependencies": { 
    "@angular/common": "^2.4.1", 
    "@angular/compiler": "^2.4.1", 
    "@angular/core": "^2.4.1", 
    "@angular/forms": "^2.4.1", 
    "@angular/http": "^2.4.1", 
    "@angular/platform-browser": "^2.4.1", 
    "@angular/platform-browser-dynamic": "^2.4.1", 
    "@angular/router": "^3.4.1", 
    "@angular/upgrade": "^2.4.1", 
    "bootstrap-less": "^3.3.8", 
    "es6-shim": "^0.35.0", 
    "es7-reflect-metadata": "1.2.0", 
    "jquery": "^2.0.0", 
    "laravel-elixir": "^5.0.0", 
    "laravel-elixir-livereload": "^1.1.6", 
    "laravel-elixir-webpack-ex": "0.0.6", 
    "ng2-redux": "^5.1.0", 
    "redux": "^3.6.0", 
    "reflect-metadata": "0.1.3", 
    "rxjs": "^5.0.2", 
    "source-map-loader": "0.1.5", 
    "underscore": "^1.8.3", 
    "webpack": "1.13.2", 
    "zone.js": "^0.7.2" 
    } 
} 

В целом вопрос : Как я могу объявить компоненты и службы в NgModules и после этого не переименовывать их в проект? Что я здесь делаю неправильно?

Answer 1

Я думаю, что есть в игре два Diferent понятия:

1. Машинопись transpiler, которые необходимо выполнить проверку кода.
2. Угловой компилятор.

С помощью @NgModule вы сообщаете компилятору Angular, который «знает» об этом компоненте или предоставляет эту услугу. Но вам все равно нужно импортировать файл для доступа к самому коду.

Надеюсь, я помог вам, с наилучшими пожеланиями.