AngularJS 未在混合应用中找到
AngularJS is not found in Hybrid app
我正在构建 Angular 1+2 混合应用程序的 POC。我已经设法 运行 它了，现在我正在尝试引入 Webpack。
bootstrapping 模块时出现 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']);
});
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 定义的部分：
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 时遇到问题。您可能在设置过程中遗漏了一些东西。
我偶然发现了这个博客 post，它很有帮助：
还有，你的html长得怎么样？
更新
Angular 1 => Webpack
Angular 2 => Webpack 2
关于 Webpack，git 存储库建议您使用为 Angular 1 制作的不同套件，这意味着您不能将 Angular 1 与该 Webpack 一起使用。
他们建议您改为使用 NG6：
"If you're looking for Angular 1.x please use NG6-starter If you're looking to learn about Webpack and ES6 Build Tools check out ES6-build-tools If you're looking to learn TypeScript see TypeStrong/learn-typescript If you're looking for something easier to get started with then see the angular2-seed that I also maintain angular/angular2-seed"
干杯
我正在构建 Angular 1+2 混合应用程序的 POC。我已经设法 运行 它了，现在我正在尝试引入 Webpack。
bootstrapping 模块时出现 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']);
});
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 定义的部分：
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 时遇到问题。您可能在设置过程中遗漏了一些东西。
我偶然发现了这个博客 post，它很有帮助：
还有，你的html长得怎么样？
更新
Angular 1 => Webpack
Angular 2 => Webpack 2
关于 Webpack，git 存储库建议您使用为 Angular 1 制作的不同套件，这意味着您不能将 Angular 1 与该 Webpack 一起使用。
他们建议您改为使用 NG6：
"If you're looking for Angular 1.x please use NG6-starter If you're looking to learn about Webpack and ES6 Build Tools check out ES6-build-tools If you're looking to learn TypeScript see TypeStrong/learn-typescript If you're looking for something easier to get started with then see the angular2-seed that I also maintain angular/angular2-seed"
干杯