Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot load ng2-map #6

Closed
nhan-huynhvan opened this issue Jul 31, 2016 · 13 comments
Closed

Cannot load ng2-map #6

nhan-huynhvan opened this issue Jul 31, 2016 · 13 comments

Comments

@nhan-huynhvan
Copy link

Hi guys,

I'm installed ng2-map and config in systemjs.config.js file, but cannot run app. I get a issue: XHR error (404 Not Found) loading http://localhost:3000/node_modules/ng2-map/dist.js. Please help me to config.

Thank you so much!
@allenhwkim
Copy link
Contributor

allenhwkim commented Jul 31, 2016 •
edited
Loading

Thanks, I will look into ASAP. Meanwhile, if you provide me a plunker example, that makes me a lot easier to debug your issue.

@nhan-huynhvan
Copy link
Author

Can I push code into my git?

@rockways3002
Copy link

Here is my github https://github.com/rockways3002/example-ng2-map.git

@allenhwkim
Copy link
Contributor

Thanks for trying this map. af far as I see , your git does not have systemjs.config.js, which points where ng2-map is and how to use it.

@rockways3002
Copy link

rockways3002 commented Aug 1, 2016 •
edited
Loading

Hi allenhwkim,
I'm updated systemjs.config.js now. Can you help me check one more time. :)

@allenhwkim
Copy link
Contributor

Here are the things made to make your git repo to work.

diff --git a/app/app.component.ts b/app/app.component.ts
index d79bc51..a59ad5f 100644
--- a/app/app.component.ts
+++ b/app/app.component.ts
@@ -7,7 +7,7 @@ import { NG2_MAP_DIRECTIVES  } from "ng2-map";
    selector: 'my-app',
    template: `
        <div id="map">
-           <ng2-map  [center]="Brampton, Canada"></ng2-map>
+                   <ng2-map center="Brampton, Canada"></ng2-map>
        </div>
    `,
    directives: [NG2_MAP_DIRECTIVES],
@@ -15,4 +15,4 @@ import { NG2_MAP_DIRECTIVES  } from "ng2-map";

 export class AppComponent {

-}
\ No newline at end of file
+}
diff --git a/index.html b/index.html
index 32e29ce..e24c3a6 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,8 @@
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
+    <script src="https://npmcdn.com/typescript@1.8.10/lib/typescript.js"></script>
+
     <!-- 2. Configure SystemJS -->
     <script src="systemjs.config.js"></script>
     <script>
@@ -20,4 +22,4 @@
   <body>
     <my-app>Loading...</my-app>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/systemjs.config.js b/systemjs.config.js
index 7b37afd..e458308 100644
--- a/systemjs.config.js
+++ b/systemjs.config.js
@@ -13,10 +13,10 @@
   };
   // packages tells the System loader how to load when no filename and/or no extension
   var packages = {
-    'app':                        { main: 'main.js',  defaultExtension: 'js' },
+    'app':                        { main: 'main.ts',  defaultExtension: 'ts' },
     'rxjs':                       { defaultExtension: 'js' },
     'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
-    'ng2-map':                    { main: 'index.js', defaultExtension: 'js' }
+    'ng2-map':                    { main: 'dist/index.js', defaultExtension: 'js' }
   };
   var ngPackageNames = [
     'common',
@@ -43,6 +43,10 @@
   // Add package entries for angular packages
   ngPackageNames.forEach(setPackageConfig);
   var config = {
+    transpiler: 'typescript', //use typescript for compilation
+    typescriptOptions: {      //typescript compiler options
+      emitDecoratorMetadata: true
+    },
     map: map,
     packages: packages
   };

You may not need all of them, but at least it would be helpful for you.

Please follow README and don't forget to add api key if your domain is new or test on localhost.

NOTE: if you domain is new, and you are having api key error, please specify your api key like the following

import { NG2_MAP_DIRECTIVES, Ng2MapComponent } from "ng2-map";  // <--- this
// Ng2MapComponent.apiUrl = "https://maps.google.com/maps/api/js?key=YOUR_KEY";  // ???

@Component({ ... })
export class AppComponent {
  constructor() {
    Ng2MapComponent.apiUrl = "https://maps.google.com/maps/api/js?key=YOUR_KEY";
  }
}

@rockways3002
Copy link

You are very kind! :)
Thank you so much!

@allenhwkim
Copy link
Contributor

You are welcome. If you don't mind, please add a star on this repo, so that other developer can use it.

@rockways3002
Copy link

capture
I'm changed to the same of you, but not working :(

@allenhwkim
Copy link
Contributor

I think you are doing strict type checking. change .apiUrl to ['apiUrl']. That may work

@rockways3002
Copy link

HOw about Cannot find namespace 'google'.

@allenhwkim
Copy link
Contributor

allenhwkim commented Aug 1, 2016 •
edited
Loading

You need to install typings for google.maps. Please look at typings.json in this repo.

@allenhwkim
Copy link
Contributor

Now it uses .umd.js, typescript errors shouldn't be matter any more

This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@allenhwkim @nhan-huynhvan @rockways3002