2017-07-12 5 views
0

Ich versuche angular-ui-router in meiner app zu verwenden, aber Probleme habe, wenn es

Error: [$injector:modulerr] Failed to instantiate module uiRouter due to: 
Error: [$injector:nomod] Module 'uiRouter' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. 

Hier Import ist mein main.js

import angular from 'angular'; 
import uiRouter from 'angular-ui-router'; 

(function() { 
    function config($locationProvider, $stateProvider) { 
     $locationProvider 
      .html5Mode({ 
      enabled: true, 
      requireBase: false 
     }); 

    } 
    angular 
     .module('myApp', ['uiRouter']) 
     .config(config); 

})(); 

Meine index.html Datei hat die App erklärt <html lang="en" ng-app="myApp"> ich beide Pakete über npm installiert haben

[email protected] /Users/.../myApp 
├── [email protected] 
├─┬ [email protected] 
│ └── @uirouter/[email protected] 

Sie wissen nicht, ob es relevant ist, aber es erklärt auch

"dependencies": { 
    "angular": "^1.6.5", 
    "angular-ui-router": "^1.0.3", 

In der Vergangenheit habe ich immer Winkel Bibliotheken über <script> Tags in index.html in package.json so importiert haben bin nicht vertraut mit, wie Pakete zu importieren.

Ich habe auch gelesen, dass ui-router als Umfang Pakete angeboten wird: https://ui-router.github.io/blog/uirouter-scoped-packages/ aber weiß nicht, ob es hier relevant ist (ich importierte auch die Pakete in diesem Link beschrieben, aber schien nicht zu helfen).

Frage Warum wird angular-ui-router nicht erkannt?

+0

könnten Sie einen Plünderer Ihres Codes bereitstellen. Und bist du dir sicher, dass angular-ui-router enthalten ist? – user93

+0

hast du den 'angular-ui-router' in dein html mit' script' tag eingebaut? –

Antwort

0

Ok, ich habe das funktioniert, aber es war nicht das, was ich ursprünglich erwartet hatte. Ich verwende sowohl die ES6 Importfunktion und auch eine Winkel Dependency Injection hier:

änderte ich main.js

import angular from 'angular'; 
import uiRouter from 'angular-ui-router'; 

(function() { 
    function config($stateProvider, $urlRouterProvider) { 
     /* $locationProvider //ignore 
      .html5Mode({ 
      enabled: true, 
      requireBase: false 
     }); */ 

    } 
    angular 
     .module('myApp', ['ui.router']) 
     .config(config); 

})(); 

Um zu erklären, zu lesen. Ich importiere über uiRouter von 'angular-ui-router', damit main.js auf dieses ui Router-Objekt zugreifen kann. Dann benutze ich ui.router in der Angular dependency injection, da dies der interne Name für den ui Router in Angular ist. Die Providernamen unterscheiden sich auch für ngRoute und ui-router ($locationProvider im Originalcode vs. $urlRouterProvider hier).

Ich verwende kein <script> Tag, um eine Angular-Bibliothek zu importieren.

Verwandte Themen