Question

我试图使用angular-2-google-place-autocomplete

我一直没有找到404错误。我使用googleplace.directive.js文件和googleplace.directive.ts直接复制粘贴到我项目的app文件夹中。

我该怎么做才能直接修复此错误：

http://localhost:3000/js/node_modules/angular2-google-map-auto-complete/directives/googleplace.directive 404（未找到）

它说找不到＆＃34; js / node_modules ......＆＃34;它不应该是因为node_modules在js文件夹之外。如何在js / node_modules文件夹中停止查看？

一些配置信息：

tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir":"js/"
  },
    "exclude": [
    "node_modules"
  ]  
}

的package.json：

{
  "name": "the-vegan-repository",
  "version": "1.0.0",
  "scripts": {
    "lite-server-test": "lite-server --config=liteserver-test-config.json",
    "test": "tsc && concurrently \"npm run tsc:w\" \"npm run lite-server-test\" ",
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" \"sass --watch app\" \"sass --watch index.scss\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "angular2-google-maps": "^0.12.0",
    "angular2-in-memory-web-api": "0.0.14",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.0",
    "jquery": "v3.1.0",
    "ng2-select": "^1.0.3",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "codelyzer": "0.0.26",
    "concurrently": "^2.0.0",
    "jasmine-core": "2.4.1",
    "lite-server": "^2.2.0",
    "tslint": "^3.13.0",
    "typescript": "^1.8.10",
    "typings": "^1.0.4"
  }
}

systemjs.config.js：

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'js/app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs',
    'angular2-google-maps': 'node_modules/angular2-google-maps'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: '../app/main',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index', defaultExtension: 'js' },
    'node_modules/angular2-google-maps/core': {defaultExtension: 'js',main: 'index.js'}
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

文件夹结构：

googleplaces指令与我的组件所在的文件夹相同。

这是依赖它的组件：

import { Component } from '@angular/core';
import { GoogleplaceDirective } from 'googleplace.directive';

@Component({
    selector : 'area-picker',
    directives: [GoogleplaceDirective],
    template:  `
        <input type="text" [(ngModel)] = "address"  (setAddress) = "getAddress($event)" googleplace/>
        `    
})
export class AreaPickerComponent {
    public address : Object;
    getAddress(place:Object) {       
        this.address = place['formatted_address'];
        var location = place['geometry']['location'];
        var lat =  location.lat();
        var lng = location.lng();
        console.log("Address Object", place);
    }
}

编辑：我已经将映射和包添加到我的systemjs.config.js文件中，但是当node_modules文件夹位于jsfolder之外时，它似乎仍然在js / node_modules中查找该文件。是一个兄弟文件夹。但是，由于某些原因，每次编译时都会在js文件夹中创建一个node_modules文件夹，但它不应该

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'js/app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs',
    'angular2-google-maps': 'node_modules/angular2-google-maps',
    'angular-place' : 'node_modules/angular2-google-map-auto-complete'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: '../app/main',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index', defaultExtension: 'js' },
    'node_modules/angular2-google-maps/core': {defaultExtension: 'js',main: 'index.js'},
    'node_modules/angular2-google-map-auto-complete/directives': {defaultExtension: 'js',main: 'googleplace.directive.js'}
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

找不到zone.js 404

0 个答案: