将模块注入角度作为未找到的模块

Question

I can't seem to inject a module into my angular app.

I am trying to import the following module which is installed through bower using:

bower install angular-pagedown --save

This seems to load fine within the bower-components folder which is in the following folder structure:

clinet
------app
---------bower-components
-------------------angular-pagedown
-------------------pagedown

When I try inject the module as it says in the instructions using 'ui.pagedown' which is indeed the name of the module, I use the following code in app.js:

import _Auth from '../components/auth/auth.module';
import account from './account';
import admin from './admin';
import navbar from '../components/navbar/navbar.component';
import footer from '../components/footer/footer.component';
import main from './main/main.component';
import questionsCreate from 
'./questionsCreate/questionsCreate.component';
import questionsShow from './questionsShow/questionsShow.component';
import constants from './app.constants';
import util from '../components/util/util.module';
import socket from '../components/socket/socket.service';


import './app.scss';

angular.module('filQuestionsApp', [ngCookies, ngResource, ngSanitize, 
'btford.socket-io', uiRouter,
  uiBootstrap, _Auth, account, admin, 'validation.match', navbar, 
footer, main, questionsCreate,
  questionsShow, constants, socket, util, 'ui.pagedown'
])

I seem to get the following error when trying to use the module:

Module 'ui.pagedown' 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.

I seem to be doing something really wrong with bower and angular together, I'm also getting 400 errors in terms of formatting and I'm not sure on the injection process.

Answer 1

How angular-pagedown work:

bower install angular-pagedown --save

This will also install pagedown dependencies. Import these files in your HTML:

pagedown/Markdown.Converter.js
pagedown/Markdown.Sanitizer.js
pagedown/Markdown.Extra.js
pagedown/Markdown.Editor.js
angular-pagedown/angular-pagedown.js
angular-pagedown/angular-pagedown.css

If you're using a build tool like grunt/gulp's main-bower-files, you don't need to import the files manually. But add this in your bower.json

"overrides": {
  "pagedown": {
    "main": [
      "Markdown.Converter.js",
      "Markdown.Sanitizer.js",
      "Markdown.Extra.js",
      "Markdown.Editor.js",
      "wmd-buttons.png"
    ]
  }
}

Include dependency in your app angular.module("yourApp", ["ui.pagedown"]);