angular2：如何解決錯誤：（SystemJS）模塊沒有定義？

我是angular2的新學員。我們知道在angular2中有一種方法可以通過相對路徑來引用文件，通過在組件元數據中定義moduleId : module.id。但是我想通過這種方式向始終得到以下錯誤：angular2：如何解決錯誤：（SystemJS）模塊沒有定義？

Error: (SystemJS) module is not defined

我已經在這裏建立了一個plunker：a simple angular2 app

文件結構如下，很簡單：

各部分的

內容是如下：

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 { 

}

對於其他文件，你可以參考plunker。我在typescriptOptions中設置了module: "commonjs"。我的代碼有什麼問題嗎？

來源

2016-12-28 ahwyX100

嗚嗚，我沒能使其在plunkr工作，但你應該出去檢查環節，它可能會幫助：http://blog.thoughtram.io/angular/2016/06/ 08/component-relative-paths-in-angular-2.html 你可能想看看它說的使用'__moduleName'而不是'module.id'來表示systemJS的底部。 –

是的，你是對的，我會自己添加一個答案 – ahwyX100

對於systemjs，在這裏我應該用__moduleName代替module.id

來源

2017-01-02 02:54:20 ahwyX100

這是爲我工作[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 { 

}

來源

2017-05-24 09:22:29

如果你想要使用module.id，您可以將@ types/node程序包安裝爲開發依賴項。

這會將模塊識別爲類型。

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

來源

2017-05-24 11:06:22 Steverob2k

angular2：如何解決錯誤：（SystemJS）模塊沒有定義？

回答

相關問題