如何使用webpack 4. *加载angularjs 1. * ngRoute?

CodeAt30

我正在尝试建立一个基本的angularjs + webpack项目。只要我一个人坚持angularjs,我就能使其运行良好(ngApp = angular.module('ngApp), [])每当我尝试采取步骤添加一些角度扩展(ngApp = angular.module('ngApp), ['ngRoute'])时,某些操作将不起作用。我相当确定问题出在库的加载上。我不想使用Bower,我想使用Webpack来运行它。

webpack.config.js:

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Webpack Starter App',
            template: './src/templates/index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.js$/,
                use: [
                    'angular-router-loader',
                    'babel-loader'
                ]
                /* These  2 js loaders were failed attempts at solving this problem*/
            }
        ]
   }
};

ngApp.js

import * as angular from 'angular';
import ngRoute from'angular-route';
import './ngApp.controller.root.js';

const ngApp = angular.module('ngApp', [ngRoute]);

ngApp.config(function($routeProvider){
    $routeProvider.when('/', {
        controller: 'ngAppRootController',
        templateUrl: './ngApp.view.root.html'
    }).otherwise({
        redirectTo: '/'
    });
});

ngApp.$inject = [ngRoute];

webconsle错误:

angular.js:138 Uncaught Error: [$injector:modulerr] Failed to instantiate module ngApp due to:
Error: [$injector:unpr] Unknown provider: t
德米特里·阿尔加津(Dmitri Algazin)

如果您看到诸如“未知提供者”之类的错误,并带有诸如“ e” /“ t” /“ x”之类的随机字母,则意味着您需要ngInject插件来让Webpack知道要注入的依赖项。

在Angular文件中进行任何依赖项注入后,在下一行添加“ ngInject”:

ngApp.config(function($routeProvider, serviceWhateverYouRequire) {
'ngInject'
$routeProvider.when('/', {  bla-bla-bla

要么

ngApp.config(['$routeProvider', 'serviceWhateverYouRequire', function($routeProvider, serviceWhateverYouRequire) {
$routeProvider.when('/', {  bla-bla-bla

我们通过[email protected]将这些库用于devDependencies

"ng-annotate-loader": "0.1.0",
"ng-annotate-webpack-plugin": "^0.3.0",
"ts-ng-annotate-loader": "^0.2.1"

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

视图未使用ngRoute加载

使用ngroute时从AngularJS网址中删除#

ngRoute模块加载失败

Angular控制器未使用OcLazyLoad和ngRoute加载

摆脱 #!在angularjs ngRoute中

Angularjs中的ngroute

使用ngroute和ngview的Angularjs路由对我不起作用。单击链接不会加载预期的页面

AngularJS-在控制器名称中使用NgRoute的参数

加载失败 - 跨源请求是 - Angular.js 1.x - ngRoute

AngularJS ngRoute无法正常工作

AngularJS:ngRoute无法正常工作

angularjs ngroute和htaccess重写

我无法使用angularjs的ngroute模块加载HTML页面。我的代码对我来说看起来不错。我犯了什么错误?请检查代码

如何在angular js中处理ngRoute视图加载上的多个资源调用

使用Controller作为语法和ngRoute分别加载控制器

ngRoute无法加载$ routeProvider定义的视图

使用 MEAN 堆栈延迟加载 (AngularJS 1.x)

AngularJS ngRoute 没有按预期工作

angularjs中ngRoute的进度条

将ngRoute添加到angularjs

AngularJS:ngRoute,否则不起作用

AngularJS给出错误(ngRoute,DevExtreme,TypeScript)

LocalHost + AngularJS和ngRoute + AdBlock + Chrome =错误

AngularJS ngRoute子视图未在父视图中加载Javascript

如何使用 SystemJS 将 Angular 4 加载到 AngularJS 应用程序中?

使用webpack从angularjs模块加载特定指令

AngularJS控制器无法与IntelliJ中的ngRoute一起使用(Web服务器问题?)

如何在带有 Webpack 的 AngularJS 应用程序 (1.x) 上使用 TypeScript

ngRoute加载模板时,OffsetWidth / offsetHeight为零