2

I am a new learner of angular2. We know in angular2 there is a way to reference a file by relative path which by defining moduleId : module.id in component meta data. However I tried to to by that way and always get the following error:

Error: (SystemJS) module is not defined 

I have built a plunker here: a simple angular2 app

The file structure is as below, very simple:

enter image description here

Content of each part is as below:

config.js:

System.config({
    //use typescript for compilation
    transpiler: 'typescript',
    //typescript compiler options
    typescriptOptions: {
        emitDecoratorMetadata: true,
        module: "commonjs"
    },
    meta: {
        'typescript': {
            "exports": "ts"
        }
    },
    paths: {
        'npm:': 'https://unpkg.com/'
    },
    //map tells the System loader where to look for things
    map: {

        'app': './app',

        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

        '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
        '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
        '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
        '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
        '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
        '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
        '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',

        'rxjs': 'npm:rxjs',
        'typescript': 'npm:typescript/lib/typescript.js'
    },
    //packages defines our app package
    packages: {
        app: {
            main: 'main.ts',
            defaultExtension: 'ts'
        },

        rxjs: {
            defaultExtension: 'js'
        }
    }
});

app.component.ts:

import { Component } from '@angular/core';

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

}

For other file, you can refer to the plunker. I have set module: "commonjs" in typescriptOptions. Is there anything wrong with my codes?

2
  • Hum, I did not manage to make it work in the plunkr, but you should check that link out, it might help : blog.thoughtram.io/angular/2016/06/08/… You might want to look at the bottom where it says to use __moduleName instead of module.id for systemJS. Commented Dec 28, 2016 at 9:27
  • Yes, you are right, I will add an answer by myself Commented Jan 2, 2017 at 2:52

3 Answers 3

2

For systemjs, here I should use __moduleName instead of module.id

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

Comments

1

It's work for me [email protected], [email protected], [email protected]

declare var __moduleName: string;
import { Component } from '@angular/core';

@Component({
    moduleId: __moduleName,
    selector: 'app',
    templateUrl: 'app.component.html'
})
export class AppComponent {

}

Comments

0

If you want to use module.id you can install the @types/node package as a dev dependency.

This will recognise module as a type.

https://www.npmjs.com/package/@types/node

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.