javascript - 在混合应用程序中找不到 AngularJS-6ren

javascript - 在混合应用程序中找不到 AngularJS

转载作者：数据小太阳更新时间：2023-10-29 04:19:03

26

4

我正在构建 Angular 1+2 混合应用程序的 POC。我已经设法运行它，现在我正在尝试引入 Webpack。

我在引导模块时收到 Error: AngularJS v1.x is not loaded! 错误。我检查过 - 初始化模块时加载了 Angular 。

如有任何帮助，我们将不胜感激。

入口文件:

import { downgradeInjectable, downgradeComponent } from '@angular/upgrade/static';
import { BrowserModule } from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {HelloAngular2} from './components/hello-angular2';
import {TimeZonesService} from './services/timezones';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import * as angular from 'angular';

angular.module('scotchTodo', [/*'todoController', 'todoService'*/]);
angular.module('scotchTodo').directive('helloAngular2', downgradeComponent({ component: HelloAngular2}));
angular.module('scotchTodo').factory('timeZones', downgradeInjectable(TimeZonesService));   

@NgModule({
 declarations: [HelloAngular2],
 entryComponents: [HelloAngular2],
 imports: [BrowserModule, UpgradeModule],
 providers: [TimeZonesService]
})
class MyNg2Module {
    ngDoBootstrap() {};
}

platformBrowserDynamic().bootstrapModule(MyNg2Module).then(platformRef => {
  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
  upgrade.bootstrap(document.documentElement, ['scotchTodo']);
});

网络包配置:

var webpack = require('webpack'),
    path = require('path'),
    ExtractTextPlugin = require('extract-text-webpack-plugin');

var config = {
  entry: {
    app: __dirname + '/public/js/boot.js'
  },
  output: {
    path: __dirname + '/public/dist',
    filename: 'app-loader.js'
  },
  resolve:{
      extensions: ['.js'],
      alias: {
          'controllers/main.js': 'controllers/main.js',
          'services/todos.js':'services/todos.js'
      }
  }
};

module.exports = config;

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "public/jslibs",
    "typings/main",
    "typings/main.d.ts"
  ]
}

Bootstrap 生成的部分定义了 Angular :

angular.module('scotchTodo', []);
angular.module('scotchTodo').directive('helloAngular2', static_1.downgradeComponent({ component: hello_angular2_1.HelloAngular2 }));
angular.module('scotchTodo').factory('timeZones', static_1.downgradeInjectable(timezones_1.TimeZonesService));
var MyNg2Module = (function () {
    function MyNg2Module() {
    }
    MyNg2Module.prototype.ngDoBootstrap = function () { };
    ;
    return MyNg2Module;
}());
MyNg2Module = __decorate([
    core_1.NgModule({
        declarations: [hello_angular2_1.HelloAngular2],
        entryComponents: [hello_angular2_1.HelloAngular2],
        imports: [platform_browser_1.BrowserModule, static_2.UpgradeModule],
        providers: [timezones_1.TimeZonesService]
    })
], MyNg2Module);
platform_browser_dynamic_1.platformBrowserDynamic().bootstrapModule(MyNg2Module).then(function (platformRef) {
    var upgrade = platformRef.injector.get(static_2.UpgradeModule);
    upgrade.bootstrap(document.documentElement, ['scotchTodo']);
});

--更新--

使用此配置添加 ProvidePlugin 后:

新的 webpack.ProvidePlugin({ ' Angular ':' Angular '})

我认为来自升级模块的 Error: AngularJS v1.x is not loaded! 错误已经消失。现在 Angular 在 angular.module 中未定义，因为 Angular 是由 __webpack_require__

导入的

--更新 2--

似乎问题在于 AngularJS 不支持 CommonJS 样式 module.exports。我正在尝试使用 exports-loader 但它现在不起作用。配置是:

loaders: [
      { test: /[\/]angular\.js$/, loader: "exports-loader?angular" }
    ]

--更新 3--

将 module.exports = windows.angular; 添加到 Bootstrap 生成的文件后没有错误。但是应用程序仍然无法运行，因为没有可用 Angular resumeBootstrap 函数。

--更新 4--

这是主页 HTML:

<body ng-controller="mainController">
<div class="container">

    <!-- HEADER AND TODO COUNT -->
    <div class="jumbotron text-center">
        <h1>I'm a Todo-aholic <span class="label label-info">{{ todos.length }}</span></h1>
    </div>

    <!-- TODO LIST -->
    <div id="todo-list" class="row">
        <div class="col-sm-4 col-sm-offset-4">



            <!-- LOOP OVER THE TODOS IN $scope.todos -->
            <div class="checkbox" ng-repeat="todo in todos">
                <label>
                    <input type="checkbox" ng-click="deleteTodo(todo._id)"> {{ todo.text }}
                </label>
            </div>

            <p class="text-center" ng-show="loading">
                <span class="fa fa-spinner fa-spin fa-3x"></span>
            </p>

        </div>
    </div>

    <!-- FORM TO CREATE TODOS -->
    <div id="todo-form" class="row">
        <div class="col-sm-8 col-sm-offset-2 text-center">
            <form>
                <div class="form-group">

                    <!-- BIND THIS VALUE TO formData.text IN ANGULAR -->
                    <input type="text" class="form-control input-lg text-center" placeholder="I want to buy a puppy that will love me forever" ng-model="formData.text">
                </div>

                <!-- createToDo() WILL CREATE NEW TODOS -->
                <button type="submit" class="btn btn-primary btn-lg" ng-click="createTodo()">Add</button>
            </form>
        </div>
    </div>

    <div class="text-center text-muted">
        <p>A demo by <a href="http://scotch.io">Scotch</a>.</p>
        <p>Read the <a href="http://scotch.io/tutorials/javascript/creating-a-single-page-todo-app-with-node-and-angular">tutorial</a>.</p>
    </div>

</div>

--更新--

设置 window.name = "NG_DEFER_BOOTSTRAP!"; 帮助 Angular 初始化 resumeBootstrap 函数，但应用程序仍然无法运行

最佳答案

我知道您在混合使用 Angular 1 和 2 时遇到问题。您可能在设置过程中遗漏了一些东西。

我偶然发现了这篇很有帮助的博文:

https://medium.com/@SevenLee/configuration-tips-to-build-hybrid-angular-1-and-angular-2-project-in-real-world-230b715629dc#.r57e4561a

还有，你的 html 是什么样子的？

更新

Angular 1 => 网页包

Angular 2 => 网页包 2

关于 Webpack，git 存储库建议您使用为 Angular 1 制作的不同套件，这意味着您不能将 Angular 1 与该 Webpack 一起使用。

他们建议您改为使用 NG6:

“如果你正在寻找 Angular 1.x，请使用 NG6-starter 如果你想了解 Webpack 和 ES6 构建工具，请查看 ES6-build-tools 如果你正在寻找 TypeScript，请查看 TypeStrong/learn-typescript 如果您正在寻找更容易上手的内容，请查看我也维护的 angular2-seed angular/angular2-seed"

干杯

关于javascript - 在混合应用程序中找不到 AngularJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42753015/

26

4

0

文章推荐： javascript - 更改检测在 Firefox 中无法正常运行

c++ 将 printf 与 wprintf 混合(或将 cout 与 wcout 混合)
我知道您不应该将打印与 printf,cout 和 wprintf,wcout 混合使用，但是很难找到一个好的答案，为什么以及是否可以绕过它。问题是我使用了一个用 printf 打印的外部库，而我自己
Python多重继承/混合
我有以下问题: class A: animal = 'gerbil' def __init__(self): self.result = self.calculate_
OpenGL 混合 - 用不同的颜色填充交叉点
我在屏幕上渲染了一堆形状(多边形)，我没有使用深度测试。我只是希望这些形状在绘制在空白区域时使用自己的颜色，并且在绘制到任何非空区域时使用红色像素，即在我的情况下绘制在另一个多边形上。这里的问题实
grails - Groovy 混合？
我正在尝试在我的 Groovy/Grails 应用程序中混入一个类，我正在使用 the syntax defined in the docs ，但我不断收到错误消息。我有一个如下所示的域类: cla
OpenGL Alpha 混合
我已经找到了 5349574673 个关于 Alpha 混合的页面，但我仍然无法获得想要的结果。我正在尝试使用 opengl 使 gif/png 文件正确显示(具有透明度/半透明度)。这是我的初始化
javascript - 记录通过函数生成的类(混合)
我正在尝试记录以下代码，但我似乎无法让 JSDoc 记录该类，甚至无法引用它的存在。 // SomeMixin.js export default superclass => class SomeMi
scala - 家庭多态性+混合？
我有一个类型家族，我想使用 mixin 以模块化方式“丰富”它们。例如: trait Family { self => trait Dog { def dogname:String
ios - 混合 Storyboard中的单元和以编程方式创建的单元
我在 Storyboard中有 Collection View 。我在 Storyboard中有一部分单元格，还有我以编程方式创建的部分单元格。我应该在 sizeForItemAtIndexPath
c++ - 混合/修改数组访问
我有一个字节数组，我想更改它的访问方式。这是数组: char bytes[100]; 我想要另一个数组来改变原始数组的访问方式。如果我们可以将引用放在数组中，它看起来像这样: char& bytes_
c++ - c和c++混合
我需要从 c 文件调用 cpp 方法。我为此编写了这个界面.. cpp文件 extern "C" void C_Test(int p){ Class::CPP_Test(p); } c文件
移动和主要 CSS 混合
我的网站有两份 CSS 表，一份是主 CSS，一份是移动 CSS。问题是在移动设备(iPhone、Android)上查看时，两个样式表会混淆。例如，在 iPhone 上查看网站时，会应用主样式表中的某
Python Bokeh - 混合
维护人员的说明:此问题涉及已过时的 bokeh.charts API，该 API 已于多年前删除。有关使用现代 Bokeh 创建各种条形图的信息，请参阅: https://docs.bokeh.org
ios - 从另一个层中减去层，混合？
在下图中，蓝色圆圈仅用于调试目的。我的目标是蓝色圆圈后面的每一层都应该是透明的。我只想保持蓝色圆圈外面的可见。这是用 swift 编写的代码: let croissantView = UIV
SQL - 混合 AND 和 OR
我不是 SQL 专家。我正在使用 SQL Server 2005，我正在尝试弄清楚如何构造一个查询，以便它可以满足多种要求。我有两个表定义如下: Classroom - ID - Departme
完全不透明或透明的 openGL Alpha 混合
原创: 我之前问过这个问题，但我最初的例子有点不完整，我想我现在可以更具体地说明我的问题。对于上下文，我在旧的 Apple mac 计算机上使用 openGL 3.3 并尝试渲染四边形的重叠层。每个
YAML:将内联与同一对象的常规 map 混合
是否可以将内联(类似 json)映射与同一对象的常规映射定义混合使用？考虑以下示例: person: {age: 32, weight: 82} name: foo 生成的人应具有给定的年龄、体
inheritance - 如何在子类中将多个父类构造函数与 val 混合
假设我有一个 Parent 类，它有四个字段 A、B、C 和 D，这样 C 和 D 可以选择传递或使用默认实现进行初始化: open class Parent(val a: A, val b: B,
svn - 将存储库与 SVN 混合
我正在使用 symphony (1.4) 框架在 PHP 中开发一个 Web 应用程序。该代码使用 SVN 进行版本控制。在此网络应用程序中，我们所有客户共享一个共同的基础，以及一些专门为每个客户创建
Qt 小部件与顶部的 QML 混合
我想使用两个小部件(一次一个)作为我的应用程序的基础/背景，上面有一个 QML UI 和一个无边框窗口。它应该看起来像这样: 基于 OpenGL 的扫描组件通过窗口句柄操作的 3D 可视化组件多个
javascript - 混合 Angular 应用程序中的变化检测非常慢
我们有一个混合的 AngularJS/Angular 8 应用程序，并且我们不断遇到来自不同版本框架的组件之间的变化检测非常慢的问题。到目前为止，我们只在 Angular 组件中使用 AngularJ

首页

博学

6Ren·AI

商城

javascript - 在混合应用程序中找不到 AngularJS