FountainJS Angular2安裝組件angular2-google-maps問題

Question

我使用帶有Typescript和Systems.js的FountainJS Angular2生成器來構建項目。 https://github.com/FountainJS/generator-fountain-angular2

但是我遇到了問題，我無法將組件添加到項目中。 當我輸入import {GOOGLE_MAPS_DIRECTIVES}此錯誤

system.src.js:1057 GET http://localhost:3000/node_modules/angular2-google-maps/core/index.js 404 (Not Found)

我瀏覽了https://angular-maps.com/docs/getting-started.html “入門”部分，並向jspm.config.js文件中添加了一些代碼，但是我沒有angular-cli-build.js文件放在我的項目中。

我的jspm.config.js

SystemJS.config({
  packageConfigPaths: [
    'npm:@*/*.json',
    'npm:*.json',
    'github:*/*.json'
  ],
  map: {
    'angular2-google-maps': 'node_modules/angular2-google-maps',
    '@angular/common': 'npm:@angular/common@2.0.0-rc.4',
    '@angular/compiler': 'npm:@angular/compiler@2.0.0-rc.4',
    '@angular/core': 'npm:@angular/core@2.0.0-rc.4',
    '@angular/http': 'npm:@angular/http@2.0.0-rc.4',
    '@angular/platform-browser': 'npm:@angular/platform-browser@2.0.0-rc.4',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@2.0.0-rc.4',
    '@angular/router': 'npm:@angular/router@3.0.0-beta.2',
    'es6-shim': 'npm:es6-shim@0.35.1',
    'os': 'github:jspm/nodelibs-os@0.2.0-alpha',
    'process': 'github:jspm/nodelibs-process@0.2.0-alpha',
    'reflect-metadata': 'npm:reflect-metadata@0.1.3',
    'rxjs': 'npm:rxjs@5.0.0-beta.6',
    'ts': 'github:frankwallis/plugin-typescript@4.0.16',
    'zone.js': 'npm:zone.js@0.6.17'
  },
  packages: {
    'angular2-google-maps/core': {
      defaultExtension: 'js',
      main: 'index.js' // you can also use core.umd.js here, if you want faster loads
    },
    'github:frankwallis/plugin-typescript@4.0.16': {
      'map': {
        'typescript': 'npm:typescript@1.8.10'
      }
    },
    'github:jspm/nodelibs-os@0.2.0-alpha': {
      'map': {
        'os-browserify': 'npm:os-browserify@0.2.1'
      }
    }
  }
});

Answer 1

您正在獲取node_modules/angular2-google-maps/core/index.js 404 (Not Found)因為npm run serve使用的Web服務器不提供node_modules。

如果需要客戶端代碼可訪問node_modules，則必須在conf/browsersync.conf.js為其添加路由：

  routes: {
    '/node_modules': 'node_modules',

另外，您可以使用jspm而不是npm來安裝angular2-google-maps：

jspm install angular2-google-maps

和jspm會修改jspm.config.js來為angular2-google-maps添加正確的映射。

但是，修復404錯誤后，我現在開始

system.src.js:123 Uncaught (in promise) Error: (SystemJS) core_1.NgModule is not a function
TypeError: core_1.NgModule is not a function

這可能意味着最新的angular2-google-maps 與 generator-fountain-angular2安裝的angular2-rc4不兼容 。