Question

我正在使用webpack来编译angular，但是编译类定义似乎存在问题。如果没有在组件中重新声明它们，我在模块中声明和导出的类将无法使用。

示例：

我需要在pages.module.ts

下的每个PageComponent上使用BasePageComponent

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

我认为有两个不同的概念：

需要执行代码检查的Typescript转换器。
Angular compiler。

使用@NgModule，您可以告诉Angular的编译器＆＃34;知道＆＃34;关于该组件或提供该服务。但是您仍然需要导入文件才能访问代码本身。

我希望我能帮到你，最好的问候。

Angular 2 webpack编译找不到名称组件

1 个答案: