Question

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

引导模块时出现Error: AngularJS v1.x is not loaded!错误。我已经检查过 - 初始化模块时会加载角度。

任何帮助都将不胜感激。

条目文件：

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']);
});

Webpack配置：

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.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']);
});

- UPDATE -

使用此配置添加ProvidePlugin后：

new webpack.ProvidePlugin（{ '棱角'：'棱角' }）

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

导入

- 更新2 -

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

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

- 更新3 -

将module.exports = windows.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>

- UPDATE -

设置window.name = "NG_DEFER_BOOTSTRAP!";有助于Angular升级为resumeBootstrap，但应用程序仍无法正常工作

Answer 1

我知道你在混合Angular 1＆amp; 2.在设置过程中你可能错过了很多东西。

我偶然发现了这篇有用的博文：

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

另外，你的html是怎样的？

<强>更新

角度1 =＆gt;的WebPack

角度2 =＆gt; Webpack 2

关于Webpack，git存储库建议您使用为Angular 1制作的不同工具包，这意味着您无法将Angular 1与该Webpack一起使用。

他们建议您使用NG6代替：

“如果您正在寻找Angular 1.x，请使用NG6-starter如果您想了解Webpack和ES6 Build Tools，请查看ES6-build-tools如果您正在寻找学习TypeScript参见TypeStrong / learn-typescript如果你正在寻找更容易上手的东西，那么请看我也保持角度/角度2种子的angular2-seed“

干杯

在Hybrid应用程序中找不到AngularJS

1 个答案: