Angular 2 webpack compilation Cannot find name component

Question

I am using webpack to compile angular, but there seems to be an issue with compiling class definitions. The classes that I declare and export in modules are not available without redeclaring them in components.

Example:

I need to use BasePageComponent on every PageComponent under 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 { }

login-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();
    }
}

The error I am receiving:

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

How I managed to hack-repair this:

I inserted this line of code before the 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"
  }
}

All in all the question is: How can I declare components and services in NgModules and after that not having to reimport them into the project? What am I doing wrong here?

user5711008 · Accepted Answer · 2017-01-09 14:44:21Z

1

I think there are in play two diferent concepts:

Typescript transpiler who needs to perform the code checking.
Angular compiler.

With @NgModule you're telling Angular's compiler who "knows" about that component or provide that service. But you still need to import the file for having access to the code itself.

I hope I have helped you, best regards.

answered Jan 9, 2017 at 14:44

user5711008

Sign up to request clarification or add additional context in comments.

2 Comments

Karl Johan Vallner Over a year ago

Can someone verify this? What is the point of NgModules then, if I still have to import every component and service like pre-RC5? Also this sounds wrong, because then I have 2 imports for everything, one in the component and one in the module. And both of them pointing at the origin of the import. Meaning that if I import { A } from B in the component and module and then change A, then I have to go over all the components in every module that imports A, because of the dual importing...

Karl Johan Vallner Over a year ago

Also if I declare for example BrowserModule in my NgModule (import { BrowserModule } from '@angular/platform-browser';), then I dont have to reimport this in my Component file, it automatically compiles and I can use it, when I imported it into the Components parent module.

Collectives™ on Stack Overflow

Angular 2 webpack compilation Cannot find name component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related