Question

我在Angular 2应用程序中安装了angular2-google-maps用于谷歌地图。

我的package.json看起来像这样：

{ "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", "tsc": "tsc", "tsc:w": "tsc -w", "lite": "lite-server -c lite-server-conf.json", "typings": "typings", "docker-build": "docker build -t ng2-quickstart .", "docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart", "postinstall": "typings install && npm run tsc" }, "license": "ISC", "dependencies": { "angular2": "2.0.0-beta.14", "systemjs": "0.19.25", "es6-shim": "^0.35.0", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.2", "zone.js": "0.6.6", "angular2-jwt": "0.1.8", "jwt-decode": "^1.5.1", "bootstrap": "^3.3.6", "font-awesome": "^4.6.1", "jquery": "^2.2.3 ", "sweetalert2": "1.3.2 ", "flexslider": "2.6.0 ", "angular2-google-maps": "0.9.0", "google-fonts": "1.0.0" }, "devDependencies": { "concurrently": "^2.0.0", "lite-server": "^2.2.0", "typescript": "^1.8.9", "typings":"^0.7.12" } }

然后我将相关模块添加到我的index.html，如下所示：

<script src="node_modules/angular2-google-maps/bundles/angular2-google-maps.min.js"></script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBBiqOVDqRdhXharDKvO4Kx6DHMdzMvVn0" type="text/javascript"></script>

我的system.js配置：

<!-- 2. Configure SystemJS -->
<script>
System.config({
    packages: {
        app: {
            format: 'register',
            defaultExtension: 'js'
        },
        'angular2-google-maps': {
            defaultExtension: 'js'
        }
    },
    map: {
        "angular2-jwt": "node_modules/angular2-jwt/angular2-jwt.js",
        "angular2-google-maps": "node_modules/angular2-google-maps/bundles/angular2-google-maps.js"
    }
});
System.import('app/main')
        .then(null, console.error.bind(console));
System.import('node_modules/angular2-google-maps/bundles/angular2-google-maps.js')
        .then(null, console.error.bind(console));

要在我的组件中使用angular2-google-maps，我将其导入为：

import {ANGULAR2_GOOGLE_MAPS_DIRECTIVES,} from 'angular2-google-maps/core';

当我添加

时，它首先抛出了未找到的错误（如下所示）

directives: [ANGULAR2_GOOGLE_MAPS_DIRECTIVES]

但经过调整后 system.js 配置它已经分类。

我有一个单独的组件main.ts，我进行自举，我也在其中添加了模块：导入它：

import {ANGULAR2_GOOGLE_MAPS_PROVIDERS, NoOpMapsAPILoader, MapsAPILoader} from "angular2-google-maps/core";

和

bootstrap(AppComponent, [ANGULAR2_GOOGLE_MAPS_PROVIDERS,ROUTER_PROVIDERS, HTTP_PROVIDERS, FORM_PROVIDERS, BackendApis, provide(AuthHttp, { useFactory: (http) => { return new AuthHttp(new AuthConfig({ tokenName: 'jwt' }), http); }, deps: [Http] }), provide(LocationStrategy, {useClass: HashLocationStrategy}), provide(MapsAPILoader, {useClass: NoOpMapsAPILoader}) ]);

现在我的问题

地图加载但仅在我重新加载页面的两到三次之后才加载。我的控制台调试抛出此错误：

GET http://localhost:8003/node_modules/angular2-google-maps/bundles/angular2-google-maps.js/core.js 404 (Not Found)

这对于生产中的商业因素而言非常糟糕我不打算告诉用户继续重新加载页面（我也不想这样做！）所以我想知道，是我的cofiguration好吗？

我试图修改system.js配置，直到我加载地图，但看起来我带来了一些严重的错误。任何优化或指针都表示赞赏。

Answer 1

你真的帮助我解决了我的问题。

您似乎要映射到特定位置，而不是导入Google地图时实际需要的路径。

只需改变：

"angular2-google-maps": "node_modules/angular2-google-maps/bundles/angular2-google-maps.js"

为：

"angular2-google-maps": "node_modules/angular2-google-maps"

另外你也可以删除该行，我确信它会起作用，因为导入时路径通常默认为node_modules。

使用System.JS添加模块

1 个答案: