angularjs 不包括 node_modules （缩小和注释）答案

【问题标题】：angularjs not including node_modules (minification and annotation)angularjs 不包括 node_modules （缩小和注释）
【发布时间】：2016-09-20 09:17:58
【问题描述】：

我正在做一个小型 angularjs 项目

我使用 ngRoute 导入：

npm install angular-route -S

我的 index.js 看起来像：

import angular from 'angular';

import {nv_morts} from './components/calculator/mortsList/morts';

import 'angular-route/angular-route';


angular.module('app.starter', ['ngRoute'
]).config(function ($routeProvider) {
    $routeProvider
        .when("/Calculators", nv_morts);
});

webpack.config：

 module: {
     loaders: [

       // load and compile javascript
       { test: /\.js$/, exclude: /node_modules/, loader:"babel", query: { presets: ['es2015', 'stage-1'] } },

       // load css and process less
       { test: /\.css$/, loader: "style!css"},

       // load JSON files and HTML
       { test: /\.json$/, loader: "json" },
       { test: /\.html$/, exclude: /node_modules/, loader:"raw" },

       // load fonts(inline base64 URLs for <=8k)
       { test: /\.(ttf|eot|svg|otf)$/, loader: "file" },
       { test: /\.woff(2)?$/, loader: "url?limit=8192&minetype=application/font-woff"},

       // load images (inline base64 URLs for <=8k images)
       {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
     ]   }

我在 package.json 中有一个脚本

"scripts": {
    "prestart": "npm install",
    "start": "webpack-dev-server",
    "bundle": "cp src/index.html dist/ & webpack -p ./dist/bundle.js"
  }

当我在本地工作时 (localhost:8080) 一切正常当我执行命令时

npm 运行构建

它在“dist”文件夹中构建文件 index.html 和 bundle.js

但是当我把这个文件放在 IIS 文件夹中时，我得到：

无法实例化模块 app.starter，原因如下：错误：[$injector:unpr] 未知提供者：t

如果我删除对 ngRoute 的依赖，它在 IIS 上也能正常工作

为什么最终的 bundle.js 中不包含 ngRoute？

谢谢大家

【问题讨论】：

标签： javascript angularjs json iis

【解决方案1】：

好的，所以我解决了:-)

问题出在缩小和注释中。

此链接AngularJs Minification & Annotation

很有帮助。

我的代码没有使用缩小安全依赖项。

例如：

我应该在 index.js 中完成：

.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when("/Calculators", nv_morts)}]);

当我向其他服务注入服务时，我需要使用与 index.js 相同的模式

在我注入服务的组件内部，我需要使用 $inject

例如：

class mortsController {

    /* @ngInject */
    constructor(MortsMngr) {
        this.newMortName = '';
        this.mortsManager = MortsMngr;
        this.savedMorts = MortsMngr.mortsList;

        MortsMngr.fetchMortsList();
    }  
}

mortsController.$inject = ['MortsMngr'];

export const nv_morts = {
    bindings: {},
    template: template,
    controller: mortsController,
    controllerAs: 'Morts'
}

注意这一行：

mortsController.$inject = ['MortsMngr'];

与众不同。

希望对大家有所帮助

【讨论】：