CODEWITHSUNDEEP
javascriptangular
Marek M.
Marek M.

Reputation: 3951

Cannot find name module in Angular2 app

I'm using angular-cli for running my typescript powered angular2 app. I have an AppComponent defined like this:

import { Component } from '@angular/core';
import { ServersListComponent } from './servers-list/servers-list.component';

@Component({
    moduleId: module.id,
    selector: 'app',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    directives: []
})
export class AppComponent {

}

angular-cli can't compile this file, because it complains with an error mentioned in topic of this question in the line moduleId: module.id.

My tsconfig.json file is defined as below:

{
    "compileOnSave": false,
    "compilerOptions": {
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "mapRoot": "",
        "module": "commonjs",
        "moduleResolution": "node",
        "noEmitOnError": true,
        "noImplicitAny": false,
        "outDir": "../dist/",
        "rootDir": ".",
        "sourceMap": true,
        "target": "es5",
        "inlineSources": true
    },
    "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]
}

Upvotes: 8

Views: 3899

Answers (4)

Zze
Zze

Reputation: 18835

Update mid 2017

Since angular migrated to using webpack there is no longer a need to declare moduleId as webpack plugins auto handle (add it) module.id in the final bundle.

As of 13.03.2017 Angular has removed all references to moduleId as it is now deprecated due to the inclusion of webpack.

We added a new SystemJS plugin (systemjs-angular-loader.js) to our recommended SystemJS configuration. This plugin dynamically converts "component-relative" paths in templateUrl and styleUrls to "absolute paths" for you.

We strongly encourage you to only write component-relative paths. That is the only form of URL discussed in these docs. You no longer need to write @Component({ moduleId: module.id }), nor should you.

Upvotes: 1

inixmon
inixmon

Reputation: 41

I had the same problem today when creating a first component in a feature folder using the angular-cli. As Maxime said, you can do this without a module id. But you have to use a relative path for your template and your styles, like inside the initially generated app.component:

templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],

Upvotes: 0

Stef Heyenrath
Stef Heyenrath

Reputation: 9850

A possible work-around could be to add a app.d.ts file like this

https://github.com/johnpapa/pbp-a2-ward/blob/010523471e70677ba2493eb615c8e6316e3d4ee8/app/app.d.ts

Upvotes: 1

Thierry Templier
Thierry Templier

Reputation: 202296

To be able module.id, your project must be a commonjs module, i.e. the module attribute set to commonjs in the tsconfig.json file. Is it the case:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs", // <-----
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

Upvotes: 1

Related Questions